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 目录部署到服务器上了。
相关资源
- 官方文档：
-
Ant Design Pro：
- Ant Design Pro 官方文档
- GitHub 仓库：
Umi 是一个功能强大且灵活的框架，适合用于构建复杂的企业级 React 应用。通过其插件机制和丰富的配置选项，开发者可以快速上手并根据需求进行深度定制。
网友评论