哈嘍，好久不見！

Umi 2 發(fā)布已經(jīng)是一年半之前的事了，在這段時(shí)間里，我們發(fā)現(xiàn)之前的架構(gòu)正逐漸不能滿足業(yè)務(wù)飛速發(fā)展的需要，于是我們重寫了一遍 Umi。經(jīng)過(guò)幾個(gè)月的 “007 ” 研發(fā)，Umi 3 在今天正式和大家見面了，并調(diào)整 slogan 為“插件化的企業(yè)級(jí)前端應(yīng)用框架”。

Umi 是什么？

有些朋友可能還不太了解 Umi。

Umi 是螞蟻金服的底層前端框架，已直接或間接地服務(wù)了 3000+ 應(yīng)用，包括 java、node、H5 無(wú)線、離線（Hybrid）應(yīng)用、純前端 assets 應(yīng)用、CMS 應(yīng)用等。他已經(jīng)很好地服務(wù)了我們的內(nèi)部用戶，同時(shí)希望他也能服務(wù)好外部用戶。

它包含以下特性：

• ?? 可擴(kuò)展，完整的生命周期，插件化，支持插件和插件集

• ?? 開箱即用，內(nèi)置路由、構(gòu)建、部署、測(cè)試等，僅需一個(gè)依賴即可上手

• ?? 企業(yè)級(jí)，經(jīng)螞蟻內(nèi)部 3000+ 項(xiàng)目以及阿里、優(yōu)酷、網(wǎng)易、飛豬、口碑等公司項(xiàng)目的驗(yàn)證

• ?? 大量自研，微前端、組件打包、文檔工具、請(qǐng)求庫(kù)、hooks 庫(kù)、數(shù)據(jù)流等

• ?? 完備路由，支持配置式路由和約定式路由，同時(shí)保持功能的完備性

• ?? 面向未來(lái)，一直在嘗試新技術(shù)的探索，dll 提速、modern mode、webpack@5、自動(dòng)化化 external、bundler less 等

Umi 3 改進(jìn)了什么？

徹底重寫的代碼和文檔，80%+ 的覆蓋率，~100M 的尺寸

Umi 2 隨著功能累加，Umi 越來(lái)越龐大。然后在 Umi 3 里，通過(guò)嚴(yán)格控制依賴包，以及統(tǒng)一依賴庫(kù)，比如請(qǐng)求庫(kù)只用 got，命令行參數(shù)解析庫(kù)只用 yargs 等等，我們把尺寸控制在了 100M 左右。

同時(shí)，我們?cè)谠O(shè)計(jì) Umi 3 的時(shí)候給予了更多分層，比如渲染器可以不是 react、打包工具也可以不是 webpack。為了和 webpack 解耦，連 Dev Server 都重新實(shí)現(xiàn)了一份。

官方插件、插件集和最佳實(shí)踐

與 Umi 3 同步發(fā)布的還有我們?yōu)?React 應(yīng)用準(zhǔn)備的官方插件集 @umijs/preset-react，他包含以下功能，

• plugin-access，權(quán)限管理

• plugin-analytics，統(tǒng)計(jì)管理

• plugin-antd，整合 antd UI 組件，新增一鍵切換暗色主題

• plugin-crossorigin，通常用于 JS 出錯(cuò)統(tǒng)計(jì)

• plugin-dva，整合 dva 數(shù)據(jù)流

• plugin-initial-state，初始化數(shù)據(jù)管理

• plugin-layout，配置啟用 ant-design-pro 的布局

• plugin-locale，國(guó)際化能力

• plugin-model，基于 hooks 的簡(jiǎn)易數(shù)據(jù)流

• plugin-request，基于 umi-request 和 umi-hooks 的請(qǐng)求方案

不知大家是否記得之前在《螞蟻前端研發(fā)最佳實(shí)踐》聊到我們針對(duì)中臺(tái)的一套垂直領(lǐng)域框架？他就包含在里面。比如：

• 建一個(gè) models 文件夾，就擁有了數(shù)據(jù)流能力，如果你寫的是 dva model，用 connect 使用，如果寫的是 hooks 數(shù)據(jù)流，通過(guò) useModel 使用

• 建一個(gè) locales 文件夾，就擁有了國(guó)際化能力，然后通過(guò) useIntl 使用

• 建一個(gè) access 文件夾，就擁有了權(quán)限管理能力，然后通過(guò) useAccess 使用

• 在 app.ts 里導(dǎo)出 getInitialState 方法，就擁有了初始化數(shù)據(jù)管理能力，然后通過(guò) useInitialState 使用

• 等等

更智能

比如 CSS Modules 的自動(dòng)識(shí)別，不用 .module.css 后綴，不會(huì)再配 disableCSSModules 和 cssModulesWithAffix，一個(gè)文件是否為 CSS Modules 由引用他的方式?jīng)Q定，

比如約定式路由會(huì)自動(dòng)識(shí)別 pages 下的文件是否為路由文件， dva 插件會(huì)自動(dòng)識(shí)別 models 下的文件是否為 dva model ，mock 目錄下的文件會(huì)自動(dòng)識(shí)別是否為有效的 mock 文件，可以避免我們之前在里面寫一個(gè) utils 或者其他文件時(shí)還需要配 exclude 規(guī)則的麻煩。

比如 Socket Server 無(wú)需再配置，之前如果配合 egg 或其他服務(wù)端時(shí)需要配回 umi 的 dev server；比如 cssPublicPath 無(wú)需再配置，會(huì)使用基于 css 文件的相對(duì)路徑。

比如配置和 MOCK 依賴文件的 ES6 支持，不僅僅是入口文件支持 es6，依賴的文件也會(huì)在運(yùn)行時(shí)做編譯以支持 ES6 的語(yǔ)法，讓大家更少踩坑。

Import “所有” from Umi

簡(jiǎn)單說(shuō)就是所有能力都從 umi 中 import 獲取，

↓ ↓ ↓

但如果僅僅是這樣，早就不是什么新鮮事了。我們還支持通過(guò)插件擴(kuò)展 import from umi 的能力，所以大家同時(shí)會(huì)看到很多這樣的用法，

一個(gè) import 語(yǔ)句搞定 “所有” 功能，同時(shí)有 TypeScript 提示支持，并且通過(guò) tree-shaking 保證尺寸不會(huì)無(wú)限增大。

目前有些例外，比如 antd、react 還不可以，請(qǐng)靜待之后的版本迭代。

改進(jìn)的約定式路由

主要有以下改進(jìn)點(diǎn)，

動(dòng)態(tài)路由之前用的 $ 在 Bash 下有其他含義，容易混淆，所以改用 [] 表示動(dòng)態(tài)路由，比如 [users]/[id].tsx 代表 /:users/:id，這也是 next.js 目前用的方式。

支持通過(guò)路由組件的導(dǎo)出擴(kuò)展屬性。比如按照以下這么寫，路由上會(huì)多一個(gè) title 屬性，

自動(dòng) exclude 掉非 React Component 的路由文件，這在前面以及介紹過(guò)了。

全新的插件體系

插件體系是 Umi 最重要的基建，因?yàn)榘?Umi 內(nèi)部實(shí)現(xiàn)也是全部由插件構(gòu)成。

• 支持 presets 和 plugins 分層，通過(guò)分層，可以更好地支持垂直域，因?yàn)榘岩恍┎寮M合在一起就可以應(yīng)對(duì)一個(gè)垂直域

• 底層異步化，每一個(gè) hook 的擴(kuò)展都既可以寫同步，也可以寫異步，這大大增加了靈活性，也不會(huì)在出現(xiàn) Umi 2 中一些帶 async 后綴的接口了，比如 onBuildSuccessAsync，onStartAsync，applyPluginsAsync 等等

• 支持調(diào)整插件和 hook 的執(zhí)行順序，執(zhí)行層基于 webpack 的 tappable，所以可以很好地支持通過(guò) before 和 stage 調(diào)整順序

• 支持描述啟用方式，由于場(chǎng)景的復(fù)雜性，一種啟用方式已經(jīng)不能滿足需求了，所以我們?cè)趦?nèi)核里支持描述插件是什么條件下啟用的，有掛載插件即啟用、配置啟用，以及通過(guò)函數(shù)自定義啟用時(shí)機(jī)的

還有不少，比如支持禁用插件，插件可感知其他插件等等，還有 Umi 3 的運(yùn)行態(tài)插件也做了不少改進(jìn)，插件體系是個(gè)很有意思的話題，篇幅有限，后續(xù)寫篇文章展開介紹下。

值得一提的是，Umi 3 的底層能力全部收斂在 @umijs/core，如果大家感興趣，可以用相同的插件體系、配置、utils、日志等快速構(gòu)建其他框架。

node_modules 走 babel 編譯

按目前社區(qū)的約定，大部分工具都是不編譯 node_modules 的，因?yàn)?node_modules 都默認(rèn)為 es5 格式，但是有些庫(kù)不這么做，所以帶來(lái)了一些問(wèn)題，

1. 壓縮問(wèn)題，uglifyjs 不識(shí)別 es6 語(yǔ)法，會(huì)報(bào)錯(cuò)

2. 舊版本瀏覽器兼容問(wèn)題，雖然上 terserjs 不報(bào)錯(cuò)了，但由于 es6 語(yǔ)法未編譯，在只能跑 es5 的舊版本瀏覽器里運(yùn)行時(shí)會(huì)報(bào)錯(cuò)

為此，我們還曾整理了 es5-imcompatible-versions 來(lái)區(qū)分哪些依賴庫(kù)是 es6 的，但總會(huì)有漏網(wǎng)之魚，并且每次都是出現(xiàn)了事后補(bǔ)充，也帶來(lái)了不少的答疑量。

所以，要徹底地解決此問(wèn)題，就需要讓 node_modules 下也走 babel 編譯。這會(huì)讓整體編譯速度變慢，但由于針對(duì) node_modules 下的 babel 插件是定制的，所以也不會(huì)慢多少。

除了能徹底解決上述問(wèn)題，還能帶來(lái)更多可能性。比如基于按需打補(bǔ)丁方案，之前沒有編譯 node_modules，特性收集肯定是不全的，現(xiàn)在就可以納入考慮范圍了。

全面擁抱 TypeScript

Umi 3 是基于 TypeScript 重寫的，很多類型定義通過(guò)打包就直接導(dǎo)出了。

然后，如果你編寫插件，現(xiàn)在也有了完整的 TypeScript 提示；對(duì)于最終用戶來(lái)說(shuō)，如果你想在寫配置時(shí)也有提示，可以通過(guò) umi 的 defineConfig 方法來(lái)定義配置，

其他

還有一些其他改進(jìn)，

• 大量依賴升級(jí)，基于全部升級(jí)到最新，babel@7.8，core-js@3，css-loader@2 等等

• 默認(rèn)無(wú)全局變量侵入，不再有 g_history、g_app、g_plugin 等等，這對(duì)于微前端來(lái)說(shuō)，更容易被接入

• 自研的 DevServer，更多可能性，比如之后某些配置項(xiàng)更改后只需重置 compiler 而無(wú)需重啟 dev server，比如和 webpack 解綁后可接入更多構(gòu)建工具

• 一鍵接入 webpack 5，通過(guò)插件 @umijs/plugin-webpack-5 實(shí)現(xiàn)，可臨時(shí)切換到 webpack 5 嘗鮮，啟用物理緩存后，二次啟動(dòng)快地飛起

• 統(tǒng)一路徑查起點(diǎn)，不管是 component、layout 還是 wrappers，全部從 pages 目錄開始找起

•  命令 umi inspect 更名為 umi webpack，可 inspect webpack 項(xiàng)目配置

• 新增 umi plugin 命令，可以對(duì)插件進(jìn)行 list 等操作

• 集中管理 babel 插件，通過(guò) @umijs/babel-preset-umi 完成，包含所有常用 babel 插件，通過(guò)配置滿足不同需求

One more thing! DUMI, 嘟米，React 生態(tài)的文檔工具

顯然，這個(gè)命名已經(jīng)透露了它和 Umi 的關(guān)系。dumi（嘟米）是基于 Umi 打造、為組件開發(fā)場(chǎng)景而生的文檔工具，用大實(shí)話講，dumi 就是可以用來(lái)寫文檔、官網(wǎng)和組件庫(kù) Demo 的 Umi。

沒錯(cuò)，dumi 基于 Umi 3 打造，Umi 3 的官網(wǎng)基于 dumi 搭建，Umi 生態(tài)中又新添一名成員 :P

但 dumi 從發(fā)芽到現(xiàn)在，也不過(guò)百日，仍然有許多成長(zhǎng)的空間，而且我們未來(lái)還有許多的想法計(jì)劃將組件開發(fā)這件事做得更深，例如將 dumi 的 Demo 生產(chǎn)端和 Umi UI 的資產(chǎn)消費(fèi)鏈路打通、為移動(dòng)端組件開發(fā)打造移動(dòng)端模式等等，倘若我們志同道合，真誠(chéng)地邀請(qǐng)你和我們一起將 dumi 變得更好：https://github.com/umijs/dumi

三分鐘上手 Umi

手動(dòng)創(chuàng)建文件，

或者通過(guò)腳手架快速上手。

升級(jí)到 Umi 3

參考文檔《升級(jí)到 Umi 3》（https:///docs/upgrade-to-umi-3）。

反饋

釘釘群。

微信群。

最后

感謝所有參與貢獻(xiàn) umi 以及在項(xiàng)目中使用了 umi 的內(nèi)外部同學(xué)。umi 需要大家的使用和貢獻(xiàn)，很希望你能一起來(lái)完善他，我們 Github 見！??