process.env对客户端reactjs

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.-使用cookie或localstorage，如果您只想保存信息，则可以使用本地或会话存储(这取决于您期望的行为(，甚至如果您想从服务器访问cookie。P>

3.-我的首选，使用redux，然后您可以创建一个global还原器，并包含您需要的所有信息，您将必须访问状态以获取此信息，但是也许这会给过度杀伤。

最后，您必须分析最适合自己的方法。

Answer 3

使用webpack.defineplugin是个好主意，但是在我尝试之前，我偶然发现了一个简单的解决方案。我希望客户在Env是"开发"的情况下，在Localhost上拨打电话。如果Env是"生产"，请致电公共IP(由AWS提供(。我已经在使用dotenv，但是由于某种原因，我无法使其适合我的客户。我在package.json中写了一个新脚本：

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

，然后我在我的EC2实例中添加了一个.env文件，并具有"生产"的Node_env值。并运行" npm运行构建生产"。因此，现在在我的客户端，无论我在何处使用process.env.node_env''，它将正确地指"生产"。并致电正确的IP地址。