在构建 React.js 上设置环境变量答案

【问题标题】：set environment variable on build React.js在构建 React.js 上设置环境变量
【发布时间】：2020-07-08 15:07:19
【问题描述】：

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

【问题讨论】：

你可以在你的 webpack 配置中使用这个：new webpack.DefinePlugin({ "YOUR_VARIABLE": JSON.stringify("value of your variable") })

标签： node.js reactjs environment-variables environment

【解决方案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 run build:prototype

希望对你有帮助

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

【讨论】：

【解决方案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

【讨论】：