webpack 打包传参 process.env 公司一个项目多个版本的前端架构方案

早上遇到一个问题，项目有至少5个版本，希望通过给打包命令加一个参数就能打包对应版本。

process.env配置生产环境

在/config/目录下有prod.env.js、dev.env.js、test.env.js这三个分别是生产环境、开发环境、测试环境的配置。
在任何文件里都能简单的用下面代码获取到配置

var NODE_ENV = process.env.NODE_ENV;

所以我想到了可以通过配置一个process.env.branch 打包出不同版本

module.exports = {
  NODE_ENV: '"production"',
  BRANCH_ENV:'"base"'
}

cross-env修改生产环境变量

我想要的最终效果是npm run build:base 打包对应版本
cross-env能跨平台地设置及使用环境变量

npm安装

npm i --save-dev cross-env

修改prod.env.js,在配置文件里接收BRANCH_ENV 的值

module.exports = {
  NODE_ENV: '"production"',
  BRANCH: JSON.stringify(process.env.BRANCH_ENV) || '"base"'
}

在npm脚本(多是package.json)里这么配置

{
  "scripts": {
    "build:base": "cross-env BRANCH_ENV=testmybranch webpack --config build/webpack.config.js"
  }
}

运行npm run build:base，这样NODE_ENV便设置成功，无需担心跨平台问题

测试成功方法

在任何页面使用console.log(process.env.BRANCH_ENV) 成功打印出testmybranch