UmiJS可插拔的企業級 react 應用框架，配合ant-design-pro使用

入門非常簡單

# 安裝 $ yarn global add umi # 或者 npm install -g umi # 新建應用 $ mkdir myapp && cd myapp # 新建頁面 $ umi generate page index # 本地開發 $ umi dev # 構建上線 $ umi build

介紹

umi，中文可發音為烏米，是一個可插拔的企業級 react 應用框架。umi 以路由為基礎的，支持類 next.js 的約定式路由，以及各種進階的路由功能，並以此進行功能擴展，比如支持路由級的按需加載。然后配以完善的插件體系，覆蓋從源碼到構建產物的每個生命周期，支持各種功能擴展和業務需求，目前內外部加起來已有 50+ 的插件。

umi 是螞蟻金服的底層前端框架，已直接或間接地服務了 600+ 應用，包括 java、node、H5 無線、離線（Hybrid）應用、純前端 assets 應用、CMS 應用等。他已經很好地服務了我們的內部用戶，同時希望他也能服務好外部用戶。

#特性

• 📦 開箱即用，內置 react、react-router 等
• 🏈 類 next.js 且功能完備的路由約定，同時支持配置的路由方式
• 🎉 完善的插件體系，覆蓋從源碼到構建產物的每個生命周期
• 🚀 高性能，通過插件支持 PWA、以路由為單元的 code splitting 等
• 💈 支持靜態頁面導出，適配各種環境，比如中台業務、無線業務、egg、支付寶錢包、雲鳳蝶等
• 🚄 開發啟動快，支持一鍵開啟 dll 等
• 🐠 一鍵兼容到 IE9，基於 umi-plugin-polyfills
• 🍁 完善的 TypeScript 支持，包括 d.ts 定義和 umi test
• 🌴 與 dva 數據流的深入融合，支持 duck directory、model 的自動加載、code splitting 等等

#架構

下圖是 umi 的架構圖。

#從源碼到上線的生命周期管理

市面上的框架基本都是從源碼到構建產物，很少會考慮到各種發布流程，而 umi 則多走了這一步。

下圖是 umi 從源碼到上線的一個流程。

umi 首先會加載用戶的配置和插件，然后基於配置或者目錄，生成一份路由配置，再基於此路由配置，把 JS/CSS 源碼和 HTML 完整地串聯起來。用戶配置的參數和插件會影響流程里的每個環節。

#他和 dva、roadhog 是什么關系？

簡單來說，

• roadhog 是基於 webpack 的封裝工具，目的是簡化 webpack 的配置
• umi 可以簡單地理解為 roadhog + 路由，思路類似 next.js/nuxt.js，輔以一套插件機制，目的是通過框架的方式簡化 React 開發
• dva 目前是純粹的數據流，和 umi 以及 roadhog 之間並沒有相互的依賴關系，可以分開使用也可以一起使用，個人覺得 umi + dva 是比較搭的

#為什么不是...?

#next.js

next.js 的功能相對比較簡單，比如他的路由配置並不支持一些高級的用法，比如布局、嵌套路由、權限路由等等，而這些在企業級的應用中是很常見的。相比 next.js，umi 在約定式路由的功能層面會更像 nuxt.js 一些。

#roadhog

roadhog 是比較純粹的 webpack 封裝工具，作為一個工具，他能做的就比較有限（限於 webpack 層）。而 umi 則等於 roadhog + 路由 + HTML 生成 + 完善的插件機制，所以能在提升開發者效率方面發揮出更大的價值。

快速上手

更喜歡觀看視頻？可以點此觀看

#環境准備

首先得有 node，並確保 node 版本是 8.10 或以上。（mac 下推薦使用 nvm 來管理 node 版本）

$ node -v
8.1x 

推薦使用 yarn 管理 npm 依賴，並使用國內源（阿里用戶使用內網源）。

# 國內源 $ npm i yarn tyarn -g # 后面文檔里的 yarn 換成 tyarn $ tyarn -v # 阿里內網源 $ tnpm i yarn @ali/yarn -g # 后面文檔里的 yarn 換成 ayarn $ ayarn -v 

然后全局安裝 umi，並確保版本是 2.0.0 或以上。

$ yarn global add umi $ umi -v 2.0.0 

FAQ：如果提示 umi: command not found，你需要將 yarn global bin 路徑配置到環境變量中，方法如下：

# mac 系統: $ sudo vi ~/.bash_profile # 在 .bash_profile 中添加下面一行： export PATH="$PATH:`yarn global bin`" # windows系統: # 獲取 global bin 的路徑 $ yarn global bin C:\Users\Administrator\AppData\Local\Yarn\bin # 復制上面的 global bin 的路徑，添加到系統環境變量 PATH。 

#腳手架

先找個地方建個空目錄。

$ mkdir myapp && cd myapp 

然后通過 umi g 創建一些頁面，

$ umi g page index
$ umi g page users 

umi g 是 umi generate 的別名，可用於快速生成 component、page、layout 等，並且可在插件里被擴展，比如 umi-plugin-dva 里擴展了 dva:model，然后就可以通過 umi g dva:model foo 快速 dva 的 model。

然后通過 tree 查看下目錄，（windows 用戶可跳過此步）

$ tree
. └── pages ├── index.css ├── index.js ├── users.css └── users.js 

這里的 pages 目錄是頁面所在的目錄，umi 里約定默認情況下 pages 下所有的 js 文件即路由，如果有 next.js 或 nuxt.js 的使用經驗，應該會有點眼熟吧。

然后啟動本地服務器，

$ umi dev

#約定式路由

啟動 umi dev 后，大家會發現 pages 下多了個 .umi 的目錄。這是啥？這是 umi 的臨時目錄，可以在這里做一些驗證，但請不要直接在這里修改代碼，umi 重啟或者 pages 下的文件修改都會重新生成這個文件夾下的文件。

然后我們在 index 和 users 直接加一些路由跳轉邏輯。

先修改 pages/index.js，

+ import Link from 'umi/link'; import styles from './index.css'; export default function() {  return ( <div className={styles.normal}> <h1>Page index</h1> + <Link to="/users">go to /users</Link>  </div> ); } 

再修改 pages/users.js，

+ import router from 'umi/router'; import styles from './index.css'; export default function() {  return ( <div className={styles.normal}> <h1>Page index</h1> + <button onClick={() => { router.goBack(); }}>go back</button>  </div> ); } 

然后瀏覽器驗證，應該已經可以在 index 和 users 兩個頁面之間通過路由跳轉了。

#部署發布

#構建

執行 umi build，

$ umi build

DONE  Compiled successfully in 1729ms File sizes after gzip: 68.04 KB dist/umi.js 83 B dist/umi.css 

構建產物默認生成到 ./dist 下，然后通過 tree 命令查看，(windows 用戶可忽略此步）

$ tree ./dist
./dist
├── index.html
├── umi.css
└── umi.js

#本地驗證

發布之前，可以通過 serve 做本地驗證，

$ yarn global add serve $ serve ./dist Serving! - Local: http://localhost:5000 - On Your Network: http://{Your IP}:5000 Copied local address to clipboard! 

訪問 http://localhost:5000，正常情況下應該是和 umi dev 一致的。

#部署

本地驗證完，就可以部署了，這里通過 now 來做演示。

$ yarn global add now $ now ./dist > Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng > Synced 3 files (301.93KB) [2s] > https://dist-jtckzjjatx.now.sh [in clipboard] [1s] > Deployment complete! 

然后打開相應的地址就能訪問到線上的地址了。

#測試與配置檢查

#測試

umi 內置了基於 jest 的測試工具 umi-test ：

$ umi test Options: --coverage indicates that test coverage information should be collected and reported in the output --collectCoverageFrom=<glob> a glob pattern relative to matching the files that coverage info needs to be collected from, e.g, --collectCoverageFrom=src/**/*.js --detectLeaks debug memory leaks 

#配置檢查

使用 umi inspect 列出配置項的內容用以檢查：

$ umi inspect

Options:

    --mode                specify env mode (development or production, default is development) --rule <ruleName> inspect a specific module rule --plugin <pluginName> inspect a specific plugin --rules list all module rule names --plugins list all plugin names --verbose show full function definitions in output