1. 程式人生 > >webpack 打包傳參 process.env 公司一個專案多個版本的前端架構方案

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