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基础教程之deferred对象使用方法
Jan 22 Javascript
javascript折半查找详解
Jan 26 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
JS动画定时器知识总结
Mar 23 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php图片缩放实现方法
2014/02/20 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
javascript计时器详解
2015/02/28 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python Requests库基本用法示例
2018/08/20 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
社会保险接收函
2014/01/12 职场文书
小学教师自我评价
2015/03/04 职场文书
学校党支部承诺书
2015/04/30 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
运动会通讯稿300字
2015/07/20 职场文书
校园广播稿范文
2015/08/19 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
javascript之Object.assign()的痛点分析
2022/03/03 Javascript