《開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦是一個企業(yè)級前端開發(fā)框架——Umi。
Umi，中文發(fā)音為「烏米」，是可擴(kuò)展的企業(yè)級前端應(yīng)用框架。Umi 以路由為基礎(chǔ)的，同時支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求。
Umi 是螞蟻集團(tuán)的底層前端框架，已直接或間接地服務(wù)了 10000+ 應(yīng)用，包括 JAVA、Node、H5 無線、離線（Hybrid）應(yīng)用、純前端 assets 應(yīng)用、CMS 應(yīng)用、Electron 應(yīng)用、Serverless 應(yīng)用等。他已經(jīng)很好地服務(wù)了我們的內(nèi)部用戶，同時也服務(wù)了不少外部用戶，包括淘系、飛豬、阿里云、字節(jié)、騰訊、口碑、美團(tuán)等。
主要特性
- 開箱即用：內(nèi)置路由、構(gòu)建、部署、測試、Lint 等，僅需一個 Umi 依賴即可上手開發(fā)。
- 企業(yè)級：螞蟻集團(tuán) 10000+ 應(yīng)用的選擇。同時也在阿里、字節(jié)、騰訊、網(wǎng)易、美團(tuán)、快手等公司有大量應(yīng)用。
- 最佳實(shí)踐：內(nèi)置微前端、數(shù)據(jù)流、權(quán)限、國際化、icons 方案、埋點(diǎn)、antd、請求、css 方案、圖表等最佳實(shí)踐。
- 可擴(kuò)展：Umi 實(shí)現(xiàn)了 web 應(yīng)用開發(fā)的完整生命周期，并使之插件化，包括 Umi 內(nèi)部功能也是全由插件實(shí)現(xiàn)的。
- 完備路由：基于 react Router 6，類 Remix，支持嵌套、動態(tài)、動態(tài)可選、預(yù)加載、基于路由的請求優(yōu)化等。
- 默認(rèn)快：MFSU 解 Webpack 編譯慢的問題，通過 esbuild 解壓縮、配置、測試的性能問題，還有運(yùn)行時...
- 雙構(gòu)建引擎：提供 Vite 和 Webpack 兩種構(gòu)建模式供開發(fā)者選擇，并盡可能保證他們之間功能的一致性。
- 依賴預(yù)打包：Umi 針對依賴做了預(yù)打包處理，徹底地鎖定依賴，定期更新，讓框架的每個版本在 10 年后依舊可用。
設(shè)計(jì)思路
技術(shù)收斂：技術(shù)收斂對團(tuán)隊(duì)而言尤其重要，他包含兩層含義，1）技術(shù)棧收斂 2）依賴收斂。技術(shù)棧收斂指社區(qū)那么多技術(shù)棧，每個技術(shù)方向都有非常多選擇，比如數(shù)據(jù)流應(yīng)該就不下 100 種，開發(fā)者應(yīng)該如何選擇；收斂了技術(shù)棧之后還需要收斂依賴，團(tuán)隊(duì)中，開發(fā)者的項(xiàng)目不應(yīng)該有很多細(xì)碎的依賴，每一個依賴都附帶著升級成本。
我們希望開發(fā)者依賴 Umi 之后就無需關(guān)心 babel、webpack、postcss、react、react-router 等依賴，而依賴 @umijs/max 之后無需再關(guān)心開發(fā)中臺項(xiàng)目的依賴和技術(shù)棧。
插件和插件集：Umi 通過提供插件和插件集的機(jī)制來滿足不同場景和業(yè)務(wù)的需求。插件是為了擴(kuò)展一個功能，而插件集是為了擴(kuò)展一類業(yè)務(wù)。比如要支持 vue，我們可以有 @umijs/preset-vue，包含 vue 相關(guān)的構(gòu)建和運(yùn)行時；比如要支持 h5 的應(yīng)用類型，可以有 @umijs/preset-h5，把 h5 相關(guān)的功能集合到一起。
如果要類比，插件集和 babel 的 preset，以及 eslint 的 config 都類似。
企業(yè)級：npm 社區(qū)「世風(fēng)日下」，涉政包、惡意包、廣告求職包頻出，所以如何確保不會「睡一覺醒來項(xiàng)目掛了」是面對企業(yè)生成提供服務(wù)的框架繞不開的一個點(diǎn)。
Umi 通過寫死版本、依賴預(yù)打包、通過 eslint hack 鎖定 eslint 依賴，通過配置鎖定 babel 補(bǔ)丁依賴等方式，讓 Umi 不會在你重裝 node_modules 之后就掛掉，并以此來實(shí)現(xiàn)「十年后依舊可用」。
import all from umi：很多人可能都第一次聽到。import all from umi 意思是所有 import 都來自 umi。比如 dva 不是 import { connect } from 'dva'，而是 import { connect } from 'umi'，從 umi 中導(dǎo)出。導(dǎo)出的方法不僅來自 umi 自身，還來自 umi 插件。
這是兩年前 Umi 3 加的功能，最近發(fā)現(xiàn) Remix、prisma、vitekit 等框架和工具都有類似實(shí)現(xiàn)。
// 大量插件為 umi 提供額外導(dǎo)出內(nèi)容 import { connect, useModel, useIntl, useRequest, MicroApp, ... } from 'umi';
這帶來的好處是。通過 Umi 將大量依賴管理起來，用戶無需手動安裝；同時開發(fā)者在代碼中也會少很多 import 語句。
快速上手
環(huán)境準(zhǔn)備：首先得有 node，并確保 node 版本是 14 或以上。
創(chuàng)建項(xiàng)目：
先找個地方建個空目錄。
$ mkdir myapp && cd myapp
使用 NPM 創(chuàng)建項(xiàng)目，
$ npx create-umi@latest Need to install the following packages: create-umi@latest Ok to proceed? (y) y ? Pick Umi App Template › Simple App ? Pick Npm Client › npm ? Pick Npm Registry › taobao Write: .gitignore Write: .npmrc Write: .umirc.ts Write: package.json Copy: src/assets/yay.jpg Copy: src/layouts/index.less Write: src/layouts/index.tsx Copy: src/pages/docs.tsx Copy: src/pages/index.tsx Write: tsconfig.json Copy: typings.d.ts > postinstall > umi setup
參數(shù)選項(xiàng)：
使用 create-umi 創(chuàng)建項(xiàng)目時，可用的參數(shù)如下：
- --no-git 創(chuàng)建項(xiàng)目，但不初始化 Git
- --no-install 創(chuàng)建項(xiàng)目，但不自動安裝依賴
啟動項(xiàng)目：
執(zhí)行 pnpm dev 命令，
$ pnpm dev ╔═════════════════════════════════════════════════════╗ ║ App listening at: ║ ║ > Local: https://127.0.0.1:8001 ║ ready - ║ >.NETwork: https://192.168.1.1:8001 ║ ║ ║ ║ Now you can open browser with the above addresses ║ ╚═════════════════════════════════════════════════════╝ event - compiled successfully in 1121 ms (388 modules) event - MFSU compiled successfully in 1308 ms (875 modules)
在瀏覽器里打開 http://localhost:8000/，能看到以下界面，
開源協(xié)議：MIT
開源地址：https://github.com/umijs/umi
