前端React系列九：Umi简介

image.png

React 通过 JSX 提供灵活的组件化开发，将 HTML 与 JavaScript 逻辑结合，使开发更直观。其虚拟 DOM 和 Fiber 架构提升性能，通过高效的差异对比和异步渲染，使复杂应用更流畅。
React 拥有庞大的生态系统和社区支持，丰富的第三方库和工具（如 Redux、React Router）以及广泛的企业采用（如 Facebook、Netflix）推动其发展。Create React App 简化项目初始化，内置现代开发配置。React Developer Tools 提供强大调试功能，React Native 扩展技术栈到移动端，Hooks API 推动函数式编程，使代码更简洁和可重用。

---

React系列系列：
前端React系列一: React简介
前端React系列二: Create-react-app简介
前端React系列三: TypeScript简介
前端React系列四：Ant Design简介
前端React系列五：React+CRA+TS+Ant Design高效开发前端
前端React系列六：ant-design-pro简介
前端React系列七：ant-design-pro架构
前端React系列八：ant-design-pro辅助开发命令
前端React系列九：Umi简介
前端React系列十：Umi环境变量

---

前言

前文介绍了ant-design-pro的一些常用命令，如果默认给的命令不能满足我们的需求的时候，该怎么办呢，没错，就是要自定义自己的命令。

命令的自定义自己该如何操作呢，这个需要在项目更目录下的package.json文件的scripts部分进行命令的自定义。

尽管我们知道在哪里自定义命令，但是，我们怎么定义呢，要了解这个之前，我们必须要先了解ant-design-pro是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，由此可知，我们就必须要先了解umi， 本文就是准备对Umi进行简单介绍。

Umi 是什么？

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

Umi 是蚂蚁集团的底层前端框架，已直接或间接地服务了 10000+ 应用，包括 Java、Node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用、Electron 应用、Serverless 应用等。他已经很好地服务了我们的内部用户，同时也服务了不少外部用户，包括淘系、飞猪、阿里云、字节、腾讯、口碑、美团等。在 2021 年字节的调研报告中，Umi 是其中 25.33% 开发者的选择。

Umi 是一个面向企业级应用的 React 应用框架，提供了完善的路由、插件机制和其他企业级特性，帮助开发者快速构建高质量的 React 应用。它由蚂蚁金服（Ant Financial）开发和维护，广泛应用于 Ant Design Pro 等项目中。

Umi 的主要特点

1. 路由自动化

Umi 提供了文件约定式的路由配置方式，开发者只需要按照约定在 pages 目录下创建文件和目录，Umi 会自动生成路由配置。

2. 插件机制：

Umi 的插件机制非常强大，允许用户通过插件来扩展和定制项目功能。官方和社区提供了大量插件，如 umi-plugin-react 等，支持诸如路由、状态管理、国际化、测试等功能。

3. 开箱即用的配置：

Umi 默认提供了一些常用的配置，使得开发者可以快速上手。同时，Umi 也支持通过配置文件 config.js 来进行深度定制。

4. 集成 Ant Design：

Umi 与 Ant Design 深度集成，支持 Ant Design 的所有特性，方便企业级开发。

5. 支持 TypeScript：

Umi 原生支持 TypeScript，使得项目在开发过程中可以享受 TypeScript 带来的类型检查和代码提示。

6. 完善的国际化支持：

Umi 内置国际化支持，通过插件和配置可以轻松实现多语言应用。

7. 静态导出：

Umi 支持静态导出，可以将应用导出为纯静态文件，方便部署在静态服务器上。

不适用情况

注意，如果你的项目存在以下情况，则不适合使用Umi

• 需要支持 IE 8 或更低版本的浏览器
• 需要支持 React 16.8.0 以下的 React
• 需要跑在 Node 14 以下的环境中
• 有很强的 webpack 自定义需求和主观意愿
• 需要选择不同的路由方案

与其它框架比较

create-react-app

create-react-app 是脚手架，和 Umi、next.js、remix、ice、modern.js 等元框架不是同一类型。脚手架可以让我们快速启动项目，对于单一的项目够用，但对于团队而言却不够。因为使用脚手架像泼出去的水，一旦启动，无法迭代。同时脚手架所能做的封装和抽象都非常有限。

next.js

如果要做 SSR，next.js 是非常好的选择（当然，Umi 也支持 SSR）；而如果只做 CSR，Umi 会是更好的选择。相比之下，Umi 的扩展性会更好；并且 Umi 做了很多更贴地气的功能，比如配置式路由、补丁方案、antd 的接入、微前端、国际化、权限等；同时 Umi 会更稳定，因为他锁了能锁的全部依赖，定期主动更新。某一个子版本的 Umi，不会因为重装依赖之后而跑不起来。

remix

Remix 是我非常喜欢的框架，Umi 4 从中抄（学）了不少东西。但 Remix 是 Server 框架，其内置的 loader 和 action 都是跑在 server 端的，所以会对部署环境会有一定要求。Umi 将 loader、action 以及 remix 的请求机制同时运用到 client 和 server 侧，不仅 server 请求快，纯 CSR 的项目请求也可达到理论的最快值。同时 Remix 基于 esbuild 做打包，可能不适用于对兼容性有要求或者依赖尺寸特别大的项目。

安装和使用 Umi

1. 安装 Umi

npm install -g umi

2. 创建项目

npx  create-umi@latest

用以上命令即可开始创建项目，创建过程中会询问项目相关的名字、配置之类的问题，根据你的所好，上下选择回车即可继续下一步，如何就是等待创建完成。

npx create-umi@latest

3. 启动项目

    cd my-umi-demo
    yarn start 

即可开始编译

image.png
完成后，按提示在浏览器中打开http://localhost:8000
显示如下，即可
image.png

4 .部署发布

 umi build
event - compiled successfully in 1179 ms (567 modules)
event - build index.html

产物默认会生成到 ./dist 目录下，

./dist
├── index.html
├── umi.css
└── umi.js

完成构建后，就可以把 dist 目录部署到服务器上了。

相关资源

• 官方文档：
  • Umi 官方文档
• Ant Design Pro：
  • Ant Design Pro 官方文档
• GitHub 仓库：
  • Umi GitHub 仓库

Umi 是一个功能强大且灵活的框架，适合用于构建复杂的企业级 React 应用。通过其插件机制和丰富的配置选项，开发者可以快速上手并根据需求进行深度定制。