1. 程式人生 > >webpack開發環境和生產環境切換原理

webpack開發環境和生產環境切換原理

在package.json中有如下設定:

"scripts": {
    "dev": "node build/dev-server.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
    "lint": "eslint --ext .js,.vue src"
  },

當執行專案時,cmd中敲命令:npm run dev / npm run build:prod / npm run build:sit / npm run lint,就會執行不同環境下的程式碼,如開發環境、生產環境等等。

其中cross-env是用於跨平臺環境變數配置的工具,支援在window系統、linux系統等多個平臺使用同樣的程式碼配置環境變數;

NODE_ENV=production env_config=prod,這句程式碼的意思是當前執行環境的環境變數,可以通過process.env進行獲取,如process.env.NODE_ENV,process.env.env_config等等,process.env是全域性變數,通過獲取以上兩個值來判斷當天執行的是生產環境還是開發環境。

cross-env能跨平臺地設定及使用環境變數
大多數情況下,在windows平臺下使用類似於: NODE_ENV=production的命令列指令會卡住,windows平臺與POSIX在使用命令列時有許多區別(例如在POSIX,使用$ENV_VAR,在windows,使用%ENV_VAR%。。。)
cross-env讓這一切變得簡單,不同平臺使用唯一指令,無需擔心跨平臺問題
npm安裝方式
npm i --save-dev cross-env
在npm指令碼(多是package.json)裡這麼配置
{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}
執行npm run build,這樣NODE_ENV便設定成功,無需擔心跨平臺問題