1. 安装依赖

为了使用 esbuild，我们需要安装相应的依赖。

npm install --save-dev esbuild

2. 修改配置

我们需要在 Angular CLI 配置文件中添加一个新的构建器，以使用 esbuild。

// angular.json
{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            // ...
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "mergeStrategies": {
                "externals": "prepend"
              }
            }
          },
          "configurations": {
            "production": {
              // ...
              "customWebpackConfig": {
                "path": "./webpack.prod.config.js"
              }
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            // ...
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            }
          }
        }
      }
    }
  }
}

// webpack.config.js
const { AngularEsbuildPlugin } = require('@angular-esbuild/webpack');

module.exports = {
  plugins: [
    new AngularEsbuildPlugin(),
  ],
};

3. 打包

现在，我们可以使用 Angular CLI 执行打包命令。

ng build --prod

运行这个命令时，Angular CLI 构建器就会使用 esbuild 来编译我们的 TypeScript 代码。