ReactJS:在部署时替换 webpack 环境变量的策略 [英] ReactJS: Strategy to replace webpack environment variable at deploy time

问题描述

目前在构建我们的 React 应用程序时，我们像这样使用 Webpack

Currently when building our react application, we are using Webpack like so

new webpack.DefinePlugin({
  'process.env': {
    REACT_APP_BASE_URL: JSON.stringify(process.env.REACT_APP_BASE_URL),
    ... 20 more lines,

因此，这些参数在构建时提供，react 应用程序构建为静态文件，然后与我们完全控制的 nginx 一起提供

So, these parameters are supplied at build time, the react application is built to static file and then served with an nginx that we have full control

在整个应用程序中，我们使用 process.env.REACT_APP_BASE_URL 和另外 20 个 process.env.x 变量.

Through out the application, we use process.env.REACT_APP_BASE_URL and those 20 more process.env.x variables.

以前，对于每个运行时环境，我们都需要再次构建应用程序并在构建时提供相应的参数.现在我们尝试构建一次并在部署时插入这些参数.

Previously, for each runtime environment, we need to build the application again and provide respective parameters at build time. Now we are trying to build once and insert these parameters at deploy time.

我的问题是在部署时提供这些变量的最可行方法是什么，同时对我们当前的源代码的影响/更改最小?

My question is what is the most feasible way to provide those variable at deploy time with the least impact/change to our current source code?

推荐答案

制作不同的 .env 文件，如 .env.production, .env.qa 并在 package.js 的脚本中使用它 在此处输入链接描述

make different .env file like .env.production, .env.qa and user it in script of package.js enter link description here

这篇关于ReactJS:在部署时替换 webpack 环境变量的策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！