Question

我正在设置ReactJS项目以在运行时更改环境变量。

我有2个ENV变量：

1）NODE_ENV =生产，开发

2）FLAVOR = Alpha，Beta

我想基于FLAVOUR变量加载不同的配置，主题和图像。已经完成并且可以正常工作了。

构建命令：

1）跨环境NODE_ENV = production --env.FLAVOUR = Alpha Webpack

2）跨环境NODE_ENV = production --env.FLAVOUR = Beta Webpack

-

但是上述命令在构建时更改了env变量。但是我只想在构建后的运行时为生产环境更改FLAVOUR变量。

例如./build cross-env --env.FLAVOUR = Alpha节点服务器

例如./build cross-env --env.FLAVOUR =测试版节点服务器

./ build是构建目录，由npm run build命令创建。

-

这意味着当我将FLAVOUR变量更改为Beta并重新启动Web应用程序时我的期望是它将成为Beta应用和主题。这有助于我们扩展这些Web应用程序。可以将它们重新放在一角钱上。

Webpack生产：

new webpack.DefinePlugin({
   'process.env.FLAVOUR': JSON.stringify(process.env.FLAVOUR),
})

Answer 1

我不知道这是否能回答您的问题，但是我已经使用webpack设置了我的项目，如下所示：

  new webpack.EnvironmentPlugin({
      ENV: process.env.ENV || 'development',
      API_BASE: process.env.API_BASE,
    }),

我在API_BASE文件中定义了.env，当我运行yarn start进行开发时，webpack会使用该文件包

开发完成后，我将构建生产docker映像，并且可以在以如下方式运行映像时覆盖环境文件中的API_BASE

docker build -t yourProjectName .
docker run -e API_BASE='http:\/\/yourIPAddress:port/' -p 9000:80 yourProjectName

希望这会有所帮助！

Answer 2

我今天遇到了这个问题，并通过 webpack externals 使 process.env 可用来解决它。

const config = {
  externals: [{ processEnv: 'process.env' }, nodeExternals({})],
}

上面这行告诉 webpack 有一个叫做 processEnv 的依赖，应该通过引用 process.env 来解决。它输出一个小的 commonjs 模块。

// WEBPACK'S BUILD
/***/ "processEnv":
/*!******************************!*\
  !*** external "process.env" ***!
  \******************************/
/***/ ((module) => {

"use strict";
module.exports = process.env;

/***/ }),

在你的代码中，你可以通过这样做来要求这个垫片。

const processEnv = require('processEnv')

我在此处详细记录了该过程https://blog.freemiumpn.com/docs/developer/how-to/web/runtime-configs-with-webpack-and-docker-v2

构建React项目后如何设置节点环境变量（运行时）？

2 个答案: