首頁 > 文章 > 後端開發 > 更好的管理前端環境變數方法

更好的管理前端環境變數方法

小云云原創: 2017-12-05 16:46:552013瀏覽

本文主要分析使用環境變數管理前端專案時會遇到的問題，並介紹常用工具給出解決方案。

如何使用環境變數

#在建立基於webpack 前端專案時（或任意基於Node 的項目，本文以webpack 項目為例），一般需要提供兩種運作模式：開發模式與生產模式。通常的做法是，執行指令前設定環境變數NODE_ENV# 為production# ，如執行NODE_ENV=production webpack 指令，然後在JavaScript 程式碼中透過process.env.NODE_ENV === 'production' 來判斷是生產模式，否則為開發模式。透過區分不同的模式可以執行不同的操作，例如在開發模式下啟動開發伺服器並代理轉發 API，或在生產模式下壓縮合併程式碼等。為了更好的統一前端工程指令，可以將啟動開發模式和生產模式的指令分別加入package.json 檔案的scripts 欄位中，以後只需要執行npm start 或

npm run build

即可。透過定義環境變數的方式很好的解決了在專案中執行差異操作的需求。如果希望支援成員自訂環境變量，只要在程式中優先使用環境變數中的值即可。例如已經設定埠號優先使用環境變數中的

PORT

的值，專案成員開發時執行PORT=8080 npm start

指令就可以自訂連接埠號碼為8080 了。 使用環境變數時遇到的問題上述的解決方案可以適用大部分場景，但卻無法解決設定環境變數的跨平台和持久化問題跨平台如果專案中有使用Windows 作業系統的成員，在執行npm run build （即

NODE_ENV=production webpack#）時會失敗，原因是Windows 指令不支援使用這種方式設定環境變數。雖然在Windows 下也可以根據build 腳本內容，手動執行

set NODE_ENV=production webpack，卻破壞了統一前端工程指令的初衷，為此需要引入一個解決跨平台設定環境變數的函式庫。如使用 cross-env，只要改寫 package.json 中的 build 腳本為 cross-env NODE_ENV=production webpack

# 就可以跨平台工作了。

持久化

#隨著規模的增加，專案自訂環境變數的數量可能越來越多。例如部署後靜態資源需要使用CDN，專案生產模式就需要提供一個環境變數來支援自訂webpack 的publicPath 欄位；又例如有的成員並沒有把API 伺服器運行在本機，而是運行在虛擬機裡或另一台電腦上，專案開發模式就需要提供兩個環境變數來支援自訂API 伺服器位址和連接埠號碼…可能有的成員每次開發時都必須執行類似這麼長的命令：#### #####PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start#########，因此需要一個可以持久化環境變數的工具，例如使用dotenv 或env-cmd 。以env-cmd 為例，只需建立一個.env.local 檔案（不計入版本管理），寫入：######

<span style="font-size: 14px;">NODE_ENV=development<br>PORT=8080<br>API_SERVER=192.168.100.100<br>API_PORT=9000<br></span>

######改寫package.json 中start 指令（build 指令類似）為#########env-cmd --fallback ./.env.local webpack######### 即可解決自訂環境變數過多每次手動輸入繁瑣的問題。 ######

真正好用的环境变量管理工具

管理环境变量有很多工具，下面简单分析一下常用工具 dotenv、cross-env 和 env-cmd 的优势与不足：

dotenv 可以解决跨平台和持久化的问题，但使用场景有限，只适用 node 项目，且和项目代码强耦合，需要在 node 代码运行后手动执行触发
cross-env 支持在命令行自定义环境变量。问题也非常明显，不能解决大型项目中自定义环境变量的持久化问题
env-cmd 也可以解决跨平台和持久化的问题，支持定义默认环境变量，不足的是不支持在命令行中自定义环境变量

事实上 NPM 本身也提供了类似设置项目环境变量的功能。以上述自定义端口号的需求为例，也可以在项目目录下执行 npm config set project-name:PORT 8080（project-name 为项目名称），执行 npm start 后在代码中可以通过 process.env.npm_package_config_PORT 获取到 8080。而且还可以将 package.json 中 config 字段设置为 {"PORT": 8000}，用于指定 npm_package_config_PORT 的默认值。使用 NPM 的 config 功能管理环境变量的最大优势是原生支持，放在 package.json config 字段中的默认环境变量也非常方便查看。遗憾是的，变量名前面都会有冗长的 npm_package_config_；脚本必须从 package.json 的 scripts 字段中执行（即执行 npm run your_script_name）；还有就是所有项目共用一份配置文件（.npmrc，默认在用户目录下），不方便手动编辑和查看。

因此一个好用的前端环境变量管理工具应该具备以下功能：

支持命令行设置环境变量
跨平台
持久化，最好能够提供一个设置本地环境变量的命令行工具
支持设置默认环境变量
支持获取 NPM 提供的环境变量（npm_package_* 和 npm_config_*）

为此又诞生了一个环境变量管理工具：fuck-env，取义“恶搞环境变量”，支持以上所有功能。

fuck-env 安装和使用

<span style="font-size: 14px;">npm install fuck-env<br></span>

如有一个包含 package.json 和 main.js 两个文件的项目，文件代码如下：

package.json

<span style="font-size: 14px;">{<br>  "name": "fuck-env-demo",<br>  "config": {<br>    "PORT": 8000,<br>    "APP_NAME": "$npm_package_name"<br>  },<br>  "scripts": {<br>    "start": "fuck-env node main.js"<br>  },<br>  "dependencies": {<br>    "fuck-env": "*"<br>  }<br>}<br></span>

main.js

<span style="font-size: 14px;">console.log(process.env.PORT)     // 8080<br>console.log(process.env.APP_NAME) // fuck-env-demo<br></span>

执行 fuck-env PORT=8080 npm start 后，输出“8080”和“fuck-env-demo”，不论是在 Windows 还是 POSIX（macOS、Linux 等）系统中。

如果成员希望本地持久化自定义的端口号，可以新建一个 .env 文件（此文件须加入 .gitignore，不计入版本管理，格式为类 .ini 文件的简单键值对）。

.env

<span style="font-size: 14px;">PORT=8080<br></span>

以后只需执行 npm start 即可。此外 fuck-env 还提供了另一个命令行工具：fuck，用于快速设置本地环境变量。比如，如果成员又希望使用 9000 端口，可以在项目根目录下执行 fuck set PORT 9000（需全局安装 fuck-env），此时项目目录下 .env 文件的内容即会变为“PORT=9000”，使用 fuck 命令在环境变量较多时非常方便。

當環境變數過多時，全部放置 package.json 的 config 欄位也會顯得臃腫。 fuck-env 支援統一管理預設環境變量，只需將 config 欄位下所有環境變數移至 default.env 檔案（計入版本庫）即可。

更多實例請參考這裡

fuck-env 致力於解決用戶管理環境變數時遇到的各種問題，目前還處於Beta 階段，未來將加入更多人性化設計。如果你有任何想法，歡迎給予專案寶貴的建議。

原文網址：https://lon.im/post/use-envir...

本文主要分析使用環境變數管理前端專案時會遇到的問題，並介紹常用工具給出解決方案。

如何使用環境變數

在建置基於webpack 前端專案時（或任意基於Node 的項目，本文以webpack 專案為例），一般需要提供兩種運作模式：開發模式和生產模式。通常的做法是，執行指令前設定環境變數NODE_ENV# 為production# ，如執行NODE_ENV=production webpack 指令，然後在JavaScript 程式碼中透過process.env.NODE_ENV === 'production' 來判斷是生產模式，否則為開發模式。透過區分不同的模式可以執行不同的操作，例如在開發模式下啟動開發伺服器並代理轉發 API，或在生產模式下壓縮合併程式碼等。為了更好的統一前端工程指令，可以將啟動開發模式和生產模式的指令分別加入package.json 檔案的scripts 欄位中，以後只需要執行npm start 或

npm run build

PORT

的值，專案成員開發時執行PORT=8080 npm start

NODE_ENV=production webpack#）時會失敗，原因是Windows 指令不支援使用這種方式設定環境變數。雖然在Windows 下也可以根據build 腳本內容，手動執行

###set NODE_ENV=production webpack#########，卻破壞了統一前端工程指令的初衷，為此需要引入一個解決跨平台設定環境變數的函式庫。如使用 cross-env，只要改寫 package.json 中的 build 腳本為 #########cross-env NODE_ENV=production webpack########## 就可以跨平台工作了。 ###############持久化#########

隨著規模的增加，專案自訂環境變數的數量可能越來越多。例如部署後靜態資源需要使用CDN，專案生產模式就需要提供一個環境變數來支援自訂webpack 的publicPath 欄位；又例如有的成員並沒有把API 伺服器運行在本機，而是運行在虛擬機裡或另一台電腦上，專案開發模式就需要提供兩個環境變數來支援自訂API 伺服器位址和連接埠號碼…可能有的成員每次開發時都必須執行類似這麼長的命令：PORT=8080 API_SERVER=192.168.100.100 API_PORT=9000 npm start，因此需要一個可以持久化環境變數的工具，例如使用dotenv 或env-cmd 。以env-cmd 為例，只需建立一個.env.local 檔案（不計入版本管理），寫入：

<span style="font-size: 14px;">NODE_ENV=development<br>PORT=8080<br>API_SERVER=192.168.100.100<br>API_PORT=9000<br></span>

改寫package.json 中start 指令（build 指令類似）為env-cmd --fallback ./.env.local webpack 即可解決自訂環境變數過多每次手動輸入繁瑣的問題。

真正好用的環境變數管理工具

#管理環境變數有很多工具，以下簡單分析常用工具dotenv、cross-env和env-cmd 的優勢與不足：

dotenv 可以解決跨平台和持久化的問題，但使用場景有限，只適用node 項目，且和專案程式碼強耦合，需要在node 程式碼運行後手動執行觸發
#cross-env 支援在命令列自訂環境變數。問題也非常明顯，無法解決大型專案中自訂環境變數的持久化問題
#env-cmd 也可以解決跨平台和持久化的問題，支援定義預設環境變量，不足的是不支援在命令列中自訂環境變數

#事實上NPM 本身也提供了類似設定專案環境變數的功能。以上述自訂連接埠號碼的需求為例，也可以在專案目錄下執行npm config set project-name:PORT 8080##（project-name 為專案名稱），執行npm start 後在程式碼中可以透過process.env.npm_package_config_PORT 取得到8080。而且也可以將package.json 中config 欄位設為{"PORT": 8000}，用於指定

# npm_package_config_PORT
npm_package_config_
因此一個好用的前端環境變數管理工具應該具備以下功能：
支援命令列設定環境變數
跨平台#持久化，最好能夠提供一個設定本地環境變數的命令列工具支援設定預設環境變數

##支援取得NPM 提供的環境變數（

npm_package_* 和

npm_config_*##）

為此又誕生了一個環境變數管理工具：fuck-env，取義“惡搞環境變數”，支援以上所有功能。

######fuck-env 安裝和使用##########

<span style="font-size: 14px;">npm install fuck-env<br></span>

######如有一個包含package.json 和main.js 兩個檔案的項目，檔案程式碼如下：############package.json#######

<span style="font-size: 14px;">{<br>  "name": "fuck-env-demo",<br>  "config": {<br>    "PORT": 8000,<br>    "APP_NAME": "$npm_package_name"<br>  },<br>  "scripts": {<br>    "start": "fuck-env node main.js"<br>  },<br>  "dependencies": {<br>    "fuck-env": "*"<br>  }<br>}<br></span>

######main.js####################################################

<span style="font-size: 14px;">console.log(process.env.PORT)     // 8080<br>console.log(process.env.APP_NAME) // fuck-env-demo<br></span>

执行 fuck-env PORT=8080 npm start 后，输出“8080”和“fuck-env-demo”，不论是在 Windows 还是 POSIX（macOS、Linux 等）系统中。

如果成员希望本地持久化自定义的端口号，可以新建一个 .env 文件（此文件须加入 .gitignore，不计入版本管理，格式为类 .ini 文件的简单键值对）。

.env

<span style="font-size: 14px;">PORT=8080<br></span>

当环境变量过多时，全部放置 package.json 的 config 字段也会显得臃肿。fuck-env 支持统一管理默认环境变量，只需将 config 字段下所有环境变量移至 default.env 文件（计入版本库）中即可。

以上内容就是如何更好的管理前端环境变量的方法，希望对大家有帮助。

更好的管理前端環境變數方法

如何使用環境變數

npm run build<span style="font-size: 14px;"></span>

真正好用的环境变量管理工具

如何使用環境變數

npm run build<span style="font-size: 14px;"></span>

真正好用的環境變數管理工具

相關文章