javascript
react router官方文档_阿里开源可插拔 React 跨端框架 UmiJS
點擊上方“開發者技術前線”，選擇“星標”
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python源码包安装_源码包安装pyt
- 下一篇： 从数据类型 nvarchar 转换为 n