Question

我理解process.env只能在服务器端工作，我想在客户端使用相同的概念，因为我的应用程序部署在aws s3上，我知道我们可以在webpack中将变量放在process.env中我怎么能在客户端做同样的事情？

Answer 1

您可以使用webpack.DefinePlugin将变量放入process.env。下面是React最常见的例子：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': '"production"'
    }
  })
]

还不够吗？

我已创建此示例以证明其有效：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
    entry: './index.js',
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': '"production"'
            }
        })
    ]
};

// index.js
console.log(process.env);

console.log(process.env.NODE_ENV);

，此配置的输出文件如下：

// ... some internal webpack init function ... 
([function(e,n){console.log(Object({NODE_ENV:"production"})),console.log("production")}]);

您可能会注意到，值已正确替换。

如果你需要这个变量，你可以做一些初始化，如：

global.myVar = process.env.NODE_ENV;

或类似的东西。

Answer 2

如果你正在使用reactJs，并且你想拥有这个global environment variable，你有一些选择：

1.-创建全局变量：不是我的首选，但一切都取决于你真正需要什么，如果是全球性的东西需要从任何地方访问你可以只是：

window.process = {
   env: 'DEV',
   ....otherStuffs
}

2.-使用cookies或localstorage，如果您只想保存信息，可以使用本地或会话存储（一切都取决于您期望的行为），如果您想从服务器访问，甚至可以使用cookie。

3.-我的首选，使用redux然后你可以创建一个global减速器并包含你需要的所有信息，你必须访问该状态才能获得这些信息，但是也许这太过分了。

最后，你必须分析哪种方法最适合你。

Answer 3

使用 webpack.DefinePlugin 是个好主意，但在我尝试之前，我偶然发现了一个简单的解决方案。我希望客户端在 localhost 上调用我的服务器，如果 env 是“开发”，并且如果 env 是“生产”，则调用公共 IP（由 AWS 提供）。我已经在使用 dotenv 但由于某种原因，我无法让它为我的客户工作。我在 package.json 中写了一个新脚本：

"build-prod": "webpack --mode production"

然后我将一个 .env 文件添加到我的 EC2 实例，其 NODE_ENV 值为“production”并运行“npm run build-prod”。所以现在在我的客户端，无论我在哪里使用“process.env.NODE_ENV”，它都会正确地引用“生产”并调用正确的 IP 地址。

客户端ReactJS

3 个答案: