如何優雅的在項目中設置多個環境變量

總所周知項目完成之後代碼都會統一打包上線，有些時候咱們須要同時上線不一樣環境，對於不一樣的環境咱們所展現頁面、功能有時會有很大變化，那麼咱們如何應對這樣的變化呢？

問題

我發現有些瑣碎的事情有些瑣碎而且很難作，而在Web應用程序內部倒是如此。這些事情之一是處理不一樣的環境變量。

當您仍在開發應用程序時，一般只有一個環境是正常的，可是當其餘一些用戶開始對其進行測試或要發佈它時，您可能但願對API使用不一樣的URL，例如該API的開發版本。能夠訪問新端點或更全面的記錄器以及生產就緒版本的API，這些API通過了良好的測試，並具備發行版本的生產數據庫。
有時您須要兩個以上的環境，例如：

• 開發：這是您開發應用程序全部新功能的地方；該環境已準備就緒，能夠幫助您得到更好的日誌和僞造的數據庫，若是您花費不少，能夠隨時刪除並從新建立它們；
• 生產版：這是您將發佈到線上的版本

那麼如何爲不一樣的環境存儲（和使用）不一樣的變量呢？

顯然，我嘗試向Google尋求答案，可是我發現的解決方案彷佛太困難或不夠靈活。

使用.env

就是這個文件,在文件中能夠定義咱們須要的配置，而後在項目中使用process.env全局變量獲取，聲明的屬性在 vue以及react中都有特殊的命名要求，好比vue中屬性名必須以VUE\_APP\_開頭，如VUE_APP_XXX，react則須要以REACT_APP開頭。
不幸的是，彷佛最多隻能處理兩種環境（一種開發和一種發行/生產），而且還具備一些可怕的變量緩存。

更簡單的解決方案

參照後端配置打包profile的方式。
這是我目前正在使用的方法；準備手指，由於您將須要建立一些新文件。

首先，咱們將全部環境存儲在envs文件夾中的JSON文件中。
我將爲本文建立3個環境（開發，暫存和生產），每一個環境將具備不一樣的API_URL。顯然，您能夠根據須要添加任意多個變量！

envs/development.json

{   
    "API\_URL": "https://development.api.com",
}

envs/staging.json

{   
    "API\_URL": "https://staging.api.com",  
}

envs/production.json

{   
    "API\_URL": "https://production.api.com", 
}

還在我這兒？如今，咱們將建立一個節點腳本，該腳本將在每次咱們想要切換環境時更改環境文件。

我將其放在腳本文件夾中（在該文件夾中，我還有其餘腳本能夠自動執行構建過程的其餘部分）

腳本/set-environment.js

＃！/ bin/node
const fs = require（"fs");//獲取傳遞給節點腳本的環境字符串  

const environment = process.argv[2] //讀取json文件的內容  
const envFileContent = require(`../envs/$ {environment} .json`); //將env.json文件內的json複製到  
fs.writeFileSync("env.json", JSON.stringify(envFileContent, undefined, 2));

此設置enviroment.js首先，它在一個變量中存儲的第一個參數，當你調用腳本，那麼它將require裏面的文件ENVS具備相同的名稱，最後將建立一個env.json文件包含envFileContent內容的根文件夾。

如今咱們能夠嘗試並調用

節點腳本/set-environment.js開發

✨MAGIC✨…一個新的env.json文件在正確的位置，能夠爲您的全部變量提供服務。

另外，您能夠在package.json文件中設置一些腳本，以切換環境而無需在終端中鍵入全部單詞：只需鍵入yarn env：dev便可。

{   
    "name": "您的應用程序名稱",
    "scripts": {   
    "start": "本機開始"，
    "env: staging"："節點腳本/set-environment.js階段",
    "env: dev」："節點腳本/set-environment.js 開發",
    "env: prod"："節點腳本/set-environment.js,
    "oduction",...   
 },
 "依賴項"：{...},
 ...   
}

如何在代碼中使用新的.env文件

如今，您只須要從src/env.json文件導入變量，就能夠開始了！🚀

如何自動執行環境切換

如今，咱們須要一種自動切換環境的方法。

若是咱們在pckage.json建一些新腳本，這幾乎是免費的

{
  "name": "your-app-name",
  "scripts": {
    "start": "react-native start",
    "env:staging": "node scripts/set-environment.js staging",
    "env:dev": "node scripts/set-environment.js development",
    "env:prod": "node scripts/set-environment.js production",
    "_ios": "react-native run-ios",
    "ios": "yarn env:dev && yarn _ios",
    "ios:staging": "yarn env:staging && yarn _ios",
    "ios:prod": "yarn env:prod && yarn _ios",
    
    "_build:ios": "react-native bundle --platform ios ...",
    "build:ios": "yarn env:dev && yarn _build:ios",
    "build:ios:staging": "yarn env:staging && yarn _build:ios",
    "build:ios:prod": "yarn env:prod && yarn _build:ios",
  },
  "dependencies": {...},
  ...
}

後期咱們也能夠打包出來的文件(src/env.json)統一放置到一個文件下只須要修改/set-environment.js文件中fs的寫入路徑便可。