ESBuild是否有Webpack DefinePlugin的等效替代方案？

问题背景 #

我之前在Webpack构建配置中使用DefinePlugin将编译时计算的值注入到打包代码中，示例代码如下：

Webpack 配置示例 #

// webpack.config.js
new DefinePlugin({
  'process.env.APP_BUILD_MODE': JSON.stringify(passedInValueFromCLI)
})

业务代码使用示例 #

// app.ts
// 这里使用Webpack通过DefinePlugin注入的process.env.APP_BUILD_MODE
const production: boolean = process.env.APP_BUILD_MODE === 'production';

现在我正重构构建工具为ESBuild，需要实现完全相同的功能，请问ESBuild是否有与DefinePlugin等效的方案？

解决方案 #

ESBuild 提供了**define配置项**，可以完全替代Webpack的DefinePlugin，实现编译时注入变量的需求，用法逻辑和Webpack高度一致。

ESBuild 配置示例 #

// esbuild.config.js
require('esbuild').build({
  // 其他基础配置（入口、输出等）...
  define: {
    'process.env.APP_BUILD_MODE': JSON.stringify(passedInValueFromCLI)
  }
}).catch(() => process.exit(1))

业务代码使用（与Webpack场景完全一致） #

// app.ts
const production: boolean = process.env.APP_BUILD_MODE === 'production';

关键注意事项 #

• 配置中的键名必须和业务代码中引用的变量完全匹配，和Webpack的规则一致
• 字符串类型的变量必须用JSON.stringify()处理，确保注入的是合法的JavaScript字符串字面量
• 如果需要从CLI传递参数，可以通过process.argv解析对应的值后传入define配置

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