開發環境和生產環境分離的原因

在遊戲陪玩系統開發時，會產生 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 變數，返回當前正在執行的指令碼名稱
這個方法極為簡單。

以上便是“遊戲陪玩系統的業務程式碼如何判斷生產/開發環境？”的全部內容，希望對大家有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理

遊戲陪玩系統開發，業務程式碼判斷生產/開發環境的方式

開發環境和生產環境分離的原因

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

方案二：

相關文章

遊戲陪玩系統開發，業務程式碼判斷生產/開發環境的方式

開發環境和生產環境分離的原因

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

方案二：

相關文章

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