通过pnpm + monorepo构建自己的工具库和站点

742 阅读2分钟

前言

最近跟同事交流了目前公司写项目遇到的一些痛点,谈到了前端项目 公共方法和组合式函数 的使用限制和困境,他提出了一些自己的想法,我结合这些做了一些实践。

示例仓库 github.com/chouchouji/…

问题

  • 项目之间的公共方法或组合式函数互相copy,不方便维护;比如A项目现在有个方法有点问题,导致了线上bug,其他BCD项目也都是用的这个方法,就需要四个项目都修改。
  • 不同部门多个项目容易产生一致性问题;比如现在前端要新加一些项目,多个项目之间不能靠复制粘贴保证一致性,而且如果涉及跨部门的情况,更容易产生这个问题。
  • 没有文档记录,基本靠口口相传,不便于查询和使用;如果有新人加入,会产生大量的沟通成本,比如,code review 你发现有个地方可以用公共方法,留言让他去项目里某个方法,来来回回,如果有文档,可以大幅降低这些成本。
  • ...

解决思路

通过 pnpm + monorepo 将想抽取公共的 sharedhooks 包集合到一个项目里面,目录结构如下:

image.png

目前,两个包已经被发到npm上

image.png

通过 vitepress 构建, 点此访问 github pages 静态文档站点,效果图如下:

image.png

image.png

收益

  • 多个项目共用一个代码库,更便于共享代码和配置。这使得开发团队可以迅速复用已有的工具、库和模块,提高开发效率。
  • 由于所有项目在同一个存储库中,管理项目之间的依赖关系变得更加直观和易于管理。不必担心某个依赖库的版本冲突问题。
  • 整个代码库采用统一的构建和测试流程,以及统一的编码规范和工具配置,提升团队协作效率与质量。
  • 由于所有代码都在一个存储库中,仅需维护一套 CI/CD 配置,可以更方便地对所有项目进行持续集成和部署,改善开发和交付效率。
  • 统一的版本管理,理论上,各个项目只需要安装最新的包就行,不用考虑版本控制问题,即使有问题,也能快速回滚多个包。
  • ...

结语

如有意见或者建议,欢迎留言;如有错误,欢迎指正。