您当前的位置:首页 > 电脑百科 > 程序开发 > 框架

阿里开源的一个插件化前端框架,腾讯、美团、字节都在用

时间:2022-09-05 14:10:22  来源:今日头条  作者:GitHub精选
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐是一个企业级前端开发框架——Umi。

 


 

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

Umi 是蚂蚁集团的底层前端框架,已直接或间接地服务了 10000+ 应用,包括 JAVA、Node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用、Electron 应用、Serverless 应用等。他已经很好地服务了我们的内部用户,同时也服务了不少外部用户,包括淘系、飞猪、阿里云、字节、腾讯、口碑、美团等。


 

主要特性

  • 开箱即用:内置路由、构建、部署、测试、Lint 等,仅需一个 Umi 依赖即可上手开发。
  • 企业级:蚂蚁集团 10000+ 应用的选择。同时也在阿里、字节、腾讯、网易、美团、快手等公司有大量应用。
  • 最佳实践:内置微前端、数据流、权限、国际化、icons 方案、埋点、antd、请求、css 方案、图表等最佳实践。
  • 可扩展:Umi 实现了 web 应用开发的完整生命周期,并使之插件化,包括 Umi 内部功能也是全由插件实现的。
  • 完备路由:基于 react Router 6,类 Remix,支持嵌套、动态、动态可选、预加载、基于路由的请求优化等。
  • 默认快:MFSU 解 Webpack 编译慢的问题,通过 esbuild 解压缩、配置、测试的性能问题,还有运行时...
  • 双构建引擎:提供 Vite 和 Webpack 两种构建模式供开发者选择,并尽可能保证他们之间功能的一致性。
  • 依赖预打包:Umi 针对依赖做了预打包处理,彻底地锁定依赖,定期更新,让框架的每个版本在 10 年后依旧可用。

 

设计思路

技术收敛:技术收敛对团队而言尤其重要,他包含两层含义,1)技术栈收敛 2)依赖收敛。技术栈收敛指社区那么多技术栈,每个技术方向都有非常多选择,比如数据流应该就不下 100 种,开发者应该如何选择;收敛了技术栈之后还需要收敛依赖,团队中,开发者的项目不应该有很多细碎的依赖,每一个依赖都附带着升级成本。

我们希望开发者依赖 Umi 之后就无需关心 babel、webpack、postcss、react、react-router 等依赖,而依赖 @umijs/max 之后无需再关心开发中台项目的依赖和技术栈。


 

插件和插件集:Umi 通过提供插件和插件集的机制来满足不同场景和业务的需求。插件是为了扩展一个功能,而插件集是为了扩展一类业务。比如要支持 vue,我们可以有 @umijs/preset-vue,包含 vue 相关的构建和运行时;比如要支持 h5 的应用类型,可以有 @umijs/preset-h5,把 h5 相关的功能集合到一起。

如果要类比,插件集和 babel 的 preset,以及 eslint 的 config 都类似。


 

企业级:npm 社区「世风日下」,涉政包、恶意包、广告求职包频出,所以如何确保不会「睡一觉醒来项目挂了」是面对企业生成提供服务的框架绕不开的一个点。

Umi 通过写死版本、依赖预打包、通过 eslint hack 锁定 eslint 依赖,通过配置锁定 babel 补丁依赖等方式,让 Umi 不会在你重装 node_modules 之后就挂掉,并以此来实现「十年后依旧可用」。

import all from umi:很多人可能都第一次听到。import all from umi 意思是所有 import 都来自 umi。比如 dva 不是 import { connect } from 'dva',而是 import { connect } from 'umi',从 umi 中导出。导出的方法不仅来自 umi 自身,还来自 umi 插件。

这是两年前 Umi 3 加的功能,最近发现 Remix、prisma、vitekit 等框架和工具都有类似实现。

// 大量插件为 umi 提供额外导出内容 import { connect, useModel, useIntl, useRequest, MicroApp, ... } from 'umi';

这带来的好处是。通过 Umi 将大量依赖管理起来,用户无需手动安装;同时开发者在代码中也会少很多 import 语句。


 

快速上手

环境准备:首先得有 node,并确保 node 版本是 14 或以上。

创建项目

先找个地方建个空目录。

$ mkdir myapp && cd myapp

使用 NPM 创建项目,

$ npx create-umi@latest Need to install the following packages: create-umi@latest Ok to proceed? (y) y ✔ Pick Umi App Template › Simple App ✔ Pick Npm Client › npm ✔ Pick Npm Registry › taobao Write: .gitignore Write: .npmrc Write: .umirc.ts Write: package.json Copy: src/assets/yay.jpg Copy: src/layouts/index.less Write: src/layouts/index.tsx Copy: src/pages/docs.tsx Copy: src/pages/index.tsx Write: tsconfig.json Copy: typings.d.ts > postinstall > umi setup

参数选项

使用 create-umi 创建项目时,可用的参数如下:

 

  • --no-git 创建项目,但不初始化 Git
  • --no-install 创建项目,但不自动安装依赖

 

启动项目

执行 pnpm dev 命令,

$ pnpm dev ╔═════════════════════════════════════════════════════╗ ║ App listening at: ║ ║ > Local: https://127.0.0.1:8001 ║ ready - ║ >.NETwork: https://192.168.1.1:8001 ║ ║ ║ ║ Now you can open browser with the above addresses ║ ╚═════════════════════════════════════════════════════╝ event - compiled successfully in 1121 ms (388 modules) event - MFSU compiled successfully in 1308 ms (875 modules)

在浏览器里打开 http://localhost:8000/,能看到以下界面,


 

开源协议:MIT

开源地址:https://github.com/umijs/umi



Tags:前端框架   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的维护者和创作者们展望2024年,分享了他们计划中的改进。译自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【详细内容】
2024-01-05  Search: 前端框架  点击:(91)  评论:(0)  加入收藏
React与Vue性能对比:两大前端框架的性能
React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。React的加载速度:初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM...【详细内容】
2024-01-05  Search: 前端框架  点击:(107)  评论:(0)  加入收藏
Astro,这个前端框架有点不一样!
前端技术日新月异,最初的静态网站逐渐被由服务端生成的网站所取代,后来又逐渐向客户端渲染的应用转变。不过客户端渲染也存在一些问题,如加载时间变长和搜索引擎优化难度等。As...【详细内容】
2023-11-21  Search: 前端框架  点击:(223)  评论:(0)  加入收藏
前端框架的演进与未来展望
自从前后端分离的概念被提出以来,前端框架的发展就如同百花齐放,呈现出一片繁荣景象。最早出现的是Angular,随后又有了React 和Vue,而如今,Vue和 React已经成为了前端开发的主宰...【详细内容】
2023-11-17  Search: 前端框架  点击:(250)  评论:(0)  加入收藏
9个目前流行的Web前端框架
启动项目时,请查看 2023 年最好的 Web 前端框架。为什么选择合适的工具很重要?前端开发人员使用前端框架来简化工作。这些软件包通常提供可重用的代码模块、系统化的前端技术...【详细内容】
2023-07-24  Search: 前端框架  点击:(204)  评论:(0)  加入收藏
前端框架篇:React类组件的三大核心属性
React类组件是通过创建 class 继承 React.Component创建的。类组件中通过render函数返回react元素。react组件的三大核心属性是建立在react的类组件基础上的,即:state、props...【详细内容】
2023-06-19  Search: 前端框架  点击:(125)  评论:(0)  加入收藏
微前端框架实践
阿里妹导读我们对微前端框架的内容做了一个详细的介绍,并从零开始用Typescript实现了微前端的基本功能。本文我们首先实现一个可进行子应用注册和资源加载的微前端框架,实现在...【详细内容】
2023-05-31  Search: 前端框架  点击:(205)  评论:(0)  加入收藏
vue轻量化前端框架应用到小程序移动开发中
小程序是一种运行在移动端的应用形式,它可以提供快速、便捷、丰富的用户体验。但小程序的开发需要遵循一套特定的规范和接口,这对于前端开发者来说可能会有一定的学习成本和限...【详细内容】
2023-03-07  Search: 前端框架  点击:(154)  评论:(0)  加入收藏
5个最受欢迎的前端框架,建议你收藏!
前端开发人员负责创建用户在其显示器上看到的材料,他们正在尝试使用最可接受的前端框架来提供最佳的用户体验。现在,终端客户比以往任何时候都更重要,维护长期客户取决于提供非...【详细内容】
2022-12-01  Search: 前端框架  点击:(582)  评论:(0)  加入收藏
相比React、vue资源消耗更小,使用更简单的新一代前端框架Svelte
Svelte 的优点 代码是根据说明在没有额外运输规格的情况下生成的。 它将指令转换为强大的运行时语言。 它运行代码并优化代码生成,速度相比React、vue的运行资源消耗小很多...【详细内容】
2022-10-29  Search: 前端框架  点击:(446)  评论:(0)  加入收藏
▌简易百科推荐
Qt与Flutter:在跨平台UI框架中哪个更受欢迎?
在跨平台UI框架领域,Qt和Flutter是两个备受瞩目的选择。它们各自具有独特的优势,也各自有着广泛的应用场景。本文将对Qt和Flutter进行详细的比较,以探讨在跨平台UI框架中哪个更...【详细内容】
2024-04-12  刘长伟    Tags:UI框架   点击:(1)  评论:(0)  加入收藏
Web Components实践:如何搭建一个框架无关的AI组件库
一、让人又爱又恨的Web ComponentsWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素,这些元素可以在不同的Web应用程序中重复使用,并且...【详细内容】
2024-04-03  京东云开发者    Tags:Web Components   点击:(8)  评论:(0)  加入收藏
Kubernetes 集群 CPU 使用率只有 13% :这下大家该知道如何省钱了
作者 | THE STACK译者 | 刘雅梦策划 | Tina根据 CAST AI 对 4000 个 Kubernetes 集群的分析,Kubernetes 集群通常只使用 13% 的 CPU 和平均 20% 的内存,这表明存在严重的过度...【详细内容】
2024-03-08  InfoQ    Tags:Kubernetes   点击:(17)  评论:(0)  加入收藏
Spring Security:保障应用安全的利器
SpringSecurity作为一个功能强大的安全框架,为Java应用程序提供了全面的安全保障,包括认证、授权、防护和集成等方面。本文将介绍SpringSecurity在这些方面的特性和优势,以及它...【详细内容】
2024-02-27  风舞凋零叶    Tags:Spring Security   点击:(54)  评论:(0)  加入收藏
五大跨平台桌面应用开发框架:Electron、Tauri、Flutter等
一、什么是跨平台桌面应用开发框架跨平台桌面应用开发框架是一种工具或框架,它允许开发者使用一种统一的代码库或语言来创建能够在多个操作系统上运行的桌面应用程序。传统上...【详细内容】
2024-02-26  贝格前端工场    Tags:框架   点击:(47)  评论:(0)  加入收藏
Spring Security权限控制框架使用指南
在常用的后台管理系统中,通常都会有访问权限控制的需求,用于限制不同人员对于接口的访问能力,如果用户不具备指定的权限,则不能访问某些接口。本文将用 waynboot-mall 项目举例...【详细内容】
2024-02-19  程序员wayn  微信公众号  Tags:Spring   点击:(39)  评论:(0)  加入收藏
开发者的Kubernetes懒人指南
你可以将本文作为开发者快速了解 Kubernetes 的指南。从基础知识到更高级的主题,如 Helm Chart,以及所有这些如何影响你作为开发者。译自Kubernetes for Lazy Developers。作...【详细内容】
2024-02-01  云云众生s  微信公众号  Tags:Kubernetes   点击:(51)  评论:(0)  加入收藏
链世界:一种简单而有效的人类行为Agent模型强化学习框架
强化学习是一种机器学习的方法,它通过让智能体(Agent)与环境交互,从而学习如何选择最优的行动来最大化累积的奖励。强化学习在许多领域都有广泛的应用,例如游戏、机器人、自动驾...【详细内容】
2024-01-30  大噬元兽  微信公众号  Tags:框架   点击:(68)  评论:(0)  加入收藏
Spring实现Kafka重试Topic,真的太香了
概述Kafka的强大功能之一是每个分区都有一个Consumer的偏移值。该偏移值是消费者将读取的下一条消息的值。可以自动或手动增加该值。如果我们由于错误而无法处理消息并想重...【详细内容】
2024-01-26  HELLO程序员  微信公众号  Tags:Spring   点击:(88)  评论:(0)  加入收藏
SpringBoot如何实现缓存预热?
缓存预热是指在 Spring Boot 项目启动时,预先将数据加载到缓存系统(如 Redis)中的一种机制。那么问题来了,在 Spring Boot 项目启动之后,在什么时候?在哪里可以将数据加载到缓存系...【详细内容】
2024-01-19   Java中文社群  微信公众号  Tags:SpringBoot   点击:(86)  评论:(0)  加入收藏
站内最新
站内热门
站内头条