前言
今天來講一下Webpack配置環(huán)境變量，那么環(huán)境變量是干啥的。我們在開發(fā)項目中都會遇到這種場景，區(qū)分開發(fā)環(huán)境、生產(chǎn)環(huán)境、測試環(huán)境，不同場景請求不同的接口Api。這時候項目中配置的環(huán)境變量就登場啦~，下面來講一下配置環(huán)境變量的方式吧。
配置方法
Set or Export
該方式有個棘手的問題就是windows和mac使用的方式還不同，不同系統(tǒng)使用啟動項目還得更改代碼，這就有點難受，我們來看一下。
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電腦啟動這樣就會有問題，我們還得手動更改，這樣非常的繁瑣。
Cross-env
該插件就是解決上面我們所說的問題（不同系統(tǒng)使用不同的配置方式），該插件稱為 "跨平臺環(huán)境變量"，就是一套代碼兼容兩端。下面我們來案例
安裝
npm i cross-env -D
在項目下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
但是上面這樣還有個問題是，雖然我們環(huán)境變量配置好了，但是只能在webpack.config.js里面使用。我們來到main.js文件下打印看看呢。
main.js
console.log(process.env.NODE_ENV) // undefined
上面main.js可以清楚的看到，打印結(jié)果為undefined，這是為什么呢，是因為當(dāng)前的環(huán)境變量，只是在node環(huán)境中生效，在瀏覽器中并沒有，所以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了，這是因為瀏覽器環(huán)境中NODE_ENV走的是webpack里的mode。
- webpack-dev-server 默認(rèn)就是 --mode=development
- webpack 默認(rèn)就是 --mode=production
注意這里的坑，避免出錯。
回歸主題，那么既然cross-env環(huán)境變量只能在node環(huán)境下使用，那怎么在瀏覽器環(huán)境下使用呢。配合Webpack提供的內(nè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
這時再看，cross-env全局變量已經(jīng)覆蓋掉mode的啦，上面JSON.stringify是防止解析成為一個變量?，F(xiàn)在可以在全局項目中隨意使用環(huán)境變量啦~。
我是蛙人，我們下篇見。
公眾號：前端娛樂圈
感謝
謝謝你讀完本篇文章，希望對你能有所幫助，如有問題歡迎各位指正。
我是蛙人(????)，如果覺得寫得可以的話，請點個贊吧?。
感興趣的小伙伴可以加入 [ 前端娛樂圈交流群 ] 歡迎大家一起來交流討論
寫作不易，「點贊」+「在看」+「轉(zhuǎn)發(fā)」 謝謝支持?
往期好文
《手把手教你寫一個Vue組件發(fā)布到npm且可外鏈引入使用》
