[[404614]]

前言

今天來講一下Webpack配置環境變量，那么環境變量是干啥的。我們在開發項目中都會遇到這種場景，區分「開發環境」、「生產環境」、「測試環境」，不同場景請求不同的接口Api。這時候項目中配置的「環境變量」就登場啦~，下面來講一下配置環境變量的方式吧。

配置方法

Set or Export

該方式有個棘手的問題就是windows和mac使用的方式還不同，不同系統使用啟動項目還得更改代碼，這就有點難受，我們來看一下。

「package.json」

windows系統如下配置

{ 
  "scripts": { 
    "dev": "set NODE_ENV=dev && node index.js" 
  } 
} 

mac系統如下配置

{ 
  "scripts": { 
    "dev": "export NODE_ENV=dev && node index.js" 
  } 
} 

「效果」

webpack.config.js文件

console.log(process.env.NODE_ENV) // dev 

該配置方式如果用windows方式配置，用mac電腦啟動這樣就會有問題，我們還得手動更改，這樣非常的繁瑣。

Cross-env

該插件就是解決上面我們所說的問題(不同系統使用不同的配置方式)，該插件稱為 "跨平臺環境變量"，就是一套代碼兼容兩端。下面我們來案例

「安裝」

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 

但是上面這樣還有個問題是，雖然我們環境變量配置好了，但是只能在webpack.config.js里面使用。我們來到main.js文件下打印看看呢。

「main.js」

console.log(process.env.NODE_ENV) // undefined 

上面main.js可以清楚的看到，打印結果為undefined，這是為什么呢，是因為「當前的環境變量」，只是在node環境中生效，在瀏覽器中并沒有，所以main.js里面獲取到的是undefined。

「有坑 - 誤區」

「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里面環境變量又變成development了，這是因為瀏覽器環境中NODE_ENV走的是webpack里的mode。

• webpack-dev-server 默認就是 --mode=development
• webpack 默認就是 --mode=production

❝注意這里的坑，避免出錯。❞

回歸主題，那么既然cross-env環境變量只能在node環境下使用，那怎么在瀏覽器環境下使用呢。配合Webpack提供的內置插件全局變量，我們來配置一下。

「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全局變量已經覆蓋掉mode的啦，上面JSON.stringify是防止解析成為一個變量。現在可以在全局項目中隨意使用環境變量啦~。

本文轉載自微信公眾號「前端娛樂圈」，可以通過以下二維碼關注。轉載本文請聯系前端娛樂圈公眾號。