create-react-app应用如何增加webpack环境常量

2021年03月29日Web前端0

我们经常使用create-react-app脚手架来快速生成React的项目。通过使用npm run eject来暴露webpack的配置，并手动的编辑这些配置。

问题

由于在测试环境和生产环境需要做区分，而webpack自带的mode属性已经不能达到目的了，所以我们要扩展下常量。

解决方法

我们通过webpack.DefinePlugin插件去设置这些变量，首先去config/webpack.config.js下搜索该插件，发现有使用，代码中是：

new webpack.DefinePlugin(env.stringified)

断点查看，env.stringified是什么，如图：

这些个是process.env下常见的一些常量。我们的目标是向他追加常量。根据变量层级依次拆开，如下，我们向process.env下增加了GROUP变量。

注：JSON.stringify不能丢，不然会出问题。

new webpack.DefinePlugin({
  'process.env': {
    ...(env.stringified['process.env']),
    GROUP: JSON.stringify(process.env.GROUP)
  }
})

接下来，只要在命令行或者scripts中增加GROUP值就可以了。

"build:test": "GROUP=test node scripts/build.js",
"build": "GROUP=online node scripts/build.js",

这样，test环境和线上环境就可以区分了。

if (process.env.GROUP === 'test') {
  // ...
}
webpack

目录