React 第十二章 UmiJs

Umi.js 介绍

Umi 是由蚂蚁集团推出的可扩展的企业级前端应用框架。Umi 以路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。

image-20221105145301148

Umi.js 特点

  1. 插件化:UmiJS 的整个生命周期都是插件化的,这意味着框架内部的功能大多由插件实现。这种设计使得框架非常灵活,开发者可以通过引入不同的插件来扩展或修改框架的行为。例如,按需加载、一键切换 Preact、一键兼容 IE9 等功能,都是由插件实现的。
    开箱即用:UmiJS 内置了路由、构建、部署等功能,开发者仅需一个依赖即可开始开发。这大大简化了开发流程,无需额外安装 React、Preact、Webpack、React-Router、Babel、Jest 等工具或库。
  2. 约定式路由:UmiJS 采用了约定式路由,这意味着开发者无需再维护一份冗余的路由配置。框架会根据文件目录结构自动生成路由配置,并支持权限、动态路由、嵌套路由等功能。这种设计不仅简化了路由管理,还提高了开发效率。
  3. 可扩展性:UmiJS 支持插件和插件集,这使得框架能够支持各种不同的功能需求。无论是添加新的功能、修改现有功能,还是优化性能,都可以通过引入或开发插件来实现。
  4. 业务整合:由于 UmiJS 是阿里系的前端框架,它对自家的 Ant Design、ahooks、dva 等工具或库的整合度非常高。这使得开发者在使用这些工具或库时,能够获得更好的兼容性和性能。

约定式路由

约定式路由并不是 Umi 独有的东西,像基于 VueNuxt.js,基于 ReactNext.js 框架,都提供了约定式路由的方式。

而早期在 Umi 2.x 时代,团队借鉴了这种方式,加入了约定式路由的功能,并沿用至今。

所谓约定式路由,简单来讲,就是根据你的页面级组件自动生成路由的配置,而不再需要我们自己去书写路由配置。

有关约定式路由的说明,在 v4 的文档中介绍相对比较简单:https://umijs.org/docs/guides/directory-structure#pagesv4 更多的是介绍配置式路由。

如果想要了解约定式路由,这里可以参阅 v2v3 的文档:

  • v2 文档:https://v2.umijs.org/zh/guide/router.html

  • v3 文档:https://v3.umijs.org/zh-CN/docs/convention-routing

注意
不同版本之间会有略微的差异,例如动态路由在 v2v3 中的使用方式就有所区别,当发现差异时,应该查询自己对应版本的文档说明

插件机制

Umi 中,采用了插件的机制,所涵盖的其他技术都以插件的形式引入。

要开启某个插件,我们可以在 .umirc.js 中进行配置,例如:

export default defineConfig({antd: {},access: {},model: {},initialState: {},request: {},layout: {},dva: {},npmClient: 'npm',
});

另外,如果*.umiirc.js* 文件配置的内容很多的话,可以单独提取出来,放入到 config/config.js 里面(二选一,.umirc.js 优先)

构建时配置和运行时配置

v2 版本开始,Umi 就一直包含两个配置文件,到了 v4 也一直保持这一特点。

构建时配置

Umi 中,约定项目根目录下的 .umirc.js/ts 为构建时配置,当我们启动 Umi 项目时,Umi 会对整个项目进行一次构建,在 src 目录下生成一个 .umi 的临时目录,构建时配置则决定了所生成的 .umi 目录的样子。

.umi 目录的结构如下:

+ .umi+ core     # 内部插件生成+ pluginA  # 外部插件生成+ presetB  # 外部插件生成+ umi.ts   # 入口文件

因此,在构建时配置中,一个很重要的用途就是开启插件。

有关 .umirc.js/ts 具体的配置项,请参阅:https://umijs.org/docs/api/config

运行时配置

运行时配置和配置的区别是他跑在浏览器端,基于此,我们可以在这里写函数、tsximport 浏览器端依赖等等,注意不要引入 node 依赖。

umi 中,约定 src 目录下的 app.js/ts/jsx/tsx 为运行时的配置文件。

有关运行时配置项目,可以参阅:https://umijs.org/docs/api/runtime-config

总结

UmiJS 是一个强大且灵活的企业级前端应用框架,基于 React 和插件化的思想构建。它提供了丰富的功能和插件生态系统,使得开发者能够高效地构建出稳定、可扩展的 Web 应用。

无论是初创公司还是大型企业,都可以通过 UmiJS 来提高开发效率、降低维护成本,并构建出高质量、可扩展的 Web 应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/661100.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Facebook的地理学:社交媒体在全球化进程中的作用

在数字化时代,社交媒体如Facebook已经成为连接世界的桥梁,使得信息和文化可以自由地在全球范围内流动。它不仅改变了我们的日常生活和沟通方式,还深刻影响了全球化进程中的地理学格局。本文将深入探讨Facebook在全球化中的作用,以…

C++-10

1.C一个程序,实现两个类,分别存放输入的字符串中的数字和字母,并按各自的顺序排列, 类中实现-一个dump函数,调C用后输出类中当前存放的字符串结果。 例如,输入1u4y2a3d,输出:存放字母的类,输出a…

Swagger3.0(Springdoc)日常使用记录

文章目录 前言一、默认地址二、注解OperationTag 三、SpringBoot基础配置四、Swagger导入apifox五、Swagger其他配置六 knife4j 参考文章 前言 本文并不是Swagger的使用教程,只是记录一下本人的操作,感兴趣的可以看下 一、默认地址 http://localhost:…

傲软录屏(ApowerREC)一款简单好用的录屏软件,中文破姐版 v1.6.9.6(240501)

软件介绍 傲软录屏,是由ApowerREC开发的一款高级录屏软件,兼容多个操作系统平台,包括Windows、Mac以及基于安卓和iOS的设备。这款专业工具具备捕捉各类屏幕活动的能力,确保音视频同步,无论用户是进行电脑桌面操作、参…

数智新重庆 | 推进信号升格 打造算力山城

2024年,是实现“十四五”规划目标任务的关键一年,高质量的5G网络、强大的AI能力作为新质生产力的重要组成部分,将有效赋能包括制造业在内的千行万业数字化化、智能化、绿色化转型升级,推动融合应用新业态、新模式蓬勃兴起&#xf…

WebAuthn 无密码身份认证

文章目录 WebAuthn简介工作原理组成部分架构实现注册认证应用场景案例演示 WebAuthn简介 WebAuthn,全称 Web Authentication,是由 FIDO 联盟(Fast IDentity Online Alliance)和 W3C(World Wide Web Consortium&#x…

PHP源码_在线艺术字体在线生成转换设计网站源码

最全的字体转换器在线转换、艺术字体在线生成器和字体下载,包括书法字体在线转换、毛笔字在线生成器,更有草书字体、篆体字、连笔字、POP字体转换器等中文和英文字体。 支持自己添加字体,在线艺术字体转换器,织梦内核艺术字体在线…

SOLIDWORKS DRAFTSIGHT 2024新功能Top10

SOLIDWORKS 2024 以更加强大的姿态亮相,帮助您重塑设计。为了助力您简化和加快由概念到成品的产品开发流程,SOLIDWORKS 2024 涵盖全新以用户为中心的增强功能,致力帮您实现更智能、更快速地与您的团队和外部合作伙伴协同工作,下面…

java技术栈快速复习05_基础运维(linux,git)

Linux知识总览 linux可以简单的理解成和window一样的操作系统。 Linux和Windows区别 Linux是严格区分大小写的;Linux中一切皆是文件;Linux中文件是没有后缀的,但是他有一些约定俗成的后缀;Windows下的软件一般是无法直接运行的Li…

【消息队列】RabbitMQ五种消息模式

RabbitMQ RabbitMQRabbitMQ安装 常见的消息模型基本消息队列SpringAMQPWorkQueue消息预取发布订阅模式Fanout ExchangeDirectExchangeTopicExchange 消息转换器 RabbitMQ RabbitMQ是基于Erlang语言开发的开源消息通信中间件 官网地址:https://www.rabbitmq.com/ R…

ENVI实战—一文搞定遥感图像的计算机解译

人工进行矢量化制图虽然可以达到相应的精度要求,但是在工作量大,内容繁琐,时间成本高,利用计算机帮助我们对各类图像进行解译是目前制图的趋势。 本文基于(ENVI和Arcgis)给出利用遥感图像制作某地土地利用…

使用docker创建rocketMQ主从结构,使用

1、 创建目录 mkdir -p /docker/rocketmq/logs/nameserver-a mkdir -p /docker/rocketmq/logs/nameserver-b mkdir -p /docker/rocketmq/logs/broker-a mkdir -p /docker/rocketmq/logs/broker-b mkdir -p /docker/rocketmq/store/broker-a mkdir -p /docker/rocketmq/store/b…