簡單易懂的總結一下“NODE_ENV”相關的幾個技術點
一. 概念 - node下的全局環境process.env
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運行環境下的設置與使用
1. 臨時設置 - 在cmd下的node環境下
window: set NODE_ENV=production
linux: export NODE_ENV=production
2. 永久設置
window:右鍵(此電腦) -> 屬性(R) -> 高級系統設置 -> 環境變量(N)...
linux: vim /etc/profile
3. 常用腳本設置 - 將NODE_ENV=XXXX放到項目package.json的scripts命令中
"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" }
使用:
console.log(process.env.NODE_ENV)
三. webpack打包環境下的設置與使用
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)
