本文轉載自微信公眾號「精益碼農(nóng)」，作者有態(tài)度的馬甲。轉載本文請聯(lián)系精益碼農(nóng)公眾號。

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序設計、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了濱江免費建站歡迎大家使用！

你已經(jīng)使用Create React App[1] 腳手架搭建了React應用，現(xiàn)在該部署了。

一般會使用npm run build或者yarn build構建出靜態(tài)資源， 由web服務器承載。

你會體驗到：多環(huán)境：test、staging、prod,他們都是獨立服務器、不同的主機名，需要打不同的包。

或者你會這樣手寫 if/else來配置不同環(huán)境的后端API基地址：

api-config.js

 
 
 

  
  
  
let backendHost; 
  
  
  
const apiVersion = 'v1'; 
  
  
  
 
  
  
  
const hostname = window && window.location && window.location.hostname; 
  
  
  
 
  
  
  
if(hostname === 'realsite.com') { 
  
  
  
  backendHost = 'https://api.realsite.com'; 
  
  
  
} else if(hostname === 'staging.realsite.com') { 
  
  
  
  backendHost = 'https://staging.api.realsite.com'; 
  
  
  
} else if(/^qa/.test(hostname)) { 
  
  
  
  backendHost = `https://api.${hostname}`; 
  
  
  
} else { 
  
  
  
  backendHost = process.env.REACT_APP_BACKEND_HOST || 'http://localhost:8080'; 
  
  
  
} 
  
  
  
 
  
  
  
export const API_ROOT = `${backendHost}/api/${apiVersion}`; 
 
 
 

然后在你的應用文件api.js， 導入這個配置：

 
 
 

  
  
  
import {API_ROOT} from './api-config' 
  
  
  
function getUsers() { 
  
  
  
   return  fetch('${API_ROOT}/users') 
  
  
  
      .then(res=> res.josn) 
  
  
  
      .then(json=> json.data.users) 
  
  
  
} 
 
 
 

終究不夠優(yōu)雅。

構建時變量織入

要提醒的概念是：

環(huán)境變量是在構建階段被織入，一旦完成構建過程，構建的產(chǎn)出物中變量值就被固定了(不論產(chǎn)出物被放置到哪個服務進程、哪個環(huán)境)。

畢竟React應用是作為靜態(tài)資源運行在瀏覽器上，而到了瀏覽器， 就no sense with環(huán)境變量。

Case1. 通過環(huán)境變量配置后端基地址

Create React APP腳手架創(chuàng)建了react應用，可通過全局的process.env來獲取環(huán)境變量。

1.process.env.NODE_ENV在構建時被設置為production。

2. 還可以使用REACT_APP_開頭的環(huán)境變量來配置proces.env.

故

 
 
 

  
  
  
REACT_APP_API_HOST= example.com yarn run build 
  
  
  
# 將產(chǎn)生如下效果： 
  
  
  
process.env.REACT_APP_API_HOST ="example.com" 
  
  
  
process.env.NODE_ENV ="production" 
 
 
 

怎么設置環(huán)境變量?

windows: set/setx命令; linux: export命令，這里不贅述。

Case2 .env文件

臨時環(huán)境變量可以影響全局process.env的下級變量值， 但是不夠方便，Create React App支持使用.env文件來固定存儲環(huán)境變量值。

創(chuàng)建.env文件，內(nèi)容如下;

 
 
 

  
  
  
REACT_APP_SPECIAL_FEATURE=true 
  
  
  
 
  
  
  
REACT_APP_API_HOST=default-host.com 
 
 
 

上面的環(huán)境變量打包后將會在development、test、production生效。

如果你要為不同環(huán)境設置變量，可放置.env.development、env.test、.env.production 文件。

再提醒一句：環(huán)境變量不僅可以用來配置后端基地址，還可以靈活的作為react app業(yè)務配置。

文章題目：前端快閃三：多環(huán)境靈活配置React
分享URL：http://uogjgqi.cn/article/ccecjie.html