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


Posted in Javascript onFebruary 19, 2021

开展新项目

本文主要记录最近工作一个新项目从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 新建到部署内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Div自动滚动到末尾的代码
Oct 26 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
鼠标悬浮显示二级菜单效果的jquery实现
Oct 29 Javascript
js实现拖拽功能
Mar 01 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
原生JavaScript实现幻灯片效果
Feb 19 #Javascript
JavaScript 实现继承的几种方式
Feb 19 #Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 #Javascript
JavaScript实现打字游戏
Feb 19 #Javascript
JS+CSS实现动态时钟
Feb 19 #Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 #Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 #Javascript
You might like
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php生成随机密码的几种方法
2011/01/17 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js里的prototype使用示例
2010/11/19 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
vue兄弟组件传递数据的实例
2018/09/06 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
js实现录音上传功能
2019/11/22 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
python集合是否可变总结
2019/06/20 Python
Python 处理文件的几种方式
2019/08/23 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python pip如何手动安装二进制包
2020/09/30 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
地球一小时倡议书
2014/04/15 职场文书
分公司任命书
2014/06/06 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技