记一次技术选型，创建 Antd Pro 项目实录

背景

业务中需要新开发一个管理后台类的项目，由于之前团队内部的版本基本都是 Umi 2.x + Ant Design Pro 4.x ，就想着借着这个机会，试试新的版本，也体验一下新版本带来的便利和优化。

所以从官方的 Umi 入手，使用了 Umi 4.x + Ant Design Pro 6.x 跑了脚手架的项目，按照核心的功能点做了一些调整，发现并不能达到我们的预期，最终放弃了新版本的尝试，退而求其次，选择了次新版本 Umi 3.x + Ant Design Pro 5.x ，完成了项目。

本篇文章目的是记录了在使用 Umi 4.x + Ant Design Pro 6.x 中遇到的一些问题，希望能给其他做技术选型的同学做一个参考。

目录

• 安装并启动项目
• 问题梳理
• Umi、Ant Design Pro、ProComponents 、Ant Design 之间的关系

安装并启动项目

安装最新版本的 Umi ，并用其脚手架创建项目

• nodejs 版本检查，请保证目标机器中的 nodejs 版本为 14 或以上。
• 安装 Umi ： npm i create-umi@latest -g
• 创建项目：create-umi umi-project-demo 选择 Ant Design Pro 模板
• 进入项目目录，并启动项目：npm run dev
• 打开网页：http://localhost:8000

问题梳理

由于团队中已经有用低版本项目，因此本次升级仅涉及框架升级，所以下面的问题也基于此提出并总结。

• Ant Design Pro 的问题：
  • 6.x 的版本，不再支持 dark 模式，如有需要，应该自己设置 token ，github.com/ant-design/…
  • 6.x 的版本，layout:'side' 模式，不再支持 header，github.com/ant-design/…
• Umi 问题：
  • 4.x 版本，router 中设置 componets: Layout 后，对应的 Layout 组件不会自动包装 router 相关的 props ，导致自定义 menuDataRender 在切换菜单时，路由会变，但菜单不会高亮。解决方案是在 app.tsx 中，通过运行时的方式去设置 layout 的对应属性。如果仍然要使用 router 设置，则需要自动触发 Layout 的 props 变化，以此达到 menuDataRender 渲染的目的
  • 3.x 版本，router 中支持设置 componets，能够在 Layout 组件中获取到 props 的 router；同时也可以通过 app.tsx 中的运行时 layout 属性，进行自定义设置

Umi、Ant Design Pro、ProComponents 、Ant Design 之间的关系

理清 Umi、Ant Design Pro、ProComponents 、Ant Design 之间的关系，对定位一些问题很有帮助。

• 概念说明

  • Umi 是什么：Umi 是一个可扩展的企业级前端框架。Umi 以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
  • Ant Design Pro 是什么：Ant Design Pro 是基于 Ant Design 和 Umi 封装的一整套企业级中后台前端/设计解决方案，也可以算是一个前端脚手架。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的"用户"和"设计者"的体验。
  • ProComponents 是什么：ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著的提升制作 CRUD 页面的效率，更加专注于页面。
  • Ant Design 是什么：Ant Design 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

• 个人理解

  • Umi 和 Ant Design Pro 的关系是，两者的脚手架模板项目基本类似，都是以 Umi 为底层框架，创建的一个中后台前端项目。可以认为是 Umi 的脚手架可以创建出 Ant Design Pro 模板的项目，Ant Design Pro 本身的项目需要用 Umi 进行编译、打包、启动等操作。
  • ProComponents 是对 Ant Design 进行比较复杂一些的逻辑封装组件，可以直接应用于业务中。
  • Ant Design Pro 在随着不断的迭代，也开始逐渐使用 ProComponents 中封装的组件。
  • Ant Design 既可以在其他 React 项目中使用，也可以在上述几个库中的项目中使用。

• 其他说明

  • 不同版本的 Umi ，也匹配着不同版本的 Ant Design Pro 模板项目，同样 ProComponents 也随着前两者的版本迭代，逐渐被用于前两者的项目中。

杂谈

• 要理解 umi、ant design pro 、ProComponets 的关系
• 要多角度去尝试理解文档中所谓的简化，降低研发成本的意义
• 多跑一些官方 demo，基于 demo 中不理解的问题，多角度去搜索，能获取到意外的收获，比如 ant design pro 6.x 不支持 dark \ 没有 header 等大改动
• 在跑官方 cli 的时候，关注对应的版本，如 ant design pro 的脚手架 pro create xxx 选择 umi 4 的版本，其对应的 ant design pro 版本居然是 beta 版
• 追求更新或最新的版本尝鲜没有问题，但一定要确定是否满足需求，已经新版本是否存在一些大更新

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

参考资料

• Umi 文档：umijs.org/docs/introd…
• Umi Github 地址：github.com/umijs/umi
• Ant Design Pro 文档：pro.ant.design/zh-CN/docs/…
• Ant Design Pro 地址：github.com/ant-design/…
• ProComponents 文档：procomponents.ant.design/components
• ProComponents 地址：github.com/ant-design/…
• Ant Design 文档：ant.design/docs/react/…
• Ant Design 地址：github.com/ant-design/…

浏览知识共享许可协议

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。