为什么我不能用 Webpack 在我的捆绑代码中记录 `process.env`？

Question

我正在使用Dotenv和DefinePlugin()将这些环境变量添加到我的包中。

webpack.config.js

new Dotenv(),
new webpack.DefinePlugin({
  "process.env.TEST_ENV": JSON.stringify("xxx")
}),

Dotenv加载一个带有一堆环境变量的.env文件。 一切正常。

默认情况下， NODE_ENV根据您在 webpack.config.js 中设置的mode注入webpack.config.js 。

这工作正常，我可以从我编译和捆绑的代码中读取NODE_ENV和TEST_ENV 。

index.js

const { NODE_ENV, TEST_ENV } = process.env;

console.log(`process.env: ${JSON.stringify(process.env)}`);
console.log(`NODE_ENV: ${JSON.stringify(NODE_ENV)}`);
console.log(`TEST_ENV: ${JSON.stringify(TEST_ENV)}`);

如上图所示，我可以从process.env object 成功访问并记录变量NODE_ENV和TEST_ENV 。

但是当我尝试记录process.env本身时，它会记录一个空的 object {} ，您也可以从图片中看到。

这是为什么？ 为什么我不能像使用它的属性NODE_ENV和TEST_ENV那样记录process.env ？

Answer 1

来自： https://webpack.js.org/plugins/define-plugin/

鉴于DefinePlugin直接替换您的代码，当您执行此操作时：

webpack.config.js

new webpack.DefinePlugin({
  "process.env.SOME_VARIABLE": JSON.stringify("SOME_VALUE")
});

你在你的代码中这样称呼它：

index.js

const SOME_VARIABLE = process.env.SOME_VARIABLE;

Webpack 将其转译为：

const SOME_VARIABLE = "SOME_VALUE"

它完全替换了字符串"SOME_VALUE"的process.env.SOME_VARIABLE 。 这也是您需要调用JSON.stringify("SOME_VALUE")的原因。 因为否则你会得到const SOME_VARIABLE = SOME_VALUE ，没有字符串引号，你会得到SOME_VALUE is not defined错误。

这就是您不能在捆绑代码中记录或解构process.env的原因。