我刚刚遇到了在我正在查看的前端 React 代码库中使用环境变量的想法。当我在本地运行 React 应用程序时，我可以看到当我 console.log process.env.VALUE 时，这个值将在浏览器控制台中注销。
但是，如果我 console.log(process.env) 我只看到一个空对象。我在 Stack Overflow 上看到了其他答案，但我无法理解。如何访问 process.env 上的属性对我来说没有意义，但我无法注销 process.env。不就是一个包含所有设置的环境变量的对象吗？
如果有人能简单地解释一下，那将不胜感激。谢谢。
【问题讨论】：
console.log(process.env) 注销到控制台但它不是空对象时
标签： javascript reactjs environment-variables
这是因为 React 在构建生产版本时自然会使用 webpack.DefinePlugin。该库基本上使您的process.env 变量本质上是“占位符” - 这意味着所有值都在构建时被替换。这就是为什么process.env 返回{}，而process.env.NODE_ENV 返回正确的例如。
有点离题，但在 Next.js（一个 React 框架）中，所有环境变量也在构建期间被替换（出于安全目的）。这意味着process.env 不是 Next.js 中的普通 JavaScript 对象。在内部，他们也使用webpack.DefinePlugin。
作为答案的补充，浏览器无权访问process.env。 React 基本上被编译为 HTML/CSS/JS——这意味着应用程序只是一个静态站点。 process.env 是一个 Node.js 的东西。
例子：
FOO 的环境变量，其值为BAR，在您构建应用时所需的任何环境中。webpack.DefinePlugin 将您的FOO 转换为process.env.FOO。它实际上是process.env.FOO。编译器不会创建一个名为 process.env 且属性为 FOO 的对象。 从字面上看，process.env.FOO 附加在应用程序的 window 对象中。process.env.FOO 上，并且在运行时它确实存在于您的应用程序中。process.env 对象（它不是并且从来不是对象），这就是它返回一个空对象的原因——它根本就不是一个以 for 开头的对象我在上面解释的原因。参考资料：
【讨论】：
DefinePlugin，process.env 在技术上不是一个对象——process.env.XXX 基本上是一个文字变量/process.env.XXX 的值，而不是一个对象的属性。浏览器中的process.env 没有任何意义，也不会输出任何内容，因为它从一开始就不是对象。
process.env.XXX 字面意思是 process.env.XXX（粗略地说是const process.env.XXX）附加到window 对象上。 process.env 从来都不是 React 应用中的对象。