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上设置环境变量

2 个答案: