AUmi

Build Umi based on Rsbuild

English | 简体中文

支持使用Rsbuild作为Umi的bundler

特性

• 十倍以上的构建性能提升;
• 保留Umi插件体系，无差别的使用体验
• 低成本切换，5分钟内完成Umi历史项目的迁移

迁移

Notice: Umi版本需要大于4.0.0

安装

npm add @aumi/aumi@latest -S

更改文件

更改Umi配置文件 .umirc.ts :

- import { defineConfig } from 'umi';
+ import {defineAUMIConfig} from "@aumi/aumi";

- export default defineConfig({
+ export default defineAUMIConfig({
  ...,
});

.umirc.ts下的配置，因bundler兼容性，或未经过测试，不能够支持以下几个配置项

配置字段	无法使用原因	替换手段
autoprefixer	改用其他方式	1. 改用browserlist 2. 改用.umirc.ts下的targets配置
cssMinifier	改用其他方式	Rsbuild使用lightningcss, 可通过.umirc.ts下的minify来配置
classPropertiesLoose	babel插件配置, Rsbuild使用swc	通过.umirc.ts下的swcLoader配置swc的选项
deadCode	webpack plugin, 暂未测试rspack兼容性	无
depTranspiler	用于指定使用esbuild等工具处理node_modules中符合条件的代码, 实际上@umijs/bundler-webpack没用到	无
esbuildMinifyIIFE	此字段用于修复 esbuild 压缩器自动引入的全局变量导致的命名冲突问题, 不需要使用	无
extraBabelIncludes	改为extraIncludes	通过.umirc.ts下的extraIncludes
extraBabelPlugins	不支持babel, 改为swcLoader配置支持	改用swcLoader配置, 具体详见Rsbuild
extraBabelPresets	同上	同上
exportStatic	暂未支持与测试	无
extraPostCSSPlugins	改为postcssLoader配置	改用.umirc.ts下的postcssLoader, 类型参考Rsbuild
forget	暂未支持与测试	无
jsMinifier	改为minify配置来支持	改用.umirc.ts下的minify来支持, 类型参考Rsbuid
jsMinifierOptions	同上	同上
legacy	不支持	无
mdx	不支持	可通过chainWebpack自行配置
mfsu	暂未支持与测试	改为.umirc.ts下的新增配置moduleFederation来支持, 参考Rsbuild
runtimePublicPath	使用RuntimePublicPathPlugin webpack插件, 暂未测试rspack兼容性	暂无
srcTranspiler	不支持, 默认使用swcLoader	无
srcTranspilerOptions	同上	无

defineAUMIConfig方法，除去插件的配置TS类型无法提供之外，其余类型基于Rsbuild的类型，具有完善的TS类型

更改package.json

更改package.json下的scripts字段

{
  "scripts": {
-   "dev": "umi dev",
+   "dev": "aumi dev",
-   "build": "umi build",
+   "build": "aumi build",
+   "analyze": "RSDOCTOR=true aumi build",
-   "postinstall": "umi setup",
+   "postinstall": "aumi setup",
-   "setup": "umi setup",
+   "setup": "aumi setup",
    "start": "npm run dev"
  }
}

其中analyze代替UMI原有的analyze功能，使用Rsdoctor做分析功能

新建项目

参考Umi的快速上手，新建一个项目；然后遵循上述迁移步骤进行变更

其他变更

.umirc.ts新增配置

字段	默认值	作用
rsbuildConfig	undefined	完正的RsbuildConfig，优先级高于其他配置，会通过mergeRsbuildConfig与其他配置合并，类型参考Rsbuild
aliasStrategy	'prefer-alias'	alias配置的优先级，参考
transformImport	undefined	能力类似babel-plugin-import，参考Rsbuild
react	参考	Rsbuild插件@rsbuild/plugin-react的配置
rspack	undefined	修改rspack的配置项，参考

Umi插件扩展方法变更

Umi通过插件体系，提供了大量的自定义方法，可以在构建流程中使用（可查看Umi文档）。因bundler修改，部分底层构建流程与@umijs/bundler-webpack存在不一致的地方，因此去掉了部分自定义方法，如果在插件和构建流程中使用这些方法，则会报错，停止构建

去除了以下扩展方法，主要是babel相关

• addExtraBabelPresets
• addExtraBabelPlugins
• addBeforeBabelPresets
• addBeforeBabelPlugins
• modifyWebpackConfig
• modifyViteConfig
• modifyServerRendererPath
• modifyBabelPresetOpts

新增了以下扩展方法

• modifyRsbuildPlugins: 用于修改Rsbuild插件

示例：

api.modifyRsbuildPlugins(plugins => {
  return plugins.slice(1);
});

• modifyRsbuildConfig: 用于修改RsbuildConfig，优先级最高

示例：

api.modifyRsbuildConfig(config => {
  config.root = './';
  return config;
});

遗留问题

TODO