Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系前端培训,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。
它主要具备以下功能:
1、可扩展,Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。
2、开箱即用,Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。
为什么不是?create-react-app
create-react-app 是基于 webpack 的打包层方案,包含 build、dev、lint 等,他在打包层把体验做到了极致,但是不包含路由,不是框架,也不支持配置。所以,如果大家想基于他修改部分配置,或者希望在打包层之外也做技术收敛时,就会遇到困难。
```
# 创建目录
$ mkdir myapp && cd myapp
# 安装依赖
$ yarn add umi
# 创建页面
$ npx umi g page index --typescript --less
# 启动开发
$ npx umi dev
```
目录约定
```
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录,基于 express
├── config/
├── config.js // umi 配置,同 .umirc.js,二选一
└── src/ // 源码目录,可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录,里面的文件即路由
├── .umi/ // dev 临时目录,需添加到 .gitignore
├── .umi-production/ // build 临时目录,会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1,任意命名,导出 react 组件
├── page1.test.js // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2,任意命名
├── global.css // 约定的全局样式文件,自动引入,也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── .umirc.js // umi 配置,同 config/config.js,二选一
├── .env // 环境变量
└── package.json
```
除配置式路由外,Umi 也支持约定式路由。约定式路由也叫文件路由,就是不需要手写配置,文件系统即路由,通过目录和文件及其命名分析出路由配置。
如果没有 routes 配置,Umi 会进入约定式路由模式,然后分析 src/pages 目录拿到路由配置。
约定 src/layouts/index.js 为全局路由,返回一个 React 组件,通过 props.children 渲染子组件。
```
└── src
├── layouts
│ └── index.tsx
└── pages
├── index.tsx
└── users.tsx
```
一个自定义的全局 layout 如下:
```
import React from 'react'
import { IRouteComponentProps, Link } from 'umi'
export default function Layout({ children, location, route, history, match }: IRouteComponentProps) {
// return children
return (
<>
<nav>
<div>
<div>
<ul>
<li><Link to="/" >首页</Link></li>
<li><Link to="/user" >用户管理</Link></li>
<li><Link to="/profile">个人设置</Link></li>
</ul>
</div>
</div>
</nav>
<div>
<div>
<div>
{ children }
</div>
</div>
</div>
</>
)
}
```
Umi 里约定目录下有 _layout.tsx 时会生成嵌套路由,以 _layout.tsx 为该目录的 layout。layout 文件需要返回一个 React 组件,并通过 props.children 渲染子组件。
比如以下目录结构,
```
└── pages
└── users
├── _layout.tsx
├── index.tsx
└── list.tsx
```