webpack 之 process.env.NODE_ENV 详解

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

为了查看 process的基本信息，咱们能够进入到 node 的repl 环境中，而后执行 process.env 命令，查看相关信息

C:\Users\Administrator> node
> process.env
{ ALLUSERSPROFILE: 'C:\\ProgramData',
  APPDATA: 'C:\\Users\\Administrator\\AppData\\Roaming',
  AWE_DIR:
   'C:\\Program Files (x86)\\Khrona LLC\\Awesomium SDK\\1.6.6\\'
   //...............
}
复制代码

如上就能够看到 process是node的全局变量，而且process有env这个属性，可是没有NODE_ENV这个属性。

process.env 属性返回的是一个包含用户环境信息的对象，它能够区分开发环境或正式环境的依据，那么咱们如何配置环境变量呢？

如何配置环境变量？

直接在cmd环境配置便可，查看环境变量，添加环境变量，删除环境变量等操做。

windows环境配置以下：

// #node中经常使用的到的环境变量是NODE_ENV，首先查看是否存在 
set NODE_ENV 

//#若是不存在则添加环境变量 
set NODE_ENV=production 

//#环境变量追加值 set 变量名=%变量名%;变量内容 
set path=%path%;C:\devs;C:\tools\bin 

//#某些时候须要删除环境变量 
set NODE_ENV=

复制代码

实操

// 1. 设置环境变量
C:\Users\Administrator>set NODE_ENV=development // 2. 启动 node 的 repl 环境，查看 process.env.NODE_ENV 的值 C:\Users\Administrator>node > process.env.NODE_ENV 'development' > 复制代码

注意：若是咱们在命令行中设置环境变量后，好比设置 production 后，以下设置： set NODE_ENV=production ，那么会在全部的项目下都是正式环境，当咱们使用命令 npm install 后下载依赖包时，只会把 package.json中的 dependencies 依赖项下载下来，对于 devDependencies 中的依赖包是下载不下来的。

所以咱们须要使用上面的命令 set NODE_ENV 删除刚刚设置的环境变量。

理解 DefinePlugin 含义

官网: webpack.js.org/plugins/def…

官网解释的是：DefinePlugin容许咱们建立全局变量，能够在编译时进行设置，所以咱们可使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin 的基本功能。

所以咱们能够在 webpack.config.js 中添加以下代码配置全局变量信息了，由于当webpack进行编译的时候会全局设置变量；以下代码：

module.exports = {
  plugins: [
    // 设置环境变量信息
    new webpack.DefinePlugin({
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('1.1.0'),
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
}
复制代码

package.json 打包配置以下命令：

"scripts": {
  "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
}

复制代码

这样配置完成后，为了验证一下是不是全局变量，运行 npm run dev 打包后，咱们能够在咱们项目中入口js文件，打印下便可：好比以下代码：

console.log('Running App version ' + VERSION); // 打印 Running App version 1.1.0
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: undefined }

复制代码

如上信息能够看到 process.env.NODE_ENV 打印出为 undefined，那是由于咱们在 package.json 文件中未进行配置。下面咱们把 package.json 加上 NODE_ENV 变量值，代码打包命令变成以下：

"scripts": {
  "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
}

复制代码

如上打包命令，在dev打包命令上，前面加上了 NODE_ENV=development 命令，在build打包命令上前面加上了 NODE_ENV=production，所以继续查看代码结果变为以下：

console.log(process.env); // 打印 { NODE_ENV: 'development' }

复制代码

能够看到这个时候 process.env.NODE_ENV 才有值，所以在项目打包中，为了区分开发环境和正式环境咱们像如上配置便可，而后在 webpack.config.js 中经过 process.env.NODE_ENV 这个来区分正式环境仍是开发环境便可。

理解 cross-env

什么是cross-env呢？

它是运行跨平台设置和使用环境变量的脚本。

它的做用是啥？

当咱们使用 NODE_ENV = production 来设置环境变量的时候，大多数windows命令会提示将会阻塞或者异常，或者，windows不支持NODE_ENV=development的这样的设置方式，会报错。所以 cross-env 出现了。咱们就可使用 cross-env命令，这样咱们就没必要担忧平台设置或使用环境变量了。也就是说 cross-env 可以提供一个设置环境变量的scripts，这样咱们就可以以unix方式设置环境变量，然而在windows上也可以兼容的。

要使用该命令的话，咱们首先须要在咱们的项目中进行安装该命令，安装方式以下：

npm install --save-dev cross-env

复制代码

而后在package.json中的scripts命令以下以下：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
}

复制代码