Angular项目从Webpack迁移至esbuild：自定义环境变量配置咨询

Angular 16及以上版本支持的esbuild构建器，提供了两种方式实现类似Webpack DefinePlugin的自定义环境变量注入，完全匹配你之前的需求，具体操作如下：

方式一：直接在angular.json中配置define（适合静态/环境变量直接取值） #

如果变量仅需从环境变量读取或设置固定值，可直接在angular.json的esbuild builder配置里添加define字段，无需额外配置文件：

修改angular.json中对应项目的构建配置，将builder切换为esbuild并添加define：

"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
  // 保留原有其他配置
  "define": {
    "VERSION": JSON.stringify(process.env.VERSION || require('os').hostname()),
    "URL": JSON.stringify(process.env.URL || '')
  }
}

方式二：使用自定义esbuild配置文件（适合复杂动态逻辑） #

如果需要像之前Webpack配置那样的动态取值逻辑，可通过自定义配置文件实现：

1. 创建自定义esbuild配置文件
   在项目根目录新建angular-esbuild.config.js，写入以下内容：

const os = require('os');

module.exports = {
  define: {
    VERSION: JSON.stringify(process.env.VERSION || os.hostname()),
    URL: JSON.stringify(process.env.URL || '')
  }
};

2. 在angular.json中引用配置文件
   更新angular.json的构建配置，添加esbuildConfig字段指定配置文件路径：

"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
  // 保留原有其他配置
  "esbuildConfig": "./angular-esbuild.config.js"
}

在代码中使用自定义变量 #

和Webpack方式一致，直接在组件或服务中全局使用这些变量即可，示例：

// 组件中使用
export class AppComponent {
  appVersion = VERSION;
  apiBaseUrl = URL;
}

若TypeScript提示“找不到名称VERSION/URL”，在src/typings.d.ts中添加类型声明：

declare const VERSION: string;
declare const URL: string;

内容的提问来源于stack exchange，提问作者user3623300