客户端 ReactJS 上的 process.env

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;

或类似的东西。