在程序開發(fā)中，涉及到后臺(tái)接口調(diào)用，一般需要根據(jù)環(huán)境不同（ 正式 、 測(cè)試 ），以便于可以調(diào)用不同 API，而不用手動(dòng)修改代碼?？鞈?yīng)用代碼中，如何區(qū)分環(huán)境呢？本篇文章，跟大家一起探討下這個(gè)問題。

答案是，借助 process.env.NODE_ENV 來判斷。下面，對(duì)這一結(jié)論做下說明。

process.env.NODE_ENV

在 node 中，有全局變量 process 表示的是當(dāng)前的 node 進(jìn)程。process.env 包含著關(guān)于系統(tǒng)環(huán)境的信息。但 process.env 中并不存在 NODE_ENV 這個(gè)字段，它是用戶一個(gè)自定義的變量，在 Webpack 中，它的用途是判斷生產(chǎn)環(huán)境或開發(fā)環(huán)境的依據(jù)。

可以進(jìn)入到 node 的 repl 環(huán)境中，執(zhí)行 process.env 命令，查看查 process 的基本信息：

如何設(shè)置環(huán)境變量

如上操作，就可以看到 process 是 node 的全局變量，并且 process 有 env 這個(gè)屬性，沒有 NODE_ENV 這個(gè)屬性。那么在 Web 開發(fā)中，如何設(shè)置呢？如果基于 Webpack 打包，一般性操作，在運(yùn)行命令時(shí)攜帶參數(shù)，具體如下示例：

// package.json
"scripts": {
  "start": "node build/dev-server.js",
  "deploy": "npm run build && node build/deploy.js",
  "build": "cross-env NODE_ENV=production node build/build.js --progress",
  "build:dll": "NODE_ENV=production webpack --config build/webpack.dll.conf.js",
  //......
}

在 Windows 系統(tǒng)，并不能很好支持如上操作；可以借助 cross-env （:twisted_rightwards_arrows: Cross platform setting of environment scripts） 庫來輔助完成。

快應(yīng)用中的 NODE_ENV

快應(yīng)用構(gòu)建工具 —— hap-toolkit ，也是基于 Webpack 所打造。所以，完全可以使用 process.env.NODE_ENV 來判斷環(huán)境。為更好開發(fā)快應(yīng)用，官方提供了 快應(yīng)用開發(fā)工具 ，即 IDE?？鞈?yīng)用 IDE 已經(jīng)幫著集成 hap-toolkit ，像編譯構(gòu)建操作，就無需借助 package.json 中 scripts 來完成。那么快應(yīng)用開發(fā)中該如何設(shè)置 NODE_ENV 呢？

答案是：在快應(yīng)用開發(fā)中 無需設(shè)置 NODE_ENV，直接使用即可。

這是因?yàn)?，?Webpack4 之后，所指定的 mode 值，為 process.env.NODE_ENV 數(shù)據(jù)源。在快應(yīng)用構(gòu)建時(shí)候，IDE 已經(jīng)傳遞對(duì)應(yīng) mode（ production or development ）給到 hap-toolkit （Webpack），因此用戶無需自行設(shè)置。在代碼中，直接使用如下判斷處理即可：

const isProductionEnv = process.env.NODE_ENV !== 'production'
if (isProductionEnv) {
  // do something
}

// quickapp.config.js
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports = {
  cli: {
    devtool: 'none'
  },
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        ENV_TYPE: process.env.NODE_ENV
      }),
      new HardSourceWebpackPlugin({
        environmentHash: {
          root: __dirname,
          directories: [],
          files: ['package-lock.json']
        },
        cachePrune: {
          // 緩存的存在時(shí)間，默認(rèn)為兩天
          maxAge: 2 * 24 * 60 * 60 * 1000,
          // 緩存的最大容量，默認(rèn)為 50 MB
          sizeThreshold: 50 * 1024 * 1024
        }
      })
    ]
  }
}