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

 更新时间:2021年02月19日 10:06:06   投稿:zx  
这篇文章主要介绍了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中将html字符串渲染到页面的实现方式

    react中将html字符串渲染到页面的实现方式

    这篇文章主要介绍了react中将html字符串渲染到页面的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • React项目仿小红书首页保姆级实战教程

    React项目仿小红书首页保姆级实战教程

    React 是一个用于构建用户界面的 Javascript库,接下来将通过实战小红书首页的详细介绍其设计思路和方法,将读者带入到react的开源世界,需要的朋友可以参考下
    2022-07-07
  • React中的refs的使用教程

    React中的refs的使用教程

    本篇文章主要介绍了React中的refs的使用教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • redux持久化之redux-persist结合immutable使用问题

    redux持久化之redux-persist结合immutable使用问题

    这篇文章主要为大家介绍了redux持久化之redux-persist结合immutable使用问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • React onBlur回调中使用document.activeElement返回body完美解决方案

    React onBlur回调中使用document.activeElement返回body完美解决方案

    这篇文章主要介绍了React onBlur回调中使用document.activeElement返回body完美解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • React各种状态管理器的解读及使用方法

    React各种状态管理器的解读及使用方法

    这篇文章主要介绍了对于React各种状态管理器的解读,文中给大家提到了状态管理器是如何使用的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • React自定义hooks同步获取useState的最新状态值方式

    React自定义hooks同步获取useState的最新状态值方式

    这篇文章主要介绍了React自定义hooks同步获取useState的最新状态值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react路由配置方式详解

    react路由配置方式详解

    本篇文章主要介绍了react路由配置方式详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 在create-react-app中使用sass的方法示例

    在create-react-app中使用sass的方法示例

    这篇文章主要介绍了在create-react-app中使用sass的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • React自定义Hook的实现

    React自定义Hook的实现

    自定义Hook是一种自定义函数,它封装了React Hook的逻辑,并通过命名约定来使其可重用,本文主要介绍了React自定义Hook的实现,感兴趣的可以了解一下
    2023-11-11

最新评论