業務代碼如何判斷生產/開發環境

開發環境和生產環境分離的緣由

在開發時，會產生 debug 或者是測試的代碼，這些代碼不該該出如今生產環境中。當項目部署時，每每會將代碼進行一系列的壓縮來優化它，如此會完全破壞代碼的可讀性。本地開發每每使用的是本地 mock 的數據，而正是上線後用的是真實數據。以上幾點，開發環境和生產環境必須得分離。

好比我想讓項目根據不一樣的環境登陸不一樣的地址。本地開發登陸的是localhost，測試環境登陸的是test地址，上線環境登陸的是online地址。那麼業務代碼裏如何判斷生產開發測試環境呢？

方案一 將環境變量配置到 package.json

// package.json
{
// npm install cross-env
// 由於mac和windows設置命令環境變量的命令不一致, 因此用cross-env來作兼容
  "script": {
    "dev": "cross-env NODE_ENV=dev webpack --progress --colors",
    "production": "cross-env NODE_ENV=production webpack --progress --colors"
  }
}
// npm run dev // 開發
// npm run production // 生產

那麼 package.json 的 script中的參數, webpack文件中如何讀取呢？
在 webpack 中, 可經過 process.env.NODE_ENV獲取到變量

// webpack 下
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV)
    }
  })
]

爲何須要加上JSON.stringify, 由於webpack 打包的時候對變量作替換會將 process.env.NODE_ENV 替換成 production, 而咱們指望的是 'production'

有個問題，new webpack.DefinePlugin 定義的全局變量是 在編譯時能夠配置的全局常量。,那麼，如何在 webpack config 文件中使用 process.env.NODE_ENV 呢?
就是上面的回答，在腳本中設置變量 而且用上cross-env。 所以常常二者結合使用。

方案二：

使用process.env.npm_lifecycle_event 這個參數來辨別開發環境。
npm 提供一個 npm_lifecycle_event 變量，返回當前正在運行的腳本名稱
這個方法極爲簡單。

npm scripts 使用指南

webpack.DefinePlugin使用介紹