在搭建前端工程项目的时候,在package.json的scripts命令内容和webpack配置文件中可以看到NODE_ENV这个变量,它的值可以是development或product,也有人简写为'dev'或'prod'。
1.这个变量有什么用?
顾名思义,这个变量表示构建项目的当前环境,也就是我们的程序会跑在生产环境、测试环境还是开发环境,在webpack配置中我们会根据不同环境作出不同的配置。
2.在哪里设置?
我们知道,node中有全局变量process表示当前node进程,process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。其实NODE_ENV只是一个用户自定义的变量,但是这个NODE_ENV变量语义非常恰当,并且在前端工程化配置中作为判断生产环境/开发环境的依据是非常自然而方便的事情,因而在前端工程化中逐渐成为一个事实规范。当我们在服务启动时配置NODE_ENV,或在代码中给process.env.NODE_ENV赋值,js便能通过process.env.NODE_ENV获取信息。
那么,这个变量的赋值在哪里设置呢?很多开发者将NODE_ENV=XXXX放到项目package.json的scripts命令中:
"scripts": {
"build-win": "SET NODE_ENV=production && webpack --config build/webpack.config.js",
"build": "EXPORT NODE_ENV=production && webpack --config build/webpack.config.js"
}
也有人会在webpack配置文件中对NODE_ENV作默认值处理,如果scripts.build||script.start脚本没有设置NODE_ENV,缺省值为'development'.
//...
NODE_ENV: process.env.NODE_ENV || 'development',
//...
3.不同平台下的设置区别?
在类unix系统和安装并使用了bash的windows的系统上,我们会使用:
"EXPORT NODE_ENV=production && webpack --config build/webpack.config.js"
在windows系统上,我们使用:
"SET NODE_ENV=production && webpack --config build/webpack.config.js"
有的人嫌麻烦,为了屏蔽两种系统间的这个区别,会引用第三方插件cross-env
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
}
}
只要在NODE_ENV前面加上cross-env标志,会根据当前系统类型帮你选择适当的指令给NODE_ENV赋值。