在构建时设置环境变量 React.js

Question

我正在尝试使用 React 构建自定义环境变量，默认情况下它设置为生产，但我正在尝试使用自定义变量构建自定义 QA。 Ps：项目被弹出，无论如何我可以设法做到这一点而不会弄乱我的 webpack 配置。

Answer 1

我是这样做的（我使用的是 react-scripts）：

在 package.json 我有那些脚本 :

"build:prototype": "env-cmd -f ./.env.prototype npm run-script build",
"build:demo": "env-cmd -f ./.env.demo npm run-script build",
"build:local": "env-cmd -f ./.env.local npm run-script build",
"build:production": "env-cmd -f .env.production npm run-script build",

我像其他人一样称呼它们：例如 npm 运行 build:prototype

希望对您有所帮助

编辑：当然我在项目的根目录下有那些 .env 文件

Answer 2

使用webpack的Define Plugin

new webpack.DefinePlugin({
  "CUSTOM_VARIABLE": JSON.stringify("whatever you want to set it to")
})

无论您需要更改应用中的某些内容，都可以检查 process.env.CUSTOM_VARIABLE 的值并根据其值进行操作。如果只有少数几个地方依赖于这个变量，这会很好地工作。如果有更多，可能值得研究其他方法，例如 React 的 Context Hook API

在构建时设置环境变量 React.js

set environment variable on build React.js

node.js

reactjs

environment-variables

environment