大前端快閃：package.json文件知多少？

大前端快閃二：react開(kāi)發(fā)模式 一鍵啟動(dòng)多個(gè)服務(wù)

? ? ? ? 你已經(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ì)這樣手寫 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)雅。

---

快閃三：react工程化：通過(guò)環(huán)境變量靈活配置react

構(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ù)配置。

?性感豹紋

?鵝廠二面，Nginx回憶錄

?前后端分離，如何在前端項(xiàng)目中動(dòng)態(tài)插入后端API基地址？（in docker）

?前端鏡像打包這么慢，你該反省一下

?誰(shuí)說(shuō)docker-compose不能水平擴(kuò)展容器、服務(wù)多實(shí)例？

?面試官：單點(diǎn)登錄你搞過(guò)嗎？

?難纏的布隆過(guò)濾器，這次終于通透了

引用鏈接

[1]?Create React App:?https://github.com/facebook/create-react-app

總結(jié)

以上是生活随笔為你收集整理的前端快闪三：多环境灵活配置react的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。