快捷導(dǎo)航

react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例

更新時(shí)間：2021年02月19日 10:06:06 投稿：zx

這篇文章主要介紹了react項(xiàng)目從新建到部署的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

開(kāi)展新項(xiàng)目

本文主要記錄最近工作一個(gè)新項(xiàng)目從0-1的過(guò)程，主要記錄3個(gè)節(jié)點(diǎn)，選型、運(yùn)行時(shí)、上線。

項(xiàng)目選型

react 腳手架初始化，社區(qū)比較火的有cra（create-react-app）和umi，從以下幾點(diǎn)進(jìn)行對(duì)比最終選擇了比較貼合項(xiàng)目的umi。

易用性，開(kāi)箱即用。umi內(nèi)置了許多功能，可是也帶來(lái)很多限制，譬如對(duì)項(xiàng)目結(jié)構(gòu)的規(guī)定提供自己生態(tài)的插件需要學(xué)習(xí)成本，cra初始化簡(jiǎn)潔選取模板即可開(kāi)始，不需要額外的學(xué)習(xí)成本（即使vue玩家過(guò)來(lái)也沒(méi)負(fù)擔(dān)）。
可拓展性，修改webpack配置。cra提供eject（不可逆的操作）全部暴露出來(lái)自己控制，喪失了一開(kāi)始想要簡(jiǎn)單配置的初衷，或者使用react-app-rewired和customize-cra可看這里。 umi需要修改webpack配置時(shí)可直接寫(xiě)文件（基于webpack-chain），還提供了一個(gè)運(yùn)行態(tài)的配置。
生態(tài)，umi是阿里開(kāi)源的，里面有許多插件都與他們的開(kāi)源關(guān)聯(lián)起來(lái)了，比如比較火的antd，qiankun，官網(wǎng)提供了大量的實(shí)踐指導(dǎo)，而且是中文文檔（有部分人會(huì)傾向于此），cra簡(jiǎn)潔只負(fù)責(zé)一個(gè)腳手架的工作（容易理解內(nèi)部實(shí)現(xiàn)，出問(wè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í)的能力,簡(jiǎn)單理解就是渲染你頁(yè)面的前置操作都可以放在這里。這個(gè)概念可以類(lèi)

比storybook(preview.js),如果要自己實(shí)現(xiàn)可以在對(duì)應(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)橛虿灰粯铀圆扇×?，window.postmessage。為了維護(hù)數(shù)據(jù)可讀性建議定義對(duì)應(yīng)的事件傳輸內(nèi)容，避免后期維護(hù)難度上升，如果需要頻繁通信更建議采取微前端方案。

iframe自適應(yīng)， iframe-resizer插件幫我們解決，記住嵌入與被嵌入的都需要安裝，不然無(wú)法通信不可能自適應(yīng)。這里遇到一個(gè)問(wèn)題頁(yè)面嵌入的時(shí)候body節(jié)點(diǎn)一直無(wú)法由內(nèi)部撐大所以需要使用iframe-resizer提供的自定義計(jì)算方法自己在子頁(yè)面提供對(duì)應(yīng)方法。代碼如下：

子系統(tǒng)

import 'iframe-resizer/js/iframeResizer.contentWindow.js';
// 如果內(nèi)嵌則運(yùn)行時(shí)打開(kāi)監(jiān)聽(tīng)
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)過(guò)一輪打包，終于到了上線了。這里主要講講nginx怎么配置轉(zhuǎn)發(fā)請(qǐng)求。

在開(kāi)發(fā)期間，如果需要對(duì)多個(gè)不同域的接口時(shí)，前端第一個(gè)反應(yīng)就是配置proxy。上線時(shí)就有點(diǎn)懵了。

 proxy: {
  '/api': {
   target: 'http://aaa.com',
   changeOrigin: true,
   pathRewrite: { '^/api': '' },
  },
  '/b-api': {
   target: 'http://bbb.com/',
   changeOrigin: true,
   pathRewrite: { '^/b-api': '' },
  },
 },

nginx配置如下

server {
  listen 80;
  server_name 訪問(wèn)地址;
  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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: