前端React 框架- UmiJS有據說過嗎？

時間 2019-11-21

標籤前端 react 框架 umijs 據說欄目 React 简体版

原文原文鏈接

介紹

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

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

特性

? 開箱即用，內置 react、react-router 等前端
? 類 next.js 且功能完備的路由約定，同時支持配置的路由方式java
? 完善的插件體系，覆蓋從源碼到構建產物的每一個生命週期node
? 高性能，經過插件支持 PWA、以路由爲單元的 code splitting 等react
? 支持靜態頁面導出，適配各類環境，好比中臺業務、無線業務、egg 、支付寶錢包、雲鳳蝶等webpack
? 開發啓動快，支持一鍵開啓 dll 和 hard-source-webpack-plugin 等web
? 一鍵兼容到 IE9 ，基於 umi-plugin-polyfillsnpm
? 完善的 TypeScript 支持，包括 d.ts 定義和 umi testwindows
? 與 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 的使用經驗，應該會有點眼熟吧。