react项目从新建到部署的实现示例

(编辑：jimmy 日期: 2024/12/26 浏览：3 次 )

开展新项目

本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。

项目选型

react 脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几点进行对比最终选择了比较贴合项目的umi。

易用性，开箱即用。umi内置了许多功能，可是也带来很多限制，譬如对项目结构的规定提供自己生态的插件需要学习成本，cra初始化简洁选取模板即可开始，不需要额外的学习成本（即使vue玩家过来也没负担）。
可拓展性，修改webpack配置。cra提供eject（不可逆的操作）全部暴露出来自己控制，丧失了一开始想要简单配置的初衷，或者使用react-app-rewired和customize-cra可看这里。 umi需要修改webpack配置时可直接写文件（基于webpack-chain），还提供了一个运行态的配置。
生态，umi是阿里开源的，里面有许多插件都与他们的开源关联起来了，比如比较火的antd，qiankun，官网提供了大量的实践指导，而且是中文文档（有部分人会倾向于此），cra简洁只负责一个脚手架的工作（容易理解内部实现，出问题能快速定位解决）。

最终考虑到一个项目需要快速搭建需要许多成型的插件支持所以采用了umi。antd真香！！！@umijs/plugin-model，推荐这个插件看懂内部实践基本就掌握了数据管理了。

运行时

umi提供app.ts,运行时配置文件，可以扩展运行时的能力,简单理解就是渲染你页面的前置操作都可以放在这里。这个概念可以类

比storybook(preview.js),如果要自己实现可以在对应html插入script。这里会涉及一些项目关联内容，因为项目需要内嵌在已有项目中，所以我们采取iframe的方式，不可避免我们需要通信，以及iframe大小自适应。

iframe通信，因为域不一样所以采取了，window.postmessage。为了维护数据可读性建议定义对应的事件传输内容，避免后期维护难度上升，如果需要频繁通信更建议采取微前端方案。

iframe自适应， iframe-resizer插件帮我们解决，记住嵌入与被嵌入的都需要安装，不然无法通信不可能自适应。这里遇到一个问题页面嵌入的时候body节点一直无法由内部撑大所以需要使用iframe-resizer提供的自定义计算方法自己在子页面提供对应方法。代码如下：

子系统

import 'iframe-resizer/js/iframeResizer.contentWindow.js';
// 如果内嵌则运行时打开监听
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]) // 事件参数
    }
   }
  };
  parent.postMessage({ msg: 'MessageFromIframePage' }, '*');
 }
};

iframeInit();

上线

经过一轮打包，终于到了上线了。这里主要讲讲nginx怎么配置转发请求。

在开发期间，如果需要对多个不同域的接口时，前端第一个反应就是配置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 *;
  }

 
}

上一篇：JavaScript使用setTimeout实现倒计时效果
下一篇：原生JavaScript实现幻灯片效果