reactjs - 如何在 npm 脚本中使用自定义 env(.env.production.abc) 文件

Question

我对多个项目使用相同的代码，根据环境文件值，它为项目提供不同的功能。

我已经添加了：

"scripts":{
  "abc": "npm-run-all -p watch-css start-js"
  "xyz": "npm-run-all -p watch-css start-js"
}

所以我想做如果我运行npm run abc它应该采取.env.production.abc，如果我运行命令npm run xyz它应该采取.env.production.xyz。

可能吗？

Answer 1

您需要在 webpack 配置中使用 DefinePlugin。

在你的webpack.config.js

module.exports = {
    .......
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
    .......
}

现在你在NODE_ENV这里有了变量。

您需要针对您在 中提供的值创建相同的文件名NODE_ENV。

例子：

在你的package.json

"abc": "NODE_ENV=staging npm-run-all -p watch-css start-js"
"xyz": "NODE_ENV=production npm-run-all -p watch-css start-js"

现在你应该有

staging.js和production.js文件存在。

Answer 2

尝试以下更改。在你的项目中安装dotenv

"scripts":{
  "abc": "npm-run-all -p watch-css -r dotenv/config start.js dotenv_config_path=/path/to/abc/env"
  "xyz": "npm-run-all -p watch-css -r dotenv/config start.js dotenv_config_path=/path/to/xyz/env"
} 

Answer 3

这个模块做到了：自定义环境

Answer 4

我们可以使用 npm 包，env-cmd或者react-app-env可以帮助我们处理这些类型的场景。