點擊上方“開發者技術前線”，選擇“星標”

18：30 在看?真愛

作者：Tamic??|? 編輯：?可可

阿里之前開源：阿里閑魚開源 Flutter 應用框架 Fish Redux！?今天介紹的是前端React 框架- UmiJS。

介紹

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

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

特性

• ??開箱即用，內置 react、react-router 等

• ??類 next.js 且功能完備的路由約定，同時支持配置的路由方式

• ??完善的插件體系，覆蓋從源碼到構建產物的每個生命周期

• ??高性能，通過插件支持 PWA、以路由為單元的 code splitting 等

• ??支持靜態頁面導出，適配各種環境，比如中臺業務、無線業務、egg、支付寶錢包、云鳳蝶等

• ??開發啟動快，支持一鍵開啟?dll?和?hard-source-webpack-plugin?等

• ??一鍵兼容到 IE9，基于?umi-plugin-polyfills

• ??完善的 TypeScript 支持，包括 d.ts 定義和 umi test

• ??與?dva?數據流的深入融合，支持 duck directory、model 的自動加載、code splitting 等等

架構圖

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

市面上的框架基本都是從源碼到構建產物，很少會考慮到各種發布流程，而 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 生成 + 完善的插件機制，所以能在提升開發者效率方面發揮出更大的價值。

安裝

入門非常簡單

e

# 新建頁面

$ umi generate page index

# 本地開發

$ umi dev

# 構建上線

$ umi build

環境準備

首先得有 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

腳手架

先找個地方建個空目錄。

$ 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 (

Page index

+ <Link to="/users">go to /usersLink>

);

}

再修改 pages/users.js，

+ import router from 'umi/router';

import styles from './index.css';

export default function() {

return (

Page index

+ { router.goBack(); }}>go back

);

}

然后瀏覽器驗證，應該已經可以在 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

配置檢查

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

$ umi inspect

Options:

--mode specify env mode (development or production, default is development)

--rule inspect a specific module rule

--plugin inspect a specific plugin

--rules list all module rule names

--plugins list all plugin names

--verbose show full function definitions in outpu

官方文檔

中文文檔：https://umijs.org/zh/

Github：https://github.com/umijs/umi

END

開發者技術前線?，匯集技術前線快訊和關注行業趨勢，大廠干貨，是開發者經歷和成長的優秀指南。

歷史閱讀

互聯網江湖，從此再無 BAT

當年的三本學渣，最后 6 家大廠還不是隨便進了

學不動了 ，京東跨端移動開發平臺 Ares 發布！

喜歡就點個好看吧

總結

以上是生活随笔為你收集整理的react router官方文档_阿里开源可插拔 React 跨端框架 UmiJS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。