本文作者為 360 奇舞團(tuán)前端開發(fā)工程師 天明

前言

在現(xiàn)代的JavaScript應(yīng)用程序開發(fā)中，環(huán)境變量的配置是至關(guān)重要的。不同的應(yīng)用場景和部署環(huán)境可能需要不同的配置，例如開發(fā)、測試和生產(chǎn)環(huán)境。最常見的需求是根據(jù)不同的環(huán)境，配置如是否開啟sourceMap、API請求地址的切換、是否壓縮代碼等邏輯。本文主要介紹利用不同的工具：Webpack、Vite、Rollup打包項目的環(huán)境變量的配置方式。

process.env.NODE_ENV

process.env.NODE_ENV應(yīng)該是我們最熟悉的環(huán)境變量了，我們知道在Node環(huán)境中process是一個全局變量，無需require引入。process.env屬性返回一個包含用戶環(huán)境信息的對象,當(dāng)我們打印process.env時，發(fā)現(xiàn)它并沒有NODE_ENV這一個屬性。實際上process.env.NODE_ENV是在package.json的scripts命令中注入的，可以通過以下方式進(jìn)行設(shè)置：

{
??"scripts":?{
????"dev":?"NODE_ENV=development?webpack?--config?webpack.dev.config.js",
????"prod":?"NODE_ENV=production?webpack?--config?webpack.prod.config.js"
??}
}

當(dāng)運行npm run dev或npm run prod命令時，設(shè)置了NODE_ENV的不同值，項目中訪問到的process.env.NODE_ENV值也會根據(jù)執(zhí)行腳本的不同而分別取值：development與production. 我們可以根據(jù)這個值的不同而分別進(jìn)行不同的配置，這就是配置環(huán)境變量的基本邏輯.

Webpack項目環(huán)境變量配置方式

使用DefinePlugin插件

前面提到，在scripts命令中注入的NODE_ENV只能被Webpack的構(gòu)建腳本訪問，而被Webpack打包的源碼中是無法訪問到的，此時可以借助Webpack的DefinePlugin插件，創(chuàng)建全局變量。

const?webpack?=?require('webpack');

module.exports?=?{
??//.....其他配置
??plugins:?[
????new?webpack.DefinePlugin({
??????'process.env.API_URL':?JSON.stringify('https://api.example.com'),
??????'process.env.NODE_ENV':?JSON.stringify(process.env.NODE_ENV),
????}),
??],
};

在上面的示例中，我們定義了兩個環(huán)境變量：API_URL和NODE_ENV，并且使用JSON.stringify將值轉(zhuǎn)換為字符串。這樣就可以在代碼中使用process.env.API_URL與process.env.NODE_ENV來訪問這兩個環(huán)境變量的值了。

Windows平臺配置的注意點

在Windows平臺下直接設(shè)置NODE_ENV =XXX是會報錯的, 解決辦法也很簡單，可以使用cross-env這個npm包來進(jìn)行配置，cross-env能夠提供一個設(shè)置環(huán)境變量的scripts，這樣我們就能夠以unix方式設(shè)置環(huán)境變量，然后在windows上也能夠兼容

• 安裝

npm?install?cross-env?--save

• 使用

"scripts":?{
??"dev":?"cross-env?NODE_ENV=development?webpack",
??"prod":?"cross-env?NODE_ENV=production?webpack"
}

可以看到直接在NODE_ENV=XXX前面添加cross-env就可以了。

使用dotenv插件

假如我們項目的環(huán)境變量有很多，全部設(shè)置plugins中既不美觀也不容易維護(hù)，此時將環(huán)境變量配置在.env文件中，然后使用dotenv插件來加載.env配置文件。

• 安裝

npm?install?dotenv-webpack?--save-dev

• 創(chuàng)建環(huán)境變量文件 在項目根目錄下創(chuàng)建一個.env文件,如果有多種不同的環(huán)境，可以針對不同的環(huán)境創(chuàng)建不同的配置文件，例如可以使用.env.development、.env.test，.env.production在文件來分別表示：開發(fā)、測試、生產(chǎn)環(huán)境的環(huán)境變量。在文件中配置每個環(huán)境對應(yīng)的變量：

//?.env.development
API_URL=http://development.example.com
DEBUG=true

//?.env.test
API_URL=http://test.example.com
DEBUG=true

//?.env.production
API_URL=http://production.example.com
DEBUG=false

• 加載.env配置 在webpack.config.js加載.env配置：

require('dotenv').config({?path:?path.resolve(__dirname,?'.env.'?+?process.env.NODE_ENV)?})

• 設(shè)置scriptsscripts命令中設(shè)置NODE_ENV

"scripts":?{
??"dev":?"cross-env?NODE_ENV=development?webpack",
??"dev":?"cross-env?NODE_ENV=test?webpack",
??"prod":?"cross-env?NODE_ENV=production?webpack"
}

Rollup項目環(huán)境變量配置方式

Rollup是一個現(xiàn)代化的JavaScript模塊打包工具，專注于構(gòu)建JavaScript庫和組件。下面是Rollup中配置環(huán)境變量的幾種常見方式：

使用rollup-plugin-replace

Rollup的rollup-plugin-replace插件允許我們在打包過程中替換代碼中的字符串。我們常用該插件來定義環(huán)境變量。

• 安裝：

npm?install?rollup-plugin-replace?--save-dev

• rollup.config.js中配置

const?isProduction?=?process.env.NODE_ENV?===?'production';
export?default?[
????{
?????????//.....其他配置
????????plugins:?[
????????????replace({
????????????????'process.env.API_URL':?JSON.stringify(isProduction???'https://prod.example.cn'?:?'https://dev.example.cn')
????????????????'process.env.NODE_ENV':?JSON.stringify(isProduction??'production'?:?'development')

????????????})
????????]
????}
]

在上面的例子中，我們首先獲取到當(dāng)前組件庫的環(huán)境變量，并根據(jù)它的值設(shè)置不同的API_URL與NODE_ENV.

之所以在組件庫中使用rollup-plugin-replace?替換?process.env.NODE_ENV?的原因是為了在打包時，將代碼中的環(huán)境變量替換為實際的值，以便在不同的環(huán)境中正確地運行組件庫。這樣就避免了宿主工程中的環(huán)境變量process.env.NODE_ENV,對組件庫環(huán)境變量的影響。

Rollup使用dotenv插件

與Webpack類似，在Rollup中使用dotenv插件進(jìn)行環(huán)境變量的配置，可以按照以下步驟進(jìn)行：

• 安裝dotenv與rollup-plugin-replace

npm?install?dotenv?rollup-plugin-replace?--save-dev

• 創(chuàng)建環(huán)境變量文件 與上面的Webpack創(chuàng)建環(huán)境變量文件類似，這里也可以創(chuàng)建多個環(huán)境配置文件.env.development、.env.test，.env.production

• 在rollup.config.js加載.env配置

import?{?config?}?from?'dotenv'
config({?path:?".env."+?process.env.NODE_ENV?}).parsed
export?default?{
??//?...
??plugins:?[
????replace({
??????process.env.API_URL:?JSON.stringify(process.env.API_URL),
??????process.env.DEBUG:?JSON.stringify(process.env.DEBUG),
????}),
????//?...
??],
};

在上例中，我們首先通過dotenv.config()方法來加載.env文件中的環(huán)境變量。然后，使用@rollup/plugin-replace插件的replace方法，將環(huán)境變量注入到代碼中。

• 在package.json中設(shè)置scripts

"scripts":?{
????"build:dev":?"cross-env?NODE_ENV=development?rollup?-c",
????"build:prod":?"cross-env?NODE_ENV=production?rollup?-c",
????"build:test":?"cross-env?NODE_ENV=test?rollup?-c",
????"dev":?"cross-env?NODE_ENV=development?rollup?-c?-w",
??}

執(zhí)行對應(yīng)的腳本命令后，在你的代碼中，你可以通過process.env.XXX來訪問已配置的環(huán)境變量.

Vite項目環(huán)境變量配置方式

與使用Webpack或是Rollup項目配置環(huán)境變量相比，Vite項目配置環(huán)境變量較為簡單。

內(nèi)建變量

Vite在一個特殊的import.meta.env對象上暴露環(huán)境變量

• import.meta.env.MODE: 應(yīng)用運行的模式。

• import.meta.env.BASE_URL:部署應(yīng)用時的基本 URL。他由base 配置項決定。

• import.meta.env.PROD:應(yīng)用是否運行在生產(chǎn)環(huán)境。

• import.meta.env.DEV:應(yīng)用是否運行在開發(fā)環(huán)境 (永遠(yuǎn)與 import.meta.env.PROD相反)。

• import.meta.env.SSR:應(yīng)用是否運行在 server 上。 這些變量可以直接在代碼中訪問

.env文件

同樣在項目的根目錄下，根據(jù)環(huán)境的不同創(chuàng)建不同的配置文件，不過文件的命名有些特殊性：

.env????????????????#?所有情況下都會加載
.env.local??????????#?所有情況下都會加載，但會被?git?忽略
.env.[mode]?????????#?只在指定模式下加載
.env.[mode].local???#?只在指定模式下加載，但會被?git?忽略

加載的環(huán)境變量也會通過 import.meta.env 以字符串形式暴露給客戶端源碼。

注意：為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以VITE_為前綴的變量才會暴露給經(jīng)過vite處理的代碼。

模式

默認(rèn)情況下，開發(fā)服務(wù)器 dev命令 運行在 development模式，而build命令則運行在production模式。這意味著當(dāng)執(zhí)行vite build 時，它會自動加載.env.production中可能存在的環(huán)境變量.在某些情況下，若想在vite build時運行不同的模式，你可以通過傳遞 --mode 選項標(biāo)志來覆蓋命令使用的默認(rèn)模式。

vite?build?--mode?development

此時vite會使用.env.development文件下環(huán)境變量進(jìn)行構(gòu)建。

總結(jié)

通過對比發(fā)現(xiàn)雖然打包工具不同，但是配置環(huán)境變量的方式都大同小異，合理的使用環(huán)境變量，能夠提高我們代碼的靈活性、安全性、可維護(hù)性，并且將配置信息與代碼分離是一種良好的開發(fā)實踐，可以使應(yīng)用程序更易于維護(hù)和管理。

參考：

https://cn.vitejs.dev/guide/env-and-mode.html

https://webpack.docschina.org/plugins/define-plugin/

https://cn.rollupjs.org/faqs/

-?END?-

關(guān)于奇舞團(tuán)

奇舞團(tuán)是 360 集團(tuán)最大的大前端團(tuán)隊，代表集團(tuán)參與 W3C 和 ECMA 會員（TC39）工作。奇舞團(tuán)非常重視人才培養(yǎng)，有工程師、講師、翻譯官、業(yè)務(wù)接口人、團(tuán)隊 Leader 等多種發(fā)展方向供員工選擇，并輔以提供相應(yīng)的技術(shù)力、專業(yè)力、通用力、領(lǐng)導(dǎo)力等培訓(xùn)課程。奇舞團(tuán)以開放和求賢的心態(tài)歡迎各種優(yōu)秀人才關(guān)注和加入奇舞團(tuán)。

文章來源地址http://www.zghlxwxcb.cn/news/detail-796582.html