Umi 4发布了

前端大神之路

共 7921字,需浏览 16分钟

 · 2022-06-26

本文适合觉得使用umi,或者对umi感兴趣的小伙伴阅读。

欢迎关注前端早茶,与广东靓仔携手共同进阶~

一、前言

本文基于开源项目:

https://github.com/umijs/umi-next
https://umijs.org/

    广东靓仔使用umi开发也有一段时间了,从Umi 2 到 Umi 3,现在官方推出了Umi 4。
    广东靓仔从官网找来了Umi4带来的一些改变,抢先看:
  • 🎉 新官网和文档
  • 🚀 MFSU V3 & 默认开启
  • 🎭 双构建引擎和 ESMi
  • 🕸 Webpack 5
  • ⛹🏾‍♂️ React Router 6 & 新路由
  • 🐹 最佳实践迭代
  • 🛡️ 依赖预打包
  • 🤺 Umi Max
  • 🐛 Low Import 研发模式
  • ⚠️ 强约束功能集成
  • 🎈 Import All From Umi 迭代
  • 🍀 srcTranspiler 和 depTranspiler
  • 🌼 jsMinifier 和 cssMinifier
  • 🌸 应用元数据
  • ❄️ 微生成器
  • 🧪 贴心小改进

二、Umi 4 带来了哪些改变

新官网

   新的官网重新梳理的文档、信息结构、以及新写的文档插件

MFSU V3 & 默认开启

两个示例、四种模式、四个维度的对比。MFSU 可脱离 Umi 运行。

在这几个场景下,MFSU with esbuild 数据领先。因此在 Umi 4 中默认开启

双构建引擎和 ESMi

Umi 4 提供 Vite 和 Webpack 两种构建模式供开发者选择,并尽可能保证他们之间功能的一致性,可能有些同学会喜欢 dev 用 vite,build 用 webpack 这样的组合。同时基于 Vite 模式实现了 ESMi 的 Client 端,ESMi 依赖服务端,在外网还无法使用。

Webpack 5

Umi 4 默认使用 webpack 5 并开启物理缓存。

React Router 6 & 新路由

升级了路由方案到 React Router 6,喜忧参半。好消息是,React Router 6 是 Remix 的基础库,面向框架层做了很多优化,路由实现层更优雅,Umi 得以删除大量路由渲染的代码;坏消息是,带来不少 Break Change,比如之前父路由渲染子路由用 children,得换成如下:
- { props.children }
+ <Outlet 

API 路由

Umi 4 约定 src/api 目录下存放的 Serverless Function 格式的文件即为 API 路由。这部分路由会打包成不同平台支持的 Serverless Function 产物。场景比如带 token 的 API 调用、动态数据源、基于 Notion API 的 Blog、Hackernews Clone 等等。
export default {
  apiRoute: {},

Low Import 研发模式

这是 Umi 4 的试验性功能之一,目前已开发完成,解的问题是让开发者少些或不写 import 语句。项目中大量的 import 其实都可以通过工程化的方式自动处理。Umi 4 里通过 lowImport: 开启,然后就可以无 import 直接用路由相关的 Link、useLocation 等,数据流相关的 connect、useModel,antd 组件 Button、Calendar 等,以及其他更多。

支持 Vue

Umi 4 中提供了 Vue 支持,只需装载一个 preset 即可切换到 Vue。
export default {
  presets: ['@umijs/preset-vue'],
}

微生成器

此概念来自 Modern.js。Modern.js 引入很多新概念,其中「微生成器」还是非常贴切的。他包含两个功能:
1)小型脚手架,
2)功能的开启与关闭。
Umi 3 虽然也有 generate 命令,但只包含功能 1。Umi 4 拓展了下 generate(alias 为 g)命令。除了支持更多类型的小型脚手架生成,还支持功能的开启与关闭,以及比如 Monorepo、react 和 antd 版本等的功能切换。
$ npx umi g
? Pick generator type › - Use arrow-keys. Return to submit.
❯   创建页面 -- Create a umi page by page name
    创建组件 -- .
    创建 mock 代码 -- .
    创建 model 代码 -- .
    启用 Prettier -- Setup Prettier Configurations
    启用 Jest -- Setup Jest Configuration
    启用 E2E 测试 -- .
    启用 Tailwind CSS -- Setup Tailwind CSS configuration
    启用 SSR -- .
    启用 Low Import 研发模式 -- .
    启用权限方案 -- .
    启用 Monaco 编辑器 -- .
    关闭 Dva 数据流 -- Configuration, Dependencies, and Model Files for Dva
    关闭 MFSU -- .
    切换为 Monorepo 项目 -- .
    切换 React 为 18 -- .
    切换 Antd 为 5 -- 

项目级插件:plugin.ts

为进一步降低我们项目中使用插件的门槛,Umi 4 中约定项目根目录下的 plugin.ts 为插件,开发者可在此直接调用插件 API,无需注册,支持 TypeScript。
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) => {});
  // 比如动态修改路由
  api.modifyRoutes((routes) => {});

自动 https

 Umi 4 的 https dev server 的实现基于 mkcert,启动过程中会基于 hosts 自动生成对应的 key 和 cert。我们除了安装前置的 mkcert,其他无需关心。

三、Umi 4下一步计划

Umi 4 发布后,Umi 团队今年还会在以下方向发力。


① 2022 版的最佳实践

② MFSU V4:更快的 MFSU

③ Father 4 和 dumi 2:新一代组件研发方案

④ ESMi:面向未来的 Bundless 构建方案

⑤ DX(开发体验)和速度

四、非Umi项目独立使用 MFSU

安装

pnpm add -D @umijs/mfs


配置 MFSU

一共需要简单的四步操作,请确保以下所有行为都只在开发环境生效。


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,
  buildDepWithESBuildtrue,
})


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 的模块联邦地址(中间件所提供的)。

此处提供两种方案: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 配置

第四步,调用 MFSU 提供的方法改变你的 webpack 配置,在这里只有增量行为,无需担心会影响到你原来的配置内容。

如下代码所示,mfsu.setWebpackConfig 是一个异步方法,为了调用他需要将原来的 webpack 配置单独抽为一个对象 config 之后,再将调用此方法的返回值导出。

// 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


五、最后

    在我们阅读完官方文档后,我们一定会进行更深层次的学习,比如看下框架底层是如何运行的,以及源码的阅读。
    这里广东靓仔给下一些小建议:
  • 在看源码前,我们先去官方文档复习下框架设计理念、源码分层设计
  • 阅读下框架官方开发人员写的相关文章
  • 借助框架的调用栈来进行源码的阅读,通过这个执行流程,我们就完整的对源码进行了一个初步的了解
  • 接下来再对源码执行过程中涉及的所有函数逻辑梳理一遍

关注我,一起携手进阶

欢迎关注前端早茶,与广东靓仔携手共同进阶~

浏览 527
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报