前言
今天來(lái)講一下Webpack配置環(huán)境變量，那么環(huán)境變量是干啥的港华。我們?cè)陂_(kāi)發(fā)項(xiàng)目中都會(huì)遇到這種場(chǎng)景道川，區(qū)分開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境立宜、測(cè)試環(huán)境冒萄，不同場(chǎng)景請(qǐng)求不同的接口Api。這時(shí)候項(xiàng)目中配置的環(huán)境變量就登場(chǎng)啦~橙数，下面來(lái)講一下配置環(huán)境變量的方式吧尊流。
配置方法
Set or Export
該方式有個(gè)棘手的問(wèn)題就是windows和mac使用的方式還不同，不同系統(tǒng)使用啟動(dòng)項(xiàng)目還得更改代碼灯帮，這就有點(diǎn)難受崖技，我們來(lái)看一下。
package.json
windows系統(tǒng)如下配置
{
"scripts": {
"dev": "set NODE_ENV=dev && node index.js"
}
}
mac系統(tǒng)如下配置
{
"scripts": {
"dev": "export NODE_ENV=dev && node index.js"
}
}
效果
webpack.config.js文件
console.log(process.env.NODE_ENV) // dev
該配置方式如果用windows方式配置钟哥，用mac電腦啟動(dòng)這樣就會(huì)有問(wèn)題响疚，我們還得手動(dòng)更改，這樣非常的繁瑣瞪醋。
Cross-env
該插件就是解決上面我們所說(shuō)的問(wèn)題（不同系統(tǒng)使用不同的配置方式）忿晕，該插件稱為 "跨平臺(tái)環(huán)境變量"，就是一套代碼兼容兩端银受。下面我們來(lái)案例
安裝
npm i cross-env -D
在項(xiàng)目下package.json中配置
{
"scripts": {
"dev:serve": "set NODE_ENV=baidu.com && npx webpack-dev-server --config=./config/webpack.config.js",
}
}
webpack.config.js
console.log(process.env.NODE_ENV) // baidu.com
但是上面這樣還有個(gè)問(wèn)題是践盼，雖然我們環(huán)境變量配置好了，但是只能在webpack.config.js里面使用宾巍。我們來(lái)到main.js文件下打印看看呢咕幻。
main.js
console.log(process.env.NODE_ENV) // undefined
上面main.js可以清楚的看到，打印結(jié)果為undefined顶霞，這是為什么呢肄程，是因?yàn)?strong>當(dāng)前的環(huán)境變量锣吼，只是在node環(huán)境中生效，在瀏覽器中并沒(méi)有蓝厌，所以main.js里面獲取到的是undefined玄叠。
有坑 - 誤區(qū)
webpack.config.js
console.log(process.env.NODE_ENV) // baidu.com
module.exports = {
mode: "development"
}
main.js
console.log(process.env.NODE_ENV) // development
咦，這次怎么main.js里面環(huán)境變量又變成development了拓提，這是因?yàn)闉g覽器環(huán)境中NODE_ENV走的是webpack里的mode读恃。
- webpack-dev-server 默認(rèn)就是 --mode=development
- webpack 默認(rèn)就是 --mode=production
注意這里的坑，避免出錯(cuò)代态。
回歸主題寺惫，那么既然cross-env環(huán)境變量只能在node環(huán)境下使用，那怎么在瀏覽器環(huán)境下使用呢蹦疑。配合Webpack提供的內(nèi)置插件全局變量西雀，我們來(lái)配置一下。
webpack.config.js
console.log(process.env.NODE_ENV) // baidu.com
const webpack = require("webpack")
module.exports = {
mode: "development",
plugins: [
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
})
]
}
main.js
console.log(process.env.NODE_ENV) // baidu.com
這時(shí)再看歉摧，cross-env全局變量已經(jīng)覆蓋掉mode的啦艇肴，上面JSON.stringify是防止解析成為一個(gè)變量。現(xiàn)在可以在全局項(xiàng)目中隨意使用環(huán)境變量啦~判莉。
我是蛙人豆挽，我們下篇見(jiàn)。
公眾號(hào)：前端娛樂(lè)圈
感謝
謝謝你讀完本篇文章券盅，希望對(duì)你能有所幫助帮哈，如有問(wèn)題歡迎各位指正。
我是蛙人(????)锰镀，如果覺(jué)得寫(xiě)得可以的話娘侍，請(qǐng)點(diǎn)個(gè)贊吧?。
感興趣的小伙伴可以加入 [ 前端娛樂(lè)圈交流群 ] 歡迎大家一起來(lái)交流討論
寫(xiě)作不易泳炉，「點(diǎn)贊」+「在看」+「轉(zhuǎn)發(fā)」 謝謝支持?
往期好文
《聊聊在Vue項(xiàng)目中使用Decorator裝飾器》
《分享15個(gè)Webpack實(shí)用的插件：斗ぁ！花鹅！》
《手把手教你寫(xiě)一個(gè)Vue組件發(fā)布到npm且可外鏈引入使用》
《聊聊什么是CommonJs和Es Module及它們的區(qū)別》
