技术上讲，
NODE_ENV是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于确定在开发环境还是生产环境(dev-vs-prod)下，服务器工具、构建脚本和客户端 library 的行为。
NODE_ENV会赋值给process.env对象，作为它的一个属性,其值通常为“production”（生产环境）和“development”（开发环境），或者“prod”和“dev”，以此来区分不同环境下的逻辑行为，例如：
if(process.env.NODE_ENV === 'development'){
//开发环境 do something
}else{
//生产环境 do something
}
实际上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",
"_"
]
然而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"
},
说明：
NODE_ENV=development在windows环境下会报错，需要改为set NODE_ENV=production，为了解决这个差异，可以使用cross-env跨平台的设置和使用环境变量,这里就不解释具体使用方法了。
这样，就可以在webpack.config.js中使用process.env.NODE_ENV了，但是不能在webpack.config.js引入的模块中使用，要想在模块当中直接使用，我们还需要一些配置。
webpack4之前可以使用DefinePlugin插件配置
// webpack.config.js
const 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)
})
]
};
webpack4版本之后可以通过mode选项实现
module.exports = {
// 定义环境变量
mode: 'development',
// JavaScript 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
};
这里有个需要注意的点：
通过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里区分环境配置不同插件。
请查看 #2537
网友评论