探究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);
由上图可知:仔细对比这两段代码第一个问题的答案其实已经很明了了,针对definePlugin
这个插件我们使用它定义key:value
全局变量时,他会将value
进行会直接替换文本。所以我们通常使用JSON.stringify('pacakges')
或者'packages'
。