Umi 4發(fā)布了
本文適合覺得使用umi，或者對umi感興趣的小伙伴閱讀。
歡迎關注前端早茶，與廣東靚仔攜手共同進階～
一、前言
本文基于開源項目：
https://github.com/umijs/umi-next
https://umijs.org/
?? 新官網(wǎng)和文檔 ?? MFSU V3 & 默認開啟 ?? 雙構建引擎和 ESMi ?? Webpack 5 ????♂? React Router 6 & 新路由 ?? 最佳實踐迭代 ??? 依賴預打包 ?? Umi Max ?? Low Import 研發(fā)模式 ?? 強約束功能集成 ?? Import All From Umi 迭代 ?? srcTranspiler 和 depTranspiler ?? jsMinifier 和 cssMinifier ?? 應用元數(shù)據(jù) ?? 微生成器 ?? 貼心小改進
二、Umi 4 帶來了哪些改變
新官網(wǎng)
MFSU V3 & 默認開啟
雙構建引擎和 ESMi
Webpack 5
React Router 6 & 新路由
- { props.children }
+ <Outlet API 路由
export default {
apiRoute: {},
Low Import 研發(fā)模式
支持 Vue
export default {
presets: ['@umijs/preset-vue'],
}
微生成器
$ npx umi g
? Pick generator type ? - Use arrow-keys. Return to submit.
? 創(chuàng)建頁面 -- Create a umi page by page name
創(chuàng)建組件 -- .
創(chuàng)建 mock 代碼 -- .
創(chuàng)建 model 代碼 -- .
啟用 Prettier -- Setup Prettier Configurations
啟用 Jest -- Setup Jest Configuration
啟用 E2E 測試 -- .
啟用 Tailwind CSS -- Setup Tailwind CSS configuration
啟用 SSR -- .
啟用 Low Import 研發(fā)模式 -- .
啟用權限方案 -- .
啟用 Monaco 編輯器 -- .
關閉 Dva 數(shù)據(jù)流 -- Configuration, Dependencies, and Model Files for Dva
關閉 MFSU -- .
切換為 Monorepo 項目 -- .
切換 React 為 18 -- .
切換 Antd 為 5 --
項目級插件：plugin.ts
import { IApi } from 'umi';
export default (api: IApi) => {
// 比如修改 HTML
api.modifyHTML($ => {
return $;
});
// 比如在入口的 umi.ts 中添加代碼
api.addEntryCodeAhead(() => [`console.log('entry code ahead')`]);
api.addEntryCode(() => [`console.log('entry code')`]);
// 比如在構建完成時做額外的事
api.onBuildComplete((opts) => {});
// 比如在啟動階段做額外的事
api.onStart((opts) => {});
// 比如校驗每個 JavaScript/TypeScript 代碼
api.onCheckCode((args) => {});
// 比如動態(tài)修改路由
api.modifyRoutes((routes) => {});
自動 https
三、Umi 4下一步計劃
Umi 4 發(fā)布后，Umi 團隊今年還會在以下方向發(fā)力。
① 2022 版的最佳實踐
② MFSU V4：更快的 MFSU
③ Father 4 和 dumi 2：新一代組件研發(fā)方案
④ ESMi：面向未來的 Bundless 構建方案
⑤ DX（開發(fā)體驗）和速度
四、非Umi項目獨立使用 MFSU
安裝
pnpm add -D @umijs/mfs
配置 MFSU
一共需要簡單的四步操作，請確保以下所有行為都只在開發(fā)環(huán)境生效。
1. 初始化實例
初始化一個 MFSU 實例，這是 MFSU 的基礎：
// webpack.config.js
const { MFSU } = require('@umijs/mfsu')
const webpack = require('webpack')
// [mfsu] 1. init instance
const mfsu = new MFSU({
implementor: webpack,
buildDepWithESBuild: true,
})
2. 添加中間件
第二步，添加 MFSU 的 devServer 中間件到 webpack-dev-server 中，將為提供 MFSU 所需打包后的資源：
webpack 5
// webpack.config.js
module.exports = {
devServer: {
// [mfsu] 2. add mfsu middleware
setupMiddlewares(middlewares, devServer) {
middlewares.unshift(
...mfsu.getMiddlewares()
)
return middlewares
},
}
3. 配置轉換器
第三步，需要配置一種源碼轉換器，作用是用來收集、轉換依賴導入路徑，替換為 MFSU 的模塊聯(lián)邦地址（中間件所提供的）。
此處提供兩種方案：babel plugins 或 esbuild handler ，一般情況下選擇 babel plugins 即可。
Babel Plugins
// webpack.config.js
module.exports = {
module: {
rules: [
// handle javascript source loader
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [
// [mfsu] 3. add mfsu babel plugins
...mfsu.getBabelPlugins()
]
}
}
}
]
}
4. 設定 webpack 配置
第四步，調(diào)用 MFSU 提供的方法改變你的 webpack 配置，在這里只有增量行為，無需擔心會影響到你原來的配置內(nèi)容。
如下代碼所示，mfsu.setWebpackConfig 是一個異步方法，為了調(diào)用他需要將原來的 webpack 配置單獨抽為一個對象 config 之后，再將調(diào)用此方法的返回值導出。
// webpack.config.js
const config = {
// origin webpack config
}
const depConfig = {
// webpack config for dependencies
}
// [mfsu] 4. inject mfsu webpack config
const getConfig = async () => {
await mfsu.setWebpackConfig({
config, depConfig
});
return config
}
module.exports = getConfig(到此為止，MFSU 完全配置完畢，下面可以開始啟動項目使用。
使用
進行完 4 步配置后，啟動你的項目，可以從項目根目錄得到 .mfsu 文件夾，即 MFSU 緩存文件夾，記得將其添加到 git 的忽略列表。
# .gitignore
.mfs
五、最后
在看源碼前，我們先去官方文檔復習下框架設計理念、源碼分層設計 閱讀下框架官方開發(fā)人員寫的相關文章 借助框架的調(diào)用棧來進行源碼的閱讀，通過這個執(zhí)行流程，我們就完整的對源碼進行了一個初步的了解 接下來再對源碼執(zhí)行過程中涉及的所有函數(shù)邏輯梳理一遍
關注我，一起攜手進階
歡迎關注前端早茶，與廣東靚仔攜手共同進階～
評論
圖片
表情