​

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
```

​