业务组件库开发流程
业务组件库必要性
项目经过长期维护之后往往会沉淀出很多公共组件,当一个组件编写完成之后,其他维护者想要使用这个组件,了解这个组件是做什么的,应该怎么用,必须再去翻看源码,或者没有压根儿注意到这个组件导致重发开发。这个时候一个完善的组件库就很有必要了,可以保障开发者之间进行良好的协作。
组件库可以帮我们解决以下问题:
-
业务组件跨项目复用,提升开发效率
-
统一代码实现,统一代码质量保障
-
组件库文档提供清晰的使用方式和直观的展示效果
组件库的组成
业务组件构成
业务组件库是基于基础组件库进行编写的,基础组件库是使用antd。我们会对基础组件针对不同需求进行封装,达到可以直接引用无需二次开发的目的(比如:下拉选择组件,我们会将接口请求数据、选项模糊查询、多语言等封装到组件内部,无需二次开发,接口请求也不需要再散落到各个页面中)。
目标
-
引⼊即可使⽤,⽆需⼆次开发
-
完善的文档和组件效果演示,支持代码一键拷贝
-
良好的代码质量:使用Jest进行单元测试,保障代码质量
-
良好的编码规范和代码提交规范:ESLint、Husky、commit-lint等工具进行校验和拦截
-
根据代码提交自动生成ChangeLog
-
组件效果演示支持编辑实时渲染(在文档中编辑组件,实时变更展示效果)
开发计划
组件库开发周期
- 组件库文档选型评审
- 首批组件梳理
-
本地预览调试
-
本地构建
-
Jest + @testing-library
-
目录结构规范
-
本地开发环境构建
-
代码规范校验
-
代码提交规范校验
-
CR和发布规范
-
TypeScript支持
-
单元测试
-
组件开发
-
组件库文档生成
- 发布和使用初次版本
-
业务组件新增
-
业务组件迭代
-
组件库文档托管
业务组件库完成之后,就可以尝试低代码了,可以使用拖拽或者图像识别自动生成业务代码
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库