NODE_ENV
是一个由 .js 定制开发暴露给执行脚本的系统环境变量。定制开发通常用于确定在开发环定制开发境还是生产环境(dev-vs-prod)下,定制开发服务器工具、定制开发构建脚本和客户端 library 的行为。
NODE_ENV会赋值给process.env
对象,定制开发作为它的一个属性,定制开发其值通常为“production”(生产环境)和“development”(开发环境),或者“prod”和“dev”,定制开发以此来区分不同环境下的逻辑行为,例如:
if(process.env.NODE_ENV === 'development'){ //开发环境 do something}else{ //生产环境 do something}
- 1
- 2
- 3
- 4
- 5
实际上process.env
对象是不存在这个属性的,打印Object.keys(process.env)
可知:
[ "TERM_SESSION_ID", "SSH_AUTH_SOCK", "Apple_PubSub_Socket_Render", "COLORFGBG", "ITERM_PROFILE", "XPC_FLAGS", "PWD", "SHELL", "LC_CTYPE", "TERM_PROGRAM_VERSION", "TERM_PROGRAM", "PATH", "COLORTERM", "TERM", "HOME", "TMPDIR", "USER", "XPC_SERVICE_NAME", "LOGNAME", "__CF_USER_TEXT_ENCODING", "ITERM_SESSION_ID", "SHLVL", "OLDPWD", "ZSH", "ANDROID_SDK_ROOT", "ANDROID_HOME", "PAGER", "LESS", "LSCOLORS", "NVM_DIR", "NVM_CD_FLAGS", "NVM_BIN", "PUB_HOSTED_URL", "FLUTTER_STORAGE_BASE_URL", "_"]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
然而process.env.NODE_ENV
可用,是前端工程化过程中大家约定俗成的做法,尤其是webpack构建前端工程时,会经常使用。那这个属性是什么时候赋值给process.env
的呢?
以webpack的工程为例,通常是运行脚本时来做这件事,例如package.json中的脚本:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "NODE_ENV=development webpack --watch ", "build": "NODE_ENV=development webpack --mode=production"},
- 1
- 2
- 3
- 4
- 5
说明:NODE_ENV=development
在windows环境下会报错,需要改为set NODE_ENV=production
,为了解决这个差异,可以使用cross-env
跨平台的设置和使用环境变量,这里就不解释具体使用方法了。
这样,就可以在webpack.config.js中使用process.env.NODE_ENV
了,但是不能在webpack.config.js引入的模块中使用,要想在模块当中直接使用,我们还需要一些配置。
webpack4之前可以使用DefinePlugin插件配置
// webpack.config.jsconst webpack = require('webpack');module.exports = { entry: { app: './src/app' }, output: { path: 'dist', filename: 'bundle.js' }, plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }) ]};
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
webpack4版本之后可以通过mode选项实现
module.exports = { // 定义环境变量 mode: 'development', // JavaScript 执行入口文件 entry: './main.js', output: { // 把所有依赖的模块合并输出到一个 bundle.js 文件 filename: 'bundle.js', // 输出文件都放到 dist 目录下 path: path.resolve(__dirname, './dist'), }, };
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
这里有个需要注意的点:
通过npm script 定义的NODE_ENV
和 通过DefinePlugin、mode选项定义的NODE_ENV
是两个相互独立的存在,NODE_ENV=development
这种方式定义的NODE_ENV
只能在当前脚本中生效,是个runtime(运行时)。假如webpack.config.js的mode设置为production,脚本中执行NODE_ENV=development
,那么在模块中NODE_ENV
的值为production,而配置文件webpack.config.js中的NODE_ENV
值为development。
如果没有在脚本中设置环境变量,只设置了mode,在webpack的配置文件中读取process.env.NODE_ENV为undefined
,因此,例如
process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'
这样的条件语句,在 webpack 配置文件中,无法按照预期运行。
上面的话可能不好理解,总结起来就是,DefinePlugin和mode选项定义的
NODE_ENV
作用于webpack入口文件下的业务代码,通常为src文件夹下的代码, 而 npm脚本里的设置多用于配置相关,例如在webpack.config.js里区分环境配置不同插件