Angular esbuild 中的自定义 webpack 配置

Question

目前我的 Angular 项目使用自定义 webpack 配置文件。

          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "allowedCommonJsDependencies": [
                ...
            ],
            "customWebpackConfig": {
              "path": "./angular-webpack.config.js",
              "mergeRules": {
                "module": {
                  "rules": "prepend"
                }
              }
            },

在我的自定义配置中，我使用 mt build 中的一些自定义环境变量。
但我想转向 esbuild，但问题是我找不到任何好的/明显的方法来为 Angular 进行一些自定义 esbuild 配置。

let DefinePlugin = require('webpack/lib/DefinePlugin');
let OS = require('os');

module.exports = {
    plugins: [
        new DefinePlugin({
            VERSION: JSON.stringify(process.env.VERSION || OS.hostname()),
            URL: JSON.stringify(process.env.URL || ''),
        }),
    ],
}

对于我应该如何为 Angular esbuild 实现自定义环境变量的任何帮助或提示，我们表示赞赏。

谢谢。

Answer 1

目前（Angular 17.1），基于 esbuild 的 Angular 构建器不正式支持对 esbuild 和 Vite 配置的更改，如果可用，将允许将环境变量传递到构建的应用程序。

作为解决方法，您可以使用 obscurexecuteDevServerBuilder和createBuilderAPI 来包装默认构建器，并将 esbuild 插件注入到的第四个参数中executeDevServerBuilder，例如esbuild-plugin-define：

const { executeDevServerBuilder } = require("@angular-devkit/build-angular");
const { createBuilder } = require("@angular-devkit/architect");
const { definePlugin } = require('esbuild-plugin-define')

const builder = function (options, context) {
  return executeDevServerBuilder(options, context, undefined, {
    buildPlugins: [definePlugin({
        process: {
          env: {
            BUILD_TIMESTAMP: process.env.BUILD_TIMESTAMP,
          },
        },
      })]
  });
};
module.exports = createBuilder(builder);

这里有一篇文章更详细地解释了包装构建器的过程。

幸运的是，您不必制作自己的包装器，dot-env包正是这样做的。