Webpack配置環(huán)境變量 - 避免踩坑

前言

今天來(lái)講一下Webpack配置環(huán)境變量，那么環(huán)境變量是干啥的。我們?cè)陂_發(fā)項(xiàng)目中都會(huì)遇到這種場(chǎng)景，區(qū)分「開發(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è)棘手的問題就是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ì)有問題，我們還得手動(dòng)更改，這樣非常的繁瑣。

Cross-env

該插件就是解決上面我們所說(shuō)的問題（不同系統(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è)問題是，雖然我們環(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 style="color: rgb(53, 148, 247);">「當(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了，這是因?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)境變量啦~。

我是蛙人，我們下篇見。

感謝