前端快閃三：多環(huán)境靈活配置React
本文轉(zhuǎn)載自微信公眾號(hào)「精益碼農(nóng)」，作者有態(tài)度的馬甲。轉(zhuǎn)載本文請(qǐng)聯(lián)系精益碼農(nóng)公眾號(hào)。
你已經(jīng)使用Create React App[1] 腳手架搭建了React應(yīng)用，現(xiàn)在該部署了。
一般會(huì)使用npm run build或者yarn build構(gòu)建出靜態(tài)資源， 由web服務(wù)器承載。
你會(huì)體驗(yàn)到：多環(huán)境：test、staging、prod,他們都是獨(dú)立服務(wù)器、不同的主機(jī)名，需要打不同的包。
或者你會(huì)這樣手寫(xiě) if/else來(lái)配置不同環(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}`;
然后在你的應(yīng)用文件api.js， 導(dǎo)入這個(gè)配置：
- import {API_ROOT} from './api-config'
- function getUsers() {
- return fetch('${API_ROOT}/users')
- .then(res=> res.josn)
- .then(json=> json.data.users)
- }
終究不夠優(yōu)雅。
構(gòu)建時(shí)變量織入
要提醒的概念是：
環(huán)境變量是在構(gòu)建階段被織入，一旦完成構(gòu)建過(guò)程，構(gòu)建的產(chǎn)出物中變量值就被固定了(不論產(chǎn)出物被放置到哪個(gè)服務(wù)進(jìn)程、哪個(gè)環(huán)境)。
畢竟React應(yīng)用是作為靜態(tài)資源運(yùn)行在瀏覽器上，而到了瀏覽器， 就no sense with環(huán)境變量。
Case1. 通過(guò)環(huán)境變量配置后端基地址
Create React APP腳手架創(chuàng)建了react應(yīng)用，可通過(guò)全局的process.env來(lái)獲取環(huán)境變量。
1.process.env.NODE_ENV在構(gòu)建時(shí)被設(shè)置為production。
2. 還可以使用REACT_APP_開(kāi)頭的環(huán)境變量來(lái)配置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"
怎么設(shè)置環(huán)境變量?
windows: set/setx命令; linux: export命令，這里不贅述。
Case2 .env文件
臨時(shí)環(huán)境變量可以影響全局process.env的下級(jí)變量值， 但是不夠方便，Create React App支持使用.env文件來(lái)固定存儲(chǔ)環(huán)境變量值。
創(chuàng)建.env文件，內(nèi)容如下;
- REACT_APP_SPECIAL_FEATURE=true
- REACT_APP_API_HOST=default-host.com
上面的環(huán)境變量打包后將會(huì)在development、test、production生效。
如果你要為不同環(huán)境設(shè)置變量，可放置.env.development、env.test、.env.production 文件。
再提醒一句：環(huán)境變量不僅可以用來(lái)配置后端基地址，還可以靈活的作為react app業(yè)務(wù)配置。
