简单易懂的总结一下“NODE_ENV”相关的几个技术点前端
一. 概念 - node下的全局环境process.envnode
node中有全局变量process表示当前node进程,process.env包含着关于系统环境的信息。可是process.env中并不存在NODE_ENV这个东西。其实NODE_ENV只是一个用户自定义的变量,可是这个NODE_ENV变量语义很是恰当,而且在前端工程化配置中做为判断生产环境/开发环境的依据是很是天然而方便的事情,于是在前端工程化中逐渐成为一个事实规范。当咱们在服务启动时配置NODE_ENV,或在代码中给process.env.NODE_ENV赋值,js便能经过process.env.NODE_ENV获取信息。linux
二. node运行环境下的设置与使用webpack
1. 临时设置 - 在cmd下的node环境下web
window: set NODE_ENV=production
linux: export NODE_ENV=production
2. 永久设置json
window:右键(此电脑) -> 属性(R) -> 高级系统设置 -> 环境变量(N)...
linux: vim /etc/profile
3. 经常使用脚本设置 - 将NODE_ENV=XXXX放到项目package.json的scripts命令中vim
"scripts": { "build-win": "SET NODE_ENV=production && webpack --config build/webpack.config.js", "build-linux": "EXPORT NODE_ENV=production && webpack --config build/webpack.config.js",
"build-mac": "NODE_ENV=production node build/dev-server.js"
}
4. 经常使用脚本设置 - 跨平台方案,第三方插件cross-env前端工程化
"scripts": { "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" }
使用:ui
console.log(process.env.NODE_ENV)
三. webpack打包环境下的设置与使用spa
DefinePlugin容许咱们建立全局变量,能够在编译时进行设置,所以咱们能够使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin的基本功能。
所以咱们能够在webpack.config.js 中添加以下代码配置全局变量信息了,由于当webpack进行编译的时候会全局设置变量;以下代码:
module.exports = { plugins: [ // 设置环境变量信息 new webpack.DefinePlugin({ AA: 'aa', BB: 'bb',
'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) } }) ] }
这样使用时就与node运行环境下同样了:
console.log(process.env.NODE_ENV)