likes
comments
collection
share

前端中台解决方案 之 umijs + ant-design-pro 调研踩坑全记录

作者站长头像
站长
· 阅读数 30

前言

前端中台解决方案 之 umijs + ant-design-pro 调研踩坑全记录 继上一篇文章 小公司-小前端团队，如何一步步走向成熟？ 对前端技术栈进行调研之后，团队决定采用 ant-design-pro 作为之后前端开发的首选技术栈，因此，本篇文章会通过以下几方面，对ant-design-pro进一步分析，同时也会将一些坑记录一下，让有需要的小伙伴儿少走一些弯路。

  • 认识 ant-design-pro 及其应用场景？
  • 为什么决定采用ant-design-pro作为前端技术栈？
  • 基于ant-design-pro构建团队自己的最佳实践？
  • ant-design-pro使用踩坑总结

写作不易，如果这篇文章对您有所帮助，欢迎 关注♥️ + 点赞👍 鼓励一下作者，感恩～

认识 ant-design-pro 及其应用场景

我们从ant design pro 官网，可以直接看到其应用场景：

前端中台解决方案 之 umijs + ant-design-pro 调研踩坑全记录

开箱即用的中台前端/设计解决方案，这里指的中台，更多是我们日常开发中的那些B端项目，即我们常说的后台管理系统，cms系统等，那这些项目通常都会包含以下这些场景：

前端中台解决方案 之 umijs + ant-design-pro 调研踩坑全记录

我们对这些场景进行一一说明：

  • 组件库：即一般B端项目，都需要引入一些开源的基础组件库，不需要我们从零开发。例如：ant design
  • 组件库pro：这里指的是基于基础组件库，以及实际业务场景封装的业务组件，例如：ant design pro component
  • 图表库：通常会有很多数据，需要用图表进行可视化展现，例如：echarts
  • css方案：即在项目中如何写样式？例如：css module，以及预编译器 sass，less等，以及tailwindcss
  • 路由管理：即基本每个项目都需要前端路由，这里就不多说啦
  • 请求管理：即通常需要对axios等结合公司实际场景，进一步封装，例如：通过请求拦截，响应拦截，对接口异常情况，以及登录登出等场景进行处理。
  • 状态管理：即项目相对比较复杂时，可能需要专门的状态管理工具，例如：vue3中的pinia，react中的redux等。
  • 权限管理：即一般B端项目，可能会伴随着相应的权限，即不同的页面功能，需要不同的权限才可以访问到，这样就需要我们有一套完善的权限机制来更好的管理。
  • 国际化：即部分B端项目，可能有国际化的需求，需要支持多种语言，也是经常会遇到的一个场景。
  • 埋点管理：即在项目发展到一定阶段，我们需要对用户的行为进行采集，如何采集呢？就需要我们事先在项目中进行埋点，同时还需要将这些埋点数据进行上报，最后做相应的可视化展现，这也是一套完整的前端监控链路体系。

通过上面的介绍，相信我们对传统中台前端项目包含哪些内容，有了更清晰的一个认识，那么，接下来，我们思考的是就是如何去实现以上这些功能了？

  • 方案1：手动实现，直接基于vue-cli或者create-react-app脚手架，去从零实现以上这些功能，优点就是完全可以结合公司实际应用场景，去逐渐沉淀出一套符合公司场景最佳实践的项目模版，当然缺点也很明显，以上这些内容的实现成本并不小，同时涉及权限，埋点等功能的实现难度也不小，因此，如果团队有足够的人力，同时，自定义的场景比较复杂时，可以考虑手动去实现。
  • 方案2: 借助社区开源的方案，针对这种中台项目，不管是vue还是react，其实都有很多现成的项目模版，那我们可以考虑基于这些开源项目，优点就是功能齐全，不需要我们手动实现，当然，缺点就是可能会存在部分实现不符合公司实际应用场景，这个时候，就可能需要去修改源码等情况。

很显然，对于小公司，小团队来说，方案1可能对于现阶段来说，并不适合，因此，我们决定采用方案2的思路，去借助一些开源的项目模版去开发，我们也调研了很多开源项目，具体可以参考：

那最终选择哪个开源方案呢？ 这也是需要我们去进一步确认的，这里，我们以vue中排名靠前的vue-vben-admin 来说明：其实现的功能确实比较齐全，以上我们提到的权限，国际化等场景都包含在内，同时，页面交互风格也非常漂亮，其实算是vue3中台项目的首选啦，

但是，有一个问题需要注意：类似vue-vben-admin这种后台管理系统模版，对于我们前端开发者来说，它其实就是一套现成的项目模版，我们直接基于该模版开发即可

但是实际情况，往往更复杂，在开发前，我们总需要对整个项目模版的代码进行熟悉吧，其模版代码是否可读，设计是否合理等直接决定了开发者的开发体验，同时，最大的问题就是这类项目模版通常后期开发过程中，项目模版自身的源码和业务代码是耦合在一起的， 后期版本升级会很麻烦，

这也就引出了类似vue-vben-admin这种后台管理系统模版最大的一个问题：

  • 版本升级更新机制不友好，很可能需要人工diff升级前后的代码，手动更改，很显然，这也太不友好啦。
  • 源码和业务代码很容易耦合在一起，因为源码是我们直接可见的，随着业务的迭代，一些不符合场景的代码，我们很容易直接去进行修改，改的越多，也就意味着后期维护成本越高，升级成本也越高。

那怎么办呢？有没有什么解决方案？ 我们首先要知道，类似vue-vben-admin这种后台管理系统模版，之所以会存在版本升级更新机制不友好，底层原因有两个：

  • 项目架构整体相对比较简单，没有采用monorepo架构，模版项目代码中封装的hook，组件等内容没有单独发npm包，没有版本管理。
  • 封装的组件，自定义render能力有限，很多时候需要我们手动修改组件源码。

那怎么办呢？就在这个时候，我了解到了一个叫 umijs 的框架，

前端中台解决方案 之 umijs + ant-design-pro 调研踩坑全记录 前端中台解决方案 之 umijs + ant-design-pro 调研踩坑全记录

它就像一个惊喜一样，出现在我的面前，为什么呢？因为它正正好的解决了我之前使用vue-vben-admin的时候，所遇到的一些问题，因为 umijs提供了一些插件，即我们上面所说的权限管理，国际化，状态管理等场景，umijs都做成了一个个的插件，并且都已经单独发布到npm上，也就意味着 我们可以按需引入插件，同时由于上传了npm包，我们在使用的时候，只需要import即可，就像使用其他npm一样，其源码都被维护在node_module下，我们只需要关注业务代码本身即可，后期升级，也只需要升级npm包的版本即可。

很显然，umijs确实解决了像vue-vben-admin等这些项目模版所存在的一个典型问题。至少，我们目前看到其设计初衷是这样的，至于实际实现的怎么样，以及我们开发者开发体验如何，这个需要我们进一步验证（提前透露一下，作者已经在项目中使用了一段时间啦，感觉还不错哦）

于是，顺着 umijs ，我又了解到了ant-design-pro，它就是基于ant design + umijs + ant design pro component 封装的一整套企业级中台前端解决方案，

  • ant design: 基础组件库，大家应该都了解。
  • umijs：刚也介绍过了，提供了一些插件去实现权限，国际化等场景。
  • ant design pro component：额外赠品喽，哈哈哈，相当于是结合中台业务场景下，基于ant-design的二次封装。

看到这里，我觉得这一套东西真的还是蛮强大的，基本覆盖了B端项目大多数应用场景，同时，对于开发者来说也会更加友好。

tip: 在调研过程中，也发现一部分小伙伴儿吐槽umijs的问题，比如：升级到4.x问题太多，不符合实际应用场景等问题，这个大家就要根据自己的实际情况去评估和判断啦，它肯定还是有很多可以改进优化的空间的，同样，它也很好的解决了我们很多问题，帮助我们开发者更好的去实现功能，我目前使用过程感觉还不错，后期有什么问题，也会随时在这篇文章里同步更新。

为什么决定采用ant-design-pro作为前端技术栈？

其实上面，已经说了ant-design-pro所解决的问题，以及其实际应用场景，这里我们进行总结一下，

  • 从技术的角度：ant-design-pro内部是基于ant design + umijs + ant design pro component,基本覆盖了中台前端项目的大多数应用场景，同时，像 ant design pro component 内部提供的这些组件，都提供了很强大的自定义能力，也就意味着，会尽量避免我们去修改源码，或者从头实现一些组件，可以极大的节省我们的开发成本。
  • 从设计的角度：ant-design不仅对于前端来说开源了一套组件，同时，也把其设计规范进行开源，具体可以参考：ant design设计规范，了解这些设计规范，对于前端开发者来说，其实也是有必要的，可以帮助我们更好的设计页面功能，设计交互等。

尤其，对于小公司，小团队来说，设计，甚至产品的资源可能并没有那么充足，这个时候，就需要我们前端去承担更多这样的角色，而我们如果采用ant-design-pro这一套东西，就可以完全遵循其设计规范，整体实现效果，团队内部也可以进一步统一。

基于ant-design-pro构建团队自己的最佳实践？

使用ant-design-pro 提供的官方脚手架@ant-design/pro-cli，可以帮助我们快速初始化项目：

npm i @ant-design/pro-cli -g
pro create myapp

初始化项目之后，其默认的代码内容，可以参考：github.com/ant-design/…

我们这里要说的是，结合其默认的代码内容，然后再结合公司实际场景，我们可以进一步对初始化代码内容进行删减和调整，从而构建出属于自己团队的一套最佳实践。

这里，我列举出了我们团队在ant-design-pro基础上，做了哪些删减和修改：

  • 国际化：只保留中英文，原来自带有 10+语言，同时把一些不需要的文案进行删减，同时结合公司，新增了一部分符合公司的文案

    • 标题
    • 顶部 header logo
    • 浏览器 tab favoron.io
    • 底部 footer 备案
    • 接口异常等相关文案

  • 删减默认自带的业务代码，即 pages 下面相关组件，

    • 只保留首页对应的组件 Home，
    • 同时新增了一个 Warehouse 组件（没有实际内容，主要用于调试路由权限等相关逻辑）

  • 调整登录，登出，用户用户信息等逻辑：公司内部如果有一套独立的登录鉴权系统，可以考虑接入进来。

    • 登录逻辑：主要在 pages/User/Login 组件中维护。
    • 登出：主要在 components/RightContent/AvatarDropdown 中维护
    • 获取用户信息：主要在 app.tsx 中维护，存储在全局数据中。

  • 样式：默认没有引入Tailwind CSS

    • 通过微生成器，引入 Tailwind CSS 插件，并且要禁止默认样式，因为会影响 antd 样式
    • 使用 react-transition-group 添加路由切换时动画效果。

  • service

    • 默认引入一个后端服务对应的swagger.json，然后生成了相应的 service，以供我们调试后端 API

  • 集成 CI/CD 相关代码

    • git commit 前会对代码格式进行校验
    • git commit message 也会进行校验

上面只是列举出了具体更新了哪些内容，更新后的代码 维护在 hd-ant-desgin-pro 这个github仓库里，有需要的小伙伴儿，也可以结合自己公司团队的实际场景，基于ant-design-pro封装属于自己的一套项目模版。

ant-design-pro使用踩坑总结

这里把一些新手使用ant-design-pro过程中，可能会遇到的一些问题总结了一下，供小伙伴儿们参考，尽量少踩坑。

开发环境配置

  • vscode 安装 Simple React Snippets 插件，可以帮助我们快速生成 react 代码片段。
  • vscode 安装 prettier 插件， 因为执行pnpm run format可以对代码进行格式化，默认是使用 prettier，如需 IDE 支持格式化，需要安装 prettier 插件。
  • 执行pnpm run start 开启本地服务，代理相关配置维护在config/proxy.ts中。

入口文件的作用

入口文件src/app.tsx 会导出三个核心属性：

  • getInitialState：该方法会返回全局初始化数据，例如：获取用户信息通常在该函数中调用。
  • layout运行时配置：与之对应的是config/config.ts的静态配置，部分配置相当于是需要动态配置，所以需要放到这里。
  • request 配置：即请求相关配置，例如：请求拦截器，响应拦截器等，具体代码维护在：src/requestErrorConfig.ts

.rmirc.ts文件的作用

即umijs的配置文件，包含 Umi 所有非运行时配置（运行时配置一般定义于 app.ts）。

同时该文件的功能与config/config.ts 功能一样，2选1即可，ant-design-pro默认使用的是config/config.ts.

路由如何配置

路由相关配置，集中维护在config/routes.ts中，和 传统vue，react中的路由配置，差别不大，这里就不额外说明啦。

权限问题如何处理

权限相关逻辑，集中维护在src/access.ts中，该文件会导出一个 access 函数，access 函数返回的一个对象，页面其他地方就可以根据该对象的值进行权限控制。

权限主要包含以下几方面：

  • 路由权限：即控制某个路由页面是否可以被访问，可以在路由配置中，添加一个 access 属性即可，如果不允许，则跳转到 403 页面，因此也需要配置一个 403 页面，403 页面的显示内容可以自定义，同时在入口文件 app.tsx 中 unAccessible 属性引入即可。
  • 按钮权限：直接在指定页面，通过 useAccess 引入，然后控制按钮是否可以渲染即可。

具体代码可以参考：umijs.org/docs/max/ac…

如何调用后端API

ant-design-pro 默认集成了 plugin-openapi 插件，通过该插件，我们可以快速生成接口文档，以及接口 API，并且保存在 service 目录中，然后我们在页面直接调用生成的 API 即可。

与之前 mgr 类似，只不过只需要后端提供一个 swagger.json 文件即可，然后执行pnpm run openapi命令，即可生成相应的 API。

具体主要有以下三步：

  1. 提供 swagger.json 文件，可以是本地，也可以是在线接口，然后在config/config.ts的 openAPI 属性配置即可。
  2. 然后执行pnpm run openapi，然后src/services目录下就会生成相应的 API 文件。
  3. 然后我们在需要的页面引入该 service 即可。

拓展：如果有小伙伴儿对openapi不太了解的话，可以重点了解一下，和后端API交互的时候，传统解决方案就是我们前后端每次都对一下接口，给一份接口文档，前端小伙伴儿还得专门维护的API url的文件，其实这样挺麻烦的，目前推荐使用openapi这种方式，简单来说，后端可以直接基于自己的实现，生成一个ts或者js文件，前端只需要引入该文件，然后调用该文件里的方法即可发送请求。

如何书写样式

  1. 推荐使用 css modules 以及 less 预处理器，具体可以参考：umijs.org/docs/guides… 这里，有个额外细节注意下，在开发过程中，经常会遇到覆盖 ant design 默认样式的情况的，如何覆盖呢？需要使用:global 选择器

    .loginFormPageWrapper {
  :global {
    .ant-pro-form-login-page {
      background-color: #fff;
      height: 100vh;
      .ant-pro-form-login-page-container {
        max-width: none;
      }
    }
  }
}

    说明：:global 内的样式默认是全局生效的，如果只是想具体覆盖 ant-design，只需要像上面的代码一样，外面再包一层选择器即可。

  2. 项目默认集成 tailwind.css，因为建议优先使用其自带样式类，如果满足不了，再进行自定义样式文件。

tip： 关于umijs 和 ant-design-pro使用过程中，遇到的一些问题，会在这篇文章中持续补充和更新...

总结

通过这篇文章，我们介绍了以下内容：

  1. 传统中台前端项目，都会包含状态管理，权限管理，国际化等等10+场景，
  2. 同时针对这些场景，我们又从自建和采用开源方案两个方向进行了分析了各自的利弊。
  3. 最终决定采用ant-design-pro，同时对其进行了介绍，以及使用踩坑进行了总结

希望对有类似需求的小伙伴儿有所帮助和启发。

写作不易，欢迎小伙伴儿们点赞 + 收藏+关注，感恩。

参考文档

转载自:https://juejin.cn/post/7231818152816443448
评论
请登录