以往搭建React應(yīng)用時(shí)往往使用官方推薦的 # create-react-app 不過(guò)使用官方的腳手架往往不能很好的適應(yīng)我們現(xiàn)有的項(xiàng)目，比如我們要集合webpack打包？我們要引入Redux狀態(tài)管理器？Umi （烏米）框架應(yīng)運(yùn)而生涯肩。
讓我們來(lái)看看官方的自我介紹：
umi 以路由為基礎(chǔ)的顷牌，支持類 next.js 的約定式路由，以及各種進(jìn)階的路由功能敢朱，并以此進(jìn)行功能擴(kuò)展，比如支持路由級(jí)的按需加載摩瞎。然后配以完善的插件體系拴签，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求旗们，目前內(nèi)外部加起來(lái)已有 50+ 的插件蚓哩。
再讓我們看看Umi的特色：
- ?? 開(kāi)箱即用，內(nèi)置 react上渴、react-router 等
- ?? 類 next.js 且功能完備的路由約定岸梨，同時(shí)支持配置的路由方式
- ?? 完善的插件體系喜颁，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期
- ?? 高性能，通過(guò)插件支持 PWA曹阔、以路由為單元的 code splitting 等
- ?? 支持靜態(tài)頁(yè)面導(dǎo)出半开，適配各種環(huán)境，比如中臺(tái)業(yè)務(wù)赃份、無(wú)線業(yè)務(wù)稿茉、egg、支付寶錢包芥炭、云鳳蝶等
- ?? 開(kāi)發(fā)啟動(dòng)快漓库，支持一鍵開(kāi)啟 dll 等
- ?? 一鍵兼容到 IE9，基于 umi-plugin-polyfills
- ?? 完善的 TypeScript 支持园蝠，包括 d.ts 定義和 umi test
- ?? 與 dva 數(shù)據(jù)流的深入融合渺蒿，支持 duck directory、model 的自動(dòng)加載彪薛、code splitting 等等
搭建流程
現(xiàn)在我們自己手動(dòng)搭建一套完整可用的Umi框架吧
第一步：環(huán)境檢測(cè)及安裝
首先需要node, 并確保 node 版本是 8.10 或以上茂装。（mac 下推薦使用 nvm 來(lái)管理 node 版本）
而包管理器，這里推薦使用使用 yarn 管理 npm 依賴
1.安裝yarn
可根據(jù)官網(wǎng)介紹選擇安裝方式 https://yarnpkg.com/zh-Hans/docs/install#windows-stable
2.全局安裝 umi善延，并確保版本是 2.0.0 或以上少态。
$ yarn global add umi
第二步：通過(guò)腳手架創(chuàng)建項(xiàng)目
umi 通過(guò) create-umi 提供腳手架能力
- 在需要生成項(xiàng)目的文件夾下，打開(kāi)CMD or 終端 命令行輸入 yarn create umi
$ yarn create umi
- 選擇需要生成的項(xiàng)目類型
? Select the boilerplate type (Use arrow keys)
ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
? app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
- app易遣，通用項(xiàng)目腳手架彼妻，支持選擇是否啟用 TypeScript，以及 umi-plugin-react 包含的功能
- ant-design-pro豆茫，僅包含 ant-design-pro 布局的腳手架侨歉，具體頁(yè)面可通過(guò) umi block 添加
- block，區(qū)塊腳手架
- plugin揩魂，插件腳手架
-
library幽邓，依賴（組件）庫(kù)腳手架，基于 umi-plugin-library
在此我們 上下箭頭切換到 app 并回車確定選擇火脉。
- 其他選項(xiàng)
此時(shí)會(huì)出現(xiàn)提示是否需要支持Typescript, 可根據(jù)實(shí)際項(xiàng)目開(kāi)發(fā)情況選擇是否使用牵舵。
? Do you want to use typescript? (y/N)
選擇Typescript支持后再選擇你需要的功能（多選），功能介紹詳見(jiàn) plugin/umi-plugin-react倦挂。
? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
?? antd
? dva
? code splitting
? dll
同樣按上下箭頭移動(dòng)畸颅，并按 空格 鍵選中需要的功能。
antd: UI框架妒峦，啟用后實(shí)現(xiàn)antd, antd-mobile 和 antd-pro 的按需編譯重斑，無(wú)需要手動(dòng)配置。
dva: 基于 redux 和 redux-saga 的數(shù)據(jù)流方案肯骇，然后為了簡(jiǎn)化開(kāi)發(fā)體驗(yàn)窥浪，dva 還額外內(nèi)置了 react-router 和 fetch，所以也可以理解為一個(gè)輕量級(jí)的應(yīng)用框架
code splitting: 是否代碼分包
dll: 通過(guò) webpack 的 dll 插件預(yù)打包一份 dll 文件來(lái)達(dá)到二次啟動(dòng)提速的目的
注意 此處多選項(xiàng)未選擇笛丙，后期也可以在配置文件中配置漾脂。
確定后，會(huì)根據(jù)你的選擇自動(dòng)創(chuàng)建好目錄和文件胚鸯。
第三步：運(yùn)行及編譯
安裝依賴
$ yarn
啟動(dòng)項(xiàng)目
$ yarn start
這樣我們就可以愉快的開(kāi)發(fā)和調(diào)試了骨稿。
當(dāng)我們開(kāi)發(fā)好要編譯項(xiàng)目發(fā)布測(cè)試or生產(chǎn)時(shí)，執(zhí)行：
$ yarn build
目錄結(jié)構(gòu)說(shuō)明
.
├── dist/ // 默認(rèn)的 build 輸出目錄
├── mock/ // mock 文件所在目錄姜钳，基于 express
├── config/
├── config.js // umi 配置坦冠，同 .umirc.js，二選一哥桥， 建議配置.umirc.js
└── src/ // 源碼目錄辙浑，可選
├── layouts/index.js // 全局布局
├── pages/ // 頁(yè)面目錄，里面的文件即路由
├── .umi/ // dev 臨時(shí)目錄拟糕，需添加到 .gitignore
├── .umi-production/ // build 臨時(shí)目錄判呕，會(huì)自動(dòng)刪除
├── document.ejs // HTML 模板
├── 404.js // 404 頁(yè)面
├── page1.js // 頁(yè)面 1，任意命名送滞，導(dǎo)出 react 組件
├── page1.test.js // 用例文件侠草，umi test 會(huì)匹配所有 .test.js 和 .e2e.js 結(jié)尾的文件
└── page2.js // 頁(yè)面 2，任意命名
├── global.css // 約定的全局樣式文件犁嗅，自動(dòng)引入边涕，也可以用 global.less
├── global.js // 可以在這里加入 polyfill
├── app.js // 運(yùn)行時(shí)配置文件
├── .umirc.js // umi 配置，同 config/config.js褂微，二選一
├── .umirc.js // umi 配置奥吩，同 config/config.js，二選一
├── .env // 環(huán)境變量
└── package.json
開(kāi)發(fā)提示
.umirc.js 配置蕊梧，
該文件中可以配置項(xiàng)目基本情況霞赫，如上面安裝步驟中出現(xiàn)是否選用antd, dva等，在此文件中都可以更改為true, 另外還可以配置 webpack 打包配置肥矢，具體的配置項(xiàng)詳見(jiàn).umirc.js 配置端衰。
設(shè)置.umirc.local.js 文件
由于.umirc里的配置眾多而且為了優(yōu)化項(xiàng)目必然會(huì)分包代碼抽離等，而在本地運(yùn)行時(shí)無(wú)需這些甘改，便可配置.umirc.local.js 文件旅东，注意此文件中的選項(xiàng)配置和.umirc.js 配置一樣，不要提交到 git十艾，所以通常需要配置到 .gitignore抵代。本地運(yùn)行時(shí)會(huì)和 .umirc.js 合并后再返回。
由于umi 會(huì)根據(jù) pages 目錄自動(dòng)生成路由配置忘嫉，所以無(wú)需要手動(dòng)配置路由荤牍，會(huì)根據(jù) src / pages 下 文件名自動(dòng)生成路由案腺，但是你也可以配置.umirc.js中的 routes 屬性，此配置項(xiàng)存在時(shí)則不會(huì)對(duì) src/pages 目錄做約定式的解析康吵。
常用路由操作
import React, { PureComponent } from 'react';
import Link from 'umi/link';
import router from 'umi/router';
class Examples extends PureComponent {
render () {
return (
<>
{/* 普通使用 */}
<Link to="/list">跳轉(zhuǎn)</Link>
{/* 帶參數(shù) */}
<Link to="/list?a=b">跳轉(zhuǎn)</Link>
{/* 包含子組件 */}
<Link to="/list?a=b"><button>跳轉(zhuǎn)</button></Link>
{/* 點(diǎn)擊跳轉(zhuǎn) */}
<button onClick={() => router.push('/list')}>跳轉(zhuǎn)</button>
</>
)
}
}
export default Examples;
更多查看路由配置
最后
umi框架為我們開(kāi)發(fā)項(xiàng)目提升了效率劈榨，而其本身也在不斷的升級(jí)完善中，在2.8.0+版本晦嵌，umi 可配置ssr 服務(wù)器端渲染同辣，相信umi還將越來(lái)越完善。
更多查看官方文檔https://umijs.org/
