Node环境变量设置 #

通常情况下，需要针对不同环境（开发环境、生产环境等），进行相应策略的打包（比如更改接口地址，代码是否压缩等）

由于打包工具如webpack运行在Nodejs 环境中，要识别不同环境，就得配置Nodejs环境变量，并且把它当成判断不同环境的依据

Nodejs 提供了 process.env API，它返回一个包含用户环境信息的对象。当我们给 Nodejs 设置一个环境变量，并且把它挂载在 process.env 对象上，便可以在代码中进行相应的环境判断

于是，经常会看到类似下方的代码：

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  ...
}

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  ...
}

要说明的是，NODE_ENV 这个名称只是开发社区的一种共识，名称内容不是固定的。如果需要，你也可以把它定义为 NODE_XXX

那么问题来了，如何设置这个环境变量呢？总结下来，可通过以下几种方式

在Webpack配置文件直接赋值（不推荐） #

这种方式比较简单粗暴。只需要在Webpack打包配置文件中，直接给 process.env.NODE_ENV 赋值即可

缺点：每次在不同环境下打包时，都要手动反复修改它的值，所以不推荐

webpack.config.js

process.env.NODE_ENV = "production"
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  ...
}

process.env.NODE_ENV = "production"
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  ...
}

命令行（CLI）设置（不推荐） #

Windows 系统 #

Windows 系统下，最常用的命令行面板就是 CMD（Command的简写） 和 Powershell。它们的操作分别如下：

CMD (Command 或 命令提示符) #

# 查看所有环境变量
set

# 查看单个环境变量（以 NODE_ENV 为例）
set NODE_ENV

# 设置单个环境变量（以 NODE_ENV 为例）
set NODE_ENV=production

# 删除单个环境变量（以 NODE_ENV 为例）
set NODE_ENV=

# 查看所有环境变量
set

# 查看单个环境变量（以 NODE_ENV 为例）
set NODE_ENV

# 设置单个环境变量（以 NODE_ENV 为例）
set NODE_ENV=production

# 删除单个环境变量（以 NODE_ENV 为例）
set NODE_ENV=

上面的命令行以 NODE_ENV 变量为例，在 CMD 命令面板的操作中，如果 NODE_ENV 没有设置，则通过 set NODE_ENV 命令查看时，会提示 环境变量 NODE_ENV 没有定义

当设置完 NODE_ENV（假设设置值为 production），再通过 set NODE_ENV 命令查看时，会返回 NODE_ENV=production

上面的环境设置只是临时的，即只针对当前运行窗口的环境有效。当CLI运行窗口关闭以后，相关设置都会丢失

如果你希望设置一直生效（即本地设置），可通过 控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 这样进行设置（windows10可能需要重启）

缺点：只能对本机生效，不适合团队开发，且开发和打包都需要手动配置

配置 package.json（不推荐） #

在项目配置文件 package.json 中，根据不同的打包命令去设置相应的 Nodejs 环境变量，是一种非常主流的做法。其实本质上来说，只是将在命令行面板设置环境变量的命令语句放到了 package.json 文件中，把 设置环境变量和打包两个命令合并运行而已

windows 系统 #

无论是使用 CMD (命令提示符) 还是 Powershell 命令行工具，都可以在 package.json 配置NODE_ENV

注意，NODE_ENV=production&&要去掉空格，不然设置完NODE_ENV 会多个空格，变成"production "

{
  ...
  "scripts": {
    "build": "set NODE_ENV=production&& npm run clean && webpack",
    "clean": "rimraf ./build && mkdirp build",
  }
}

{
  ...
  "scripts": {
    "build": "set NODE_ENV=production&& npm run clean && webpack",
    "clean": "rimraf ./build && mkdirp build",
  }
}

mkdirp 是一个生成文件夹的第三方包，你只需要在命令行面板运行 npm run build 即可完成打包

缺点：不能跨平台

cross-env跨平台（推荐） #

cross-env 是一个跨平台设置环境变量的第三方包，它可以让你只配置一行命令，就能轻松地在多个平台设置环境变量。

首先，只需要在项目中安装

npm install -D cross-env

npm install -D cross-env

然后，在 package.json 文件中进行设置：

// package.json

{
  ...
  "scripts": {
    "build": "npm run clean && cross-env NODE_ENV=production webpack",
    "clean": "rimraf ./build && mkdirp build",
  }
}

// package.json

{
  ...
  "scripts": {
    "build": "npm run clean && cross-env NODE_ENV=production webpack",
    "clean": "rimraf ./build && mkdirp build",
  }
}

这样，不管是windows还是mac，都可以正常设置NODE_ENV