为什么 process.env 对象为空但我可以访问它的属性？

Question

我刚刚遇到了在我正在查看的前端 React 代码库中使用环境变量的想法。 当我在本地运行 React 应用程序时，我可以看到当我 console.log process.env.VALUE 时，这个值将在浏览器控制台中注销。

但是，如果我console.log(process.env)我只看到一个空对象。 我在 Stack Overflow 上看到了其他答案，但我无法理解。 如何访问 process.env 上的属性对我来说没有意义，但我无法将 process.env 记录下来。 它不只是一个包含所有设置的环境变量的对象吗？

如果有人可以简单地解释这一点，那将不胜感激。 谢谢。

Answer 1

这样做的原因是因为 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 。
• 您编译应用程序，React 使用webpack.DefinePlugin将您的FOO转换为process.env.FOO 。 它实际上是process.env.FOO 。 编译器不会创建一个名为process.env具有属性FOO的对象。 从字面上看， process.env.FOO附加在您的应用程序的window对象中。
• 您假设它在process.env.FOO ，并且在运行时它确实存在于您的应用程序中。
• 自编译开始以来，您错误地尝试访问process.env对象（它不是也从未是对象），这就是它返回一个空对象的原因——它根本就不是一个开始的对象，原因是我在上面已经解释过了。

参考：

• 通过 Webpack 定义插件
• React.js 环境变量
• Next.js 环境变量