webpack process.env.NODE_ENV配置详解：DefinePlugin与cross-env实战

process.env与NODE_ENV基础概念

在Node.js环境中，全局变量process代表当前运行的Node进程。process.env属性存储了系统环境的相关信息。需要注意的是，process.env中默认并不包含NODE_ENV这一变量。NODE_ENV是一个用户自定义的变量，在webpack构建工具中，它被用作区分开发环境和生产环境的重要依据。

为了查看process的基本信息，可以在项目文件夹中新建一个名为process.js的文件，并在其中添加代码：console.log(process)。随后进入该文件夹，在命令行执行node process.js，即可打印出如下信息：


$ node process.js
process {
 title: 'node',
 version: 'v4.4.4',
 moduleLoadList: 
  [....],
 versions: 
  { http_parser: '2.5.2',
   node: '4.4.4',
   v8: '4.5.103.35',
   uv: '1.8.0',
   zlib: '1.2.8',
   ares: '1.10.1-DEV',
   icu: '56.1',
   modules: '46',
   openssl: '1.0.2h' },
 arch: 'x64',
 platform: 'darwin',
 release: 
  { name: 'node',
   lts: 'Argon',
   sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
   headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
 argv: 
  [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
   '/Users/tugenhua/个人demo/process.js' ],
 execArgv: [],
 env: 
  { TERM_PROGRAM: 'Apple_Terminal',
   SHELL: '/bin/zsh',
   TERM: 'xterm-256color',
   TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
   Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
   TERM_PROGRAM_VERSION: '404',
   TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
   USER: 'tugenhua',
   SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
   PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
   PWD: '/Users/tugenhua/个人demo',
   LANG: 'zh_CN.UTF-8',
   XPC_FLAGS: '0x0',
   XPC_SERVICE_NAME: '0',
   SHLVL: '1',
   HOME: '/Users/tugenhua',
   LOGNAME: 'tugenhua',
   SECURITYSESSIONID: '186a8',
   OLDPWD: '/Users/tugenhua/工作文档/sns_pc',
   ZSH: '/Users/tugenhua/.oh-my-zsh',
   PAGER: 'less',
   LESS: '-R',
   LC_CTYPE: 'zh_CN.UTF-8',
   LSCOLORS: 'Gxfxcxdxbxegedabagacad',
   NVM_DIR: '/Users/tugenhua/.nvm',
   NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
   NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
   NVM_RC_VERSION: '',
   MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
   NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
   NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
   _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
   __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
 pid: 14034,
 features: 
  { debug: false,
   uv: true,
   ipv6: true,
   tls_npn: true,
   tls_sni: true,
   tls_ocsp: true,
   tls: true },
 _needImmediateCallback: false,
 config: {},
 nextTick: [Function: nextTick],
 _tickCallback: [Function: _tickCallback],
 _tickDomainCallback: [Function: _tickDomainCallback],
 stdout: [Getter],
 stderr: [Getter],
 stdin: [Getter],
 openStdin: [Function],
 exit: [Function],
 kill: [Function],
 mainModule: 
  Module {
   id: '.',
   exports: {},
   parent: null,
   filename: '/Users/tugenhua/个人demo/process.js',
   loaded: false,
   children: [],
   paths: 
   [ '/Users/tugenhua/个人demo/node_modules',
    '/Users/tugenhua/node_modules',
    '/Users/node_modules',
    '/node_modules' ] } }

从上述输出可以看到，process是Node.js的全局变量，它拥有env属性，但该属性中并不存在NODE_ENV。

process.env属性返回一个包含用户环境信息的对象，它可以作为区分开发环境或正式环境的依据。那么，我们该如何配置环境变量呢？

环境变量的命令行配置方法

一. 如何配置环境变量：

可以直接在cmd命令行环境中进行配置，包括查看、添加或删除环境变量等操作。

1.1 Windows环境配置如下：


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

#如果不存在则添加环境变量 
set NODE_ENV=production 

#环境变量追加值 set 变量名=%变量名%;变量内容 
set path=%path%;C:\web;C:\Tools 

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

1.2 Linux配置（mac系统环境也属于此类）


#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
echo $NODE_ENV

#如果不存在则添加环境变量
export NODE_ENV=production

#环境变量追加值
export path=$path:/home/download:/usr/local/

#某些时候需要删除环境变量
unset NODE_ENV

#某些时候需要显示所有的环境变量
env

以下展示了查看、添加和删除环境变量的具体操作：

process.env与NODE_ENV基础概念

显示所有环境变量，如下图所示

process.env与NODE_ENV基础概念

注意：如果在命令行中设置了环境变量，例如设置production，执行命令： export NODE_ENV=production 这会导致所有项目都处于正式环境。当使用npm install命令下载依赖包时，只会下载package.json中dependencies下的依赖项，而devDependencies中的依赖包不会被下载。因此，我们需要使用上述命令unset NODE_ENV来删除刚才设置的环境变量。

使用DefinePlugin注入全局变量

二：理解 DefinePlugin 含义

官网链接（https://webpack.js.org/plugins/define-plugin/）

官网解释指出：DefinePlugin允许我们创建全局变量，这些变量可以在编译时进行设置。因此，我们可以利用该属性来设置全局变量，从而区分开发环境和正式环境。这就是DefinePlugin的基本功能。

因此，我们可以在webpack.config.js中添加如下代码来配置全局变量信息，因为当webpack进行编译时会全局设置变量；代码如下：


module.exports = {
 plugins: [
  // 设置环境变量信息
  new webpack.DefinePlugin({
   PRODUCTION: JSON.stringify(true),
   VERSION: JSON.stringify('5fa3b9'),
   BROWSER_SUPPORTS_HTML5: true,
   TWO: '1+1',
   'typeof window': JSON.stringify('object'),
   '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 5fa3b9
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('Running App version ' + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印 { NODE_ENV: 'development' }

可以看到这个时候process.env.NODE_ENV才有值，因此在项目打包中，为了区分开发环境和正式环境，我们可以像如上配置那样操作，然后在webpack.config.js中通过process.env.NODE_ENV来区分正式环境还是开发环境即可。

cross-env解决跨平台兼容性问题

三：理解 cross-env

1. 什么是cross-env呢？它是运行跨平台设置和使用环境变量的脚本。

2. 它的作用是啥？

当我们使用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"
}

以上就是深入理解webpack process.env.NODE_ENV配置的详细内容，更多关于webpack process.env.NODE_ENV配置的资料请关注本站其它相关文章！

深入理解webpack process.env.NODE_ENV配置

process.env与NODE_ENV基础概念

环境变量的命令行配置方法

使用DefinePlugin注入全局变量

cross-env解决跨平台兼容性问题

实用工具推荐