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

开展新项目

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

项目选型

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

1. 易用性，开箱即用。umi内置了许多功能，可是也带来很多限制，譬如对项目结构的规定提供自己生态的插件需要学习成本，cra初始化简洁选取模板即可开始，不需要额外的学习成本（即使vue玩家过来也没负担）。
2. 可拓展性，修改webpack配置。cra提供eject（不可逆的操作）全部暴露出来自己控制，丧失了一开始想要简单配置的初衷，或者使用react-app-rewired和customize-cra可看这里。 umi需要修改webpack配置时可直接写文件（基于webpack-chain），还提供了一个运行态的配置。
3. 生态，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 *;
  }
 }
    

到此这篇关于react项目从新建到部署的实现示例的文章就介绍到这了,更多相关react 新建到部署内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 使用 React 和 Threejs 创建一个VR全景项目的过程详解
• 解决VSCode调试react-native android项目错误问题
• 使用webpack5从0到1搭建一个react项目的实现步骤
• 基于react项目打包css引用路径错误解决方案
• 在react项目中使用antd的form组件,动态设置input框的值
• vue或react项目生产环境去掉console.log的操作
• 记一次react前端项目打包优化的方法
• npx create-react-app xxx创建项目报错的解决办法
• react项目如何运行在微信公众号

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！