簡單易懂的總結一下「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)