webpack 打包傳參 process.env 公司一個專案多個版本的前端架構方案
阿新 • • 發佈:2018-12-10
早上遇到一個問題,專案有至少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