哈嘍，好久不見！

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

Umi 是什么？

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

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

它包含以下特性：

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

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

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

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

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

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

Umi 3 改進了什么？

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

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

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

官方插件、插件集和最佳實踐

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

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

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

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

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

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

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

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

• plugin-locale，國際化能力

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

• plugin-request，基于 umi-request 和 umi-hooks 的請求方案

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

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

• 建一個 locales 文件夾，就擁有了國際化能力，然后通過 useIntl 使用

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

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

• 等等

更智能

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

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

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

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

Import “所有” from Umi

簡單說就是所有能力都從 umi 中 import 獲取，

↓ ↓ ↓

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

一個 import 語句搞定 “所有” 功能，同時有 TypeScript 提示支持，并且通過 tree-shaking 保證尺寸不會無限增大。

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

改進的約定式路由

主要有以下改進點，

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

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

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

全新的插件體系

插件體系是 Umi 最重要的基建，因為包括 Umi 內(nèi)部實現(xiàn)也是全部由插件構(gòu)成。

• 支持 presets 和 plugins 分層，通過分層，可以更好地支持垂直域，因為把一些插件組合在一起就可以應(yīng)對一個垂直域

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

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

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

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

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

node_modules 走 babel 編譯

按目前社區(qū)的約定，大部分工具都是不編譯 node_modules 的，因為 node_modules 都默認為 es5 格式，但是有些庫不這么做，所以帶來了一些問題，

1. 壓縮問題，uglifyjs 不識別 es6 語法，會報錯

2. 舊版本瀏覽器兼容問題，雖然上 terserjs 不報錯了，但由于 es6 語法未編譯，在只能跑 es5 的舊版本瀏覽器里運行時會報錯

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

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

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

全面擁抱 TypeScript

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

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

其他

還有一些其他改進，

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

• 默認無全局變量侵入，不再有 g_history、g_app、g_plugin 等等，這對于微前端來說，更容易被接入

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

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

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

•  命令 umi inspect 更名為 umi webpack，可 inspect webpack 項目配置

• 新增 umi plugin 命令，可以對插件進行 list 等操作

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

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

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

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

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

三分鐘上手 Umi

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

或者通過腳手架快速上手。

升級到 Umi 3

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

反饋

釘釘群。

微信群。

最后

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