深入探究process.env.NODE_ENV如何区分环境

公众号：程序员白特，欢迎一起学习交流~

通常我们在开发中需要区分当前代码的运行环境是dev、test、prod环境，以便我们进行相对应的项目配置，比如是否开启sourceMap，api地址切换等。
而我们区分环境一般都是通过process.env.NODE_ENV，那么为什么process.env.NODE_ENV可以区分环境呢？是我们给他配置的，还是他可以自动识别呢？

什么是process.env.NODE_ENV

process.env属性返回一个包含用户环境信息的对象。

在node环境中，当我们打印process.env时，发现它并没有NODE_ENV这一个属性。实际上，process.env.NODE_ENV是在package.json的scripts命令中注入的，也就是NODE_ENV并不是node自带的，而是由用户定义的，至于为什么叫NODE_ENV，应该是约定成俗的吧。

通过package.json来设置node环境中的环境变量

如下为在package.json文件的script命令中设置一个变量NODE_ENV。

{
 "scripts": {
   "dev": "NODE_ENV=development webpack --config webpack.dev.config.js"
 }
}

执行对应的webpack.config.js文件

// webpack.config.js
console.log("【process.env】", process.env.AAA);

但是在index.jsx中也就是浏览器环境下的文件中打印process.env就会报错，如下：

可以看到NODE_ENV被赋值为development，当执行npm run dev时，我们就可以在 webpack.dev.config.js脚本中以及它所引入的脚本中访问到process.env.NODE_ENV，而无法在其它脚本中访问。原因就是前文提到的peocess.env是Node环境的属性，浏览器环境中index.js文件不能够获取到。

使用`webpack.DefinePlugin`插件在业务代码中注入环境变量

这个时候我们就存在一个解决方法，通过webpack中的DefinePlugin来设置一个全局变量，这样所有的打包的js文件都可以访问到这个全局变量了。

const webpack = require('webpack');
module.exports = {
 plugins: [
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': 'development'
   })
 ]
}

使用DefinePlugin注意点 webpack.definePlugins本质上是打包过程中的字符串替换，比如我们刚才定义的__WEBPACK__ENV:JSON.stringify('packages')。在打包过程中，如果我们代码中使用到了__WEPBACK__ENV，webpack会将它的值替换成为对应definePlugins中定义的值，本质上就是匹配字符串替换，并不是传统意义上的环境变量process注入。如下图所示：

// webpack.config.js
new webpack.DefinePlugin({
  _WEBPACK_ENV: JSONstringify('packages'),
  Tw0: '1+1',
});
// 打包后的代码 这里我们关闭了devtools 罗列出打包后打包后的代码
console.log('hello， Environment variable'， 'packages');

// webpack.config.js
new webpack.DefinePlugin({
  _WEBPACK_ENV: 'packages',
  Tw0: '1+1',
});
//打包后的代码 这里我们关闭了devtools 罗列出打包后打包后的代码
console.log('hello， Environment variable', packages);