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 相关文章推荐
用客户端js实现带省略号的分页
Apr 27 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
node文字生成图片的示例代码
Oct 26 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
原生js实现公告滚动效果
Jan 10 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP教程 变量定义
2009/10/23 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
smarty简单入门实例
2014/11/28 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
php常用的工具开发整理
2019/09/26 PHP
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
javascript每日必学之封装
2016/02/23 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
谈谈JS中的!!
2017/12/07 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
利用nohup来开启python文件的方法
2019/01/14 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
python 串行执行和并行执行实例
2020/04/30 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
中班开学寄语
2014/04/04 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
获奖感言一句话
2015/07/31 职场文书
职工的安全责任书范文!
2019/07/02 职场文书