Umi Max（@umijs/max）：基于 Umi 插件体系的预集成企业级前端方案详解

Umi Maxumijs/max基于 Umi 插件体系的预集成企业级前端方案详解【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiUmi Max 是 Umi 框架面向企业级应用推出的“开箱即用”集成方案它把 Umi 生态中经过大量生产项目验证的功能插件权限、请求、国际化、微前端、数据流等一次性打包进umijs/max这一个 npm 包。本文以官方文档docs/docs/docs/max/introduce.md为核心结合仓库中packages/max的源码实现说明 Umi Max 的定位、创建方式、CLI 用法、默认插件清单及其底层的插件聚合机制帮助你在实际项目中快速搭建与蚂蚁集团内部一致的企业级前端开发体验。一、Umi Max 的定位从“插件集合”到“一体化方案”根据 Umi Max 简介文档Umi 作为可扩展的企业级前端应用框架在蚂蚁集团内部已直接或间接服务了 10000 应用。在长期的工程实践中Umi 团队把前端开发中大量常见问题沉淀为一个个独立插件如权限、请求、国际化、微前端等。为了让开发者省去逐个挑选、安装和配置插件的成本官方在这些插件开源的基础上将它们直接集成到一起打造了umijs/max——通过脚手架即可马上获得与蚂蚁集团内部开发 Umi 应用一致的开发体验。从仓库结构看packages/max就是一个非常“薄”的包它不重复实现功能而是以 preset 的形式把umijs/plugins中现成的插件全部挂载进来。其 package.json 直接依赖了umi、umijs/plugins、umijs/lint、antd^4.20.6、eslint8.35.0、stylelint14.8.2并声明了命令行入口bin/max.js对应命令名max。这也解释了为什么 Max 项目里 Lint、样式规范、antd 相关能力是开箱即用的。二、创建项目create-umi 的 Ant Design Pro 模板按照 简介文档 的操作步骤使用create-umi并选择Ant Design Pro模板即可创建基于umijs/max的项目$ npx create-umilatest ? Pick Umi App Template › - Use arrow-keys. Return to submit. Simple App ❯ Ant Design Pro Vue Simple App三个模板分别对应Simple AppUmi 基础项目、Ant Design ProUmi Max 项目、Vue Simple AppVue 版模板。选择 Ant Design Pro 后脚手架会初始化一个内置umijs/max依赖的项目骨架。仓库内提供了一个可直接参考的 Max 示例工程 examples/max其 package.json 中依赖了umijs/max、antd^4.23.2、react18.3.1并配置了tailwindcss等开发依赖可作为新建项目后的结构对照。三、CLI 要点Max 项目使用max命令而不是umi官方文档中有一条重要提示原文以 info 高亮框给出在 Umi Max 项目中命令行请使用max而不是原来的umi。例如$ npx max g jest这个约束在源码中有明确依据。maxAppData.ts 会在运行时改写 Umi 的应用数据api.modifyAppData((memo) { memo.umi.name Umi Max; memo.umi.importSource umijs/max; memo.umi.cliName max; return memo; });从这段实现看cliName被设为max、importSource被设为umijs/max意味着 Umi 框架生成的提示语、代码模板与类型导入都会自动指向umijs/max和max命令而不是裸的umi。同时配套的 maxChecker.ts 会在检查阶段拦截混用api.onCheckPkgJSON(({ current }) { const hasUmi current.dependencies?.[umi] || current.devDependencies?.[umi]; if (hasUmi) { throw new Error( You are using ${api.appData.umi.importSource}, please remove umi from your dependencies in package.json., ); } });即如果项目中同时安装了umi包Max 会直接报错要求移除避免umi与umijs/max双入口混用带来的类型与模板冲突。max命令背后的完整调用链可以从 cli.ts 看到import { run } from umi; run({ presets: [require.resolve(./preset)], }).catch((e) { console.error(e); process.exit(1); });它本质上是调用 Umi 核心的run并注入 Max 自己的 preset。因此max dev、max build、max preview、max setup等子命令的行为与 Umi 完全一致区别只在于挂载了 Max 的插件集。在 examples/max 的脚本 中可以验证这种用法{ scripts: { build: max build, dev: max dev, preview: max preview --port 9527, setup: max setup } }四、默认插件清单新项目内置的能力矩阵简介文档明确列出新建的 Max 项目默认安装以下插件可以按需开启。以下按文档原文的清单整理并标注对应文档路径均为仓库根目录相对路径权限access站点统计analyticsAntdantd图表chartsdvadva全局初始状态initial-state数据流model 等方案布局和菜单layout国际化多语言localemodel乾坤微前端qiankun请求库requestTailwind CSStailwindcssCSS-IN-JSstyled-components请求方案react-query全局数据存储方案valtioModule Federationmf这份文档清单与源码中的 preset 定义是互相印证的。preset.ts 完整列出了 Max 挂载的全部插件export default () { return { plugins: [ require.resolve(umijs/plugins/dist/access), require.resolve(umijs/plugins/dist/analytics), require.resolve(umijs/plugins/dist/antd), require.resolve(umijs/plugins/dist/dva), require.resolve(umijs/plugins/dist/initial-state), require.resolve(umijs/plugins/dist/layout), require.resolve(umijs/plugins/dist/locale), require.resolve(umijs/plugins/dist/mf), require.resolve(umijs/plugins/dist/model), require.resolve(umijs/plugins/dist/moment2dayjs), require.resolve(umijs/plugins/dist/qiankun), require.resolve(umijs/plugins/dist/react-query), require.resolve(umijs/plugins/dist/request), require.resolve(umijs/plugins/dist/styled-components), require.resolve(umijs/plugins/dist/tailwindcss), require.resolve(umijs/plugins/dist/valtio), require.resolve(./plugins/maxAlias), require.resolve(./plugins/maxAppData), require.resolve(./plugins/maxChecker), ], }; };两点值得注意这些umijs/plugins/dist/*插件的源码都位于 packages/plugins/src 下access.ts、request.ts、qiankun.ts、locale.ts等一一对应即“默认安装”的只是 Max 这一层的聚合各插件实现仍在umijs/plugins包内独立维护。preset 中还包含一个文档清单未单列的moment2dayjs插件packages/plugins/src/moment2dayjs.ts。从命名和同目录文档 moment2dayjs 迁移说明 可以推断它用于处理 antd 从 moment 迁移到 dayjs 场景下的兼容性适配属于 Max 默认能力的一部分。此外preset 末尾的三个本地插件maxAlias、maxAppData、maxChecker是 Max 区别于“手动安装一堆 Umi 插件”的关键下一节展开。五、Max 专属机制umijs/max导入源与别名在 Max 项目中业务代码统一从umijs/max导入框架 API如useModel、request、history等。这一约定由 maxAlias.ts 实现api.modifyConfig((memo) { memo.alias { ...memo.alias, umijs/max: /exports, }; return memo; });它把umijs/max这个模块名改写为 Umi 临时目录下的自动生成入口/exports。由于各功能插件model、request、access 等注册时都会往/exports中追加导出因此项目里import { useModel, request } from umijs/max能稳定解析到对应运行时 API。这与第三节提到的importSource: umijs/max相配合脚手架生成的模板代码、类型声明也都使用该导入源。同时packages/max/index.js 的内容仅为一行module.exports require(umi);即umijs/max的运行时入口在导出层面上就是umi本体Max 的全部“增量”都通过 preset 注入的插件实现这也再次印证了“Max Umi 一组预集成插件”的实现路线。六、包级依赖与适用前提结合 packages/max 的 package.json 与 examples/max 示例使用 Umi Max 时需注意以下事实性前提Max 包仓库中版本为 4.7.8以 workspace 方式依赖同仓库的umi、umijs/plugins、umijs/lint发布后这些依赖会锁定到对应已发布版本antd是 Max 的直接依赖声明为 ^4.20.6示例工程则使用antd^4.23.2dayjs官方在仓库examples目录下同时提供了 with-antd-5、with-antd-6 等示例说明 antd 大版本可按项目需要选择与仓库中的 antd 插件示例配置对照即可项目中不应再同时安装umi包否则会被maxChecker在检查阶段直接拦截报错CLI 统一使用maxbin/max.js入口包括max dev、max build、max preview、max setup以及max g生成器等命令。七、小结如何继续阅读想搭建项目按第二节用create-umi选 Ant Design Pro 模板参照 examples/max 的结构核对脚手架产物想理解某个默认能力权限、请求、国际化、微前端等从第四节的插件清单进入对应的 max 文档目录 下各篇文档每个能力一篇想深入实现插件本体在 packages/plugins/srcMax 的聚合与专属机制在 packages/max/srcpreset.ts、cli.ts与plugins/下三个本地插件。Umi Max 的价值可以概括为一句话它把“企业级前端应用需要的常见能力”固化为一个可被脚手架一键安装的插件集合并通过maxCLI、umijs/max导入源和防混用检查保证项目从创建到构建始终运行在这套约定之上。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考