做的項目多了他嚷，就接觸到很多種process.env的設(shè)置方式墓赴，有時候難免會有些迷糊钉赁，這里做些總結(jié)
準備工作
環(huán)境變量是一些我們不想在代碼里處理的變量丹允，它可以讓我們寫的代碼與它所運行的環(huán)境聯(lián)系起來郭厌。我們工作中常常都會用到環(huán)境變量，但是很多時候我們用的并不是那么的得心應(yīng)手雕蔽，特別是在它的作用域問題上折柠。
最常見的環(huán)境變量的設(shè)置是在.bash_profile文件中export出來
export AWS_SECRET_ACCESS_KEY=foo
export AWS_ACCESS_KEY_ID=bar
然后在node程序（其他的程序中有自己的獲取方式）中你就可以直接使用了
var secretAccessKey = process.env.AWS_SECRET_ACCESS_KEY;
var accessKeyId = process.env.AWS_ACCESS_KEY_ID;
這種方式最大的缺點就是如果有兩個程序，需要不同的accessKeyId和secretAccessKey批狐，這樣我們就得修改變量的名字扇售，比如加上前綴proA_accessKeyId等，如果有三個甚至更多呢嚣艇，這樣的處理方式就肯定不是我們想要的了
最理想的就是每個程序有自己的環(huán)境變量配置缘眶，下面我們看下在node、npm髓废、webpack中如何使用環(huán)境變量
1. node中使用環(huán)境變量
我們常見的方式是這種方式
NODE_ENV=production node index.js
這種方式最大的問題就是變量一多，寫起來有點長该抒，也不便于維護慌洪。所以如果你寫node程序的話顶燕，你可能需要dotenv，他通過項目根目錄的.env文件來維護環(huán)境變量
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
然后就能這樣使用了
require('dotenv').config()
var db = require('db')
db.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS
})
dotenv還支持preload功能冈爹。就是你不想在代碼里留下這句require('dotenv').config()涌攻，畢竟這對有潔癖的人來說還是難以忍受的，你可以使用 node的--require (-r)選項
node -r dotenv/config your_script.js
當然webpack的工程中也可以使用dotenv频伤，只不過是有時候webpack.DefinePlugin基本就夠用了
2. npm中使用環(huán)境變量
npm對于環(huán)境變量的使用最多的應(yīng)該是在package.json的scripts模塊中
- package.json文件中的變量
package.json vars
The package.json fields are tacked onto the npm_package_ prefix. So, for instance, if you had {"name":"foo", "version":"1.2.5"} in your package.json file, then your package scripts would have the npm_package_name environment variable set to "foo", and the npm_package_version set to "1.2.5"
上面這段是官方文檔中摘下來的恳谎，就是告訴我們package.json文件中的key值都會被設(shè)置成以npm_package_為前綴的環(huán)境變量，比如如果你的package.json文件中有這么一段{"name":"foo", "version":"1.2.5"} 憋肖，那么你在package scripts 中就可以使用$npm_package_name變量了因痛，它的值就是foo，自然你也可以在js代碼中使用process.env.npm_package_name獲取到它的值
不過現(xiàn)在都是開源時代岸更，誰還看文檔啊鸵膏，直接看源碼就好了
有個例外，如果是config模塊的值還會被設(shè)置成以npm_config_前綴的環(huán)境變量怎炊，使用上和上面一致
當然如果我們只需要在js代碼中使用package中的信息谭企，還是通過require的方式獲取顯得更加方便
const package = require('./package.json')
console.log(package.version)
- package.json文件中scripts模塊的環(huán)境變量
我們對已有的環(huán)境變量可以$xxx和${xxx}這兩種方式使用
{
scripts:{
"argv": "echo $npm_package_version",
"argv": "echo ${npm_package_version}",
}
}
我們還可以設(shè)置環(huán)境變量，我們称浪粒看到的就是這樣了
// NODE_ENV就是我們設(shè)置的環(huán)境變量债查，通過process.env.NODE_ENV就可以使用了
{
scripts:{
"build": "NODE_ENV=production webpack --config config/webpack/production.config.js"
}
}
當然這其實都是bash和node的知識范疇
3. webpack中使用環(huán)境變量
上面node和npm設(shè)置的環(huán)境變量在webpack中都可以使用，而webpack中我們還可以看到一種定義方式瓜挽，就是通過DefinePlugin來定義
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: "production"
},
PRODUCTION: JSON.stringify(true),
RELEASE: JSON.stringify(process.env.RELEASE)
})
這種定義方式本質(zhì)上有點類似 process.env.NODE_ENV = "production"這種js代碼直接賦值的方式盹廷，為什么類似呢，因為它還是有區(qū)別的秸抚，區(qū)別就是在build出來的代碼上你可以看待到process.env.NODE_ENV會直接被production字符串替換（注意：并不是簡單的直接替換速和，它是根據(jù)AST來替換的）。因為并非真正的設(shè)置到了環(huán)境變量中剥汤，所以我們不能把需要環(huán)境變量的地方依賴于它颠放，否則不會有效果
4.總結(jié)
其實這里的應(yīng)該都是屬于node中的環(huán)境變量，畢竟npm和webpack都是用node跑的吭敢，所以node的環(huán)境變量的設(shè)置方式對三者都有效碰凶，只是npm和webpack有些是自己封裝過的設(shè)置方式，其設(shè)置只對自己有效罷了
