谈谈 process.env.NODE_ENV

问题描述：项目环境一般会分为开发（dev）、测试（test）、生产（prod）三个环境。三个环境的接口中的 baseURL 地址都会有所区分，当我们将项目打包上线时，这是需要切换 baseURL 地址，例如：

export const config = {
  base_url: 'https://xcx.upal.cn/' // 上线服务器
  base_url: 'http://140.143.134.216:8888/' //测试服务器
}

我们可以配置 package.json 中的脚本，设置 process.env.NODE_ENV 环境变量，通过使用不同的命令，生成不同环境的项目打包文件。

一、process.env.NODE_ENV 介绍

在 node 中，全局变量 process 表示的是当前的 node 进程。process.env 包含着有关系统环境的信息，但是 process.env 中并不存在 NODE_ENV 这个东西。NODE_ENV 是用户一个自定义的变量，在 webpack 中的用途是判断生成环境或开发环境还是测试环境的依据。

二、了解 DefinePlugin

DefinePlugin 允许我们定义一些全局变量，让我们在模块当中直接使用，不用做任何声明。

const { smart } = require('webpack-merge')
module.exports = smart(webpackCommonConf, {
    mode: 'development',
    ......
    plugins: [
        new webpack.DefinePlugin({
            // window.ENV = 'production' or 'development'
            // 'process.env.NODE_ENV': 'development'
            ENV: JSON.stringify('development')
        })
    ]
})

三、理解 cross-env

cross-env 是运行跨平台设置和使用环境变量的脚本。当我们使用 NODE_ENV = production 来设置环境变量的时候，大多数windows命令会提示将会阻塞或者异常，或者windows不支持NODE_ENV=development的这样的设置方式会报错。

 cross-env 能够提供一个设置环境变量的 scripts，使用 cross-env 命令，我们能够以 lunix 方式设置环境变量，同时能够兼容 windows 环境。

首先安装该命令，安装方式如下：

npm install --save-dev cross-env

在 package.json 中 scripts 命令如下：

{
  "scripts": {
    ......
    "build:weapp:dev": "cross-env BUILD_ENV=dev taro build --type weapp",
    "build:weapp:test": "cross-env BUILD_ENV=test taro build --type weapp",
    "build:weapp:prd": "cross-env BUILD_ENV=prd taro build --type weapp"
  },
}

配置 script 下，不同的命令，添加 BUILD_ENV 的值，表示配置不同的环境变量。

module.exports = function(merge) {
  const buildConfig = {
    env: {
      BUILD_ENV: JSON.stringify(process.env.BUILD_ENV)
    }
  };

  return merge(
    {},
    config,
    process.env.NODE_ENV === "development"
      ? require("./dev")
      : require("./prod"),
    buildConfig
  );
};

加载不同环境的配置文件。

// config/dev.js
module.exports = {
  env: {
    NODE_ENV: 'development' 
  }
}
// config/prod.js
module.exports = {
  env: {
    NODE_ENV: 'production' 
  }
}

如何动态添加不同环境的配置信息?

const getBaseUrl = () => {
  let BASE_URL = '';
  if (process.env.BUILD_ENV === "dev" || process.env.BUILD_ENV === "test") { // 开发 测试
    BASE_URL = "http://113.105.121.203:9002";
  } else if (process.env.BUILD_ENV === "prd") { // 生产
    BASE_URL = "https://tms.ap-ec.cn";
  }
  return BASE_URL;
}
export default getBaseUrl;

参考文献：理解webpack之process.env.NODE_ENV详解(十八)