UmiJS 是一个 react 开发框架-技术圈

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