快捷導(dǎo)航

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

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

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

開展新項目

本文主要記錄最近工作一個新項目從0-1的過程，主要記錄3個節(jié)點，選型、運行時、上線。

項目選型

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

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

最終考慮到一個項目需要快速搭建需要許多成型的插件支持所以采用了umi。antd真香?。?！@umijs/plugin-model，推薦這個插件看懂內(nèi)部實踐基本就掌握了數(shù)據(jù)管理了。

運行時

umi提供app.ts,運行時配置文件，可以擴展運行時的能力,簡單理解就是渲染你頁面的前置操作都可以放在這里。這個概念可以類

比storybook(preview.js),如果要自己實現(xiàn)可以在對應(yīng)html插入script。這里會涉及一些項目關(guān)聯(lián)內(nèi)容，因為項目需要內(nèi)嵌在已有項目中，所以我們采取iframe的方式，不可避免我們需要通信，以及iframe大小自適應(yīng)。

iframe通信，因為域不一樣所以采取了，window.postmessage。為了維護數(shù)據(jù)可讀性建議定義對應(yīng)的事件傳輸內(nèi)容，避免后期維護難度上升，如果需要頻繁通信更建議采取微前端方案。

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

子系統(tǒng)

import 'iframe-resizer/js/iframeResizer.contentWindow.js';
// 如果內(nèi)嵌則運行時打開監(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ā)期間，如果需要對多個不同域的接口時，前端第一個反應(yīng)就是配置proxy。上線時就有點懵了。

 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 訪問地址;
  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àn)示例的文章就介紹到這了,更多相關(guān)react 新建到部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: