Webpack 将 CLI 环境变量导出到窗口对象

Question

有没有办法使用 Webpack 向窗口对象公开环境变量？

例如，在执行REALM=stage npm run start时，我希望 webpack 读取REALM并将其作为window.__realm提供，以便我的 React 应用程序可以从window对象读取它。

Answer 1

您可以使用 DefinePlugin，文档： https://webpack.js.org/plugins/define-plugin/

在 webpack 配置中，你需要使用插件：

new webpack.DefinePlugin({FOO: '123'})

在代码中，您需要分配给变量：

window.FOO = process.env.FOO;

当 webpack 编译代码时，它会将 process.env.FOO 替换为 '123'; 因此，编译后您将获得：

window.FOO = '123';

Answer 2

您可以在output配置对象中使用libraryTarget：

output: {
library: "__realm",
libraryTarget: "window"
}

并用window.__realm访问它.

Answer 3

@Andrey答案是我在任何地方找到的最接近的答案，但并不完全存在。

这就是最终对我有用的：

在您的 Webpack 配置中：

new webpack.DefinePlugin({'process.env.FOO': JSON.stringify(true)})

在项目源文件之一的顶层的某个位置：

window.FOO = process.env.FOO; // The necessity to do this seriously limits the utility of webpack.DefinePlugin in my view, but what can you do?

即使您尝试访问process&process.env时可能会undefined它们，该值也会成功分配给window.FOO。

console.log(window.FOO) // outputs: true