開展新項(xiàng)目
本文主要記錄最近工作一個(gè)新項(xiàng)目從0-1的過程，主要記錄3個(gè)節(jié)點(diǎn)，選型、運(yùn)行時(shí)、上線。
項(xiàng)目選型
react 腳手架初始化，社區(qū)比較火的有cra（create-react-app）和umi，從以下幾點(diǎn)進(jìn)行對比最終選擇了比較貼合項(xiàng)目的umi。
- 易用性，開箱即用。umi內(nèi)置了許多功能，可是也帶來很多限制，譬如對項(xiàng)目結(jié)構(gòu)的規(guī)定提供自己生態(tài)的插件需要學(xué)習(xí)成本，cra初始化簡潔選取模板即可開始，不需要額外的學(xué)習(xí)成本（即使vue玩家過來也沒負(fù)擔(dān)）。
- 可拓展性，修改webpack配置。cra提供eject（不可逆的操作）全部暴露出來自己控制，喪失了一開始想要簡單配置的初衷，或者使用react-app-rewired和customize-cra可看這里。 umi需要修改webpack配置時(shí)可直接寫文件（基于webpack-chain），還提供了一個(gè)運(yùn)行態(tài)的配置。
- 生態(tài)，umi是阿里開源的，里面有許多插件都與他們的開源關(guān)聯(lián)起來了，比如比較火的antd，qiankun，官網(wǎng)提供了大量的實(shí)踐指導(dǎo)，而且是中文文檔（有部分人會(huì)傾向于此），cra簡潔只負(fù)責(zé)一個(gè)腳手架的工作（容易理解內(nèi)部實(shí)現(xiàn)，出問題能快速定位解決）。
最終考慮到一個(gè)項(xiàng)目需要快速搭建需要許多成型的插件支持所以采用了umi。antd真香！！！@umijs/plugin-model，推薦這個(gè)插件看懂內(nèi)部實(shí)踐基本就掌握了數(shù)據(jù)管理了。
運(yùn)行時(shí)
umi提供app.ts,運(yùn)行時(shí)配置文件，可以擴(kuò)展運(yùn)行時(shí)的能力,簡單理解就是渲染你頁面的前置操作都可以放在這里。這個(gè)概念可以類
比storybook(preview.js),如果要自己實(shí)現(xiàn)可以在對應(yīng)html插入script。這里會(huì)涉及一些項(xiàng)目關(guān)聯(lián)內(nèi)容，因?yàn)轫?xiàng)目需要內(nèi)嵌在已有項(xiàng)目中，所以我們采取iframe的方式，不可避免我們需要通信，以及iframe大小自適應(yīng)。
iframe通信，因?yàn)橛虿灰粯铀圆扇×耍瑆indow.postmessage。為了維護(hù)數(shù)據(jù)可讀性建議定義對應(yīng)的事件傳輸內(nèi)容，避免后期維護(hù)難度上升，如果需要頻繁通信更建議采取微前端方案。
iframe自適應(yīng)， iframe-resizer插件幫我們解決，記住嵌入與被嵌入的都需要安裝，不然無法通信不可能自適應(yīng)。這里遇到一個(gè)問題頁面嵌入的時(shí)候body節(jié)點(diǎn)一直無法由內(nèi)部撐大所以需要使用iframe-resizer提供的自定義計(jì)算方法自己在子頁面提供對應(yīng)方法。代碼如下：
子系統(tǒng)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import 'iframe-resizer/js/iframeResizer.contentWindow.js';// 如果內(nèi)嵌則運(yùn)行時(shí)打開監(jiān)聽const iframeInit = () => { if (parent !== window) { (window as any).iFrameResizer = { heightCalculationMethod: () => { return document.body.children[0].clientHeight; }, }; window.onmessage = (event: any) => { if (Array.isArray(event.data)) { if (event.data[0] === '事件名') { console.log(event.data[1]) // 事件參數(shù) } } }; parent.postMessage({ msg: 'MessageFromIframePage' }, '*'); }};iframeInit(); |
上線
經(jīng)過一輪打包，終于到了上線了。這里主要講講nginx怎么配置轉(zhuǎn)發(fā)請求。
在開發(fā)期間，如果需要對多個(gè)不同域的接口時(shí)，前端第一個(gè)反應(yīng)就是配置proxy。上線時(shí)就有點(diǎn)懵了。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
proxy: { '/api': { target: 'http://aaa.com', changeOrigin: true, pathRewrite: { '^/api': '' }, }, '/b-api': { target: 'http://bbb.com/', changeOrigin: true, pathRewrite: { '^/b-api': '' }, },}, |
nginx配置如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
server { listen 80; server_name 訪問地址; set $rooturi "xxxx/dist"; location ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ { expires 365d; root $rooturi; } location ^~/api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://aaa.com; } location ^~/b-api/ { rewrite ^/b-api/(.*)$ /$1 break; proxy_pass http://bbb.com; } location / { root $rooturi; try_files $uri $uri/ /index.html =404; add_header Cache-Control "no-cache"; add_header Access-Control-Allow-Origin *; } } |
到此這篇關(guān)于react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)react 新建到部署內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://juejin.cn/post/6927669179260600334
