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 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
理解JavaScript中的对象
Aug 25 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
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
后勤自我鉴定
2013/10/13 职场文书
给同学的道歉信
2014/01/16 职场文书
博士生求职信
2014/07/06 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书