為什么我不能用 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的原因。