得物前端monorepo技术架构与实践

1.

2. 得物前端monorepo技术架构与实践

3. 远俊

4. 01 背景：散乱且低效的代码复 02 基 03 架构： 04 迁移：平滑式的迭代与迁移并存 05 收益：：统多端的分模型仓研发流程的设计仓带来的成效

5. 什么是monorepo? • 将多个项的源代码、依赖和构建配置等都放在 • 仓库中的项个仓库中管理可以相关，也可以完全独 APP APP1 APP2 APP1 Gitlab APP2 APP3 APP3 APP4 APP4 monorepo polyrepo

6. 背景：散乱且低效的代码复

7. 得物前端架构的现状业务发展快：团队规模从10+到100+，应代码复难：不同业务域中应基础能升级难：通致，轮岗上格不致，出现问题定位难成本构建脚本不协作效率低下：不同团队代码重复功能模块代码重复多，难复的npm组件包依赖，升级进度很难把控构建问题定位难：不同应数量从10+到150+ 快&难

8. 仓monorepo技术调研

9. 基：统多端的分模型 • 如何管理不同端及不同业务的代码 • 如何实现仓代码的按需拉取件

10. 如何管理不同端及不同业务的代码件 • .deps：不同端的依赖，B端、C端和Node服务 • ah5/anode/apps：不同端的录，存放不同业务域应 • business：具体的业务域，如商家、客服 • _share：当前业务域下通 • crm：具体应 • packages：录仓顶层通组件和功能依赖，包括组件、utils • shell：不同端的构建脚本的基础能件，包括组件、utils

11. 如何实现仓代码的按需拉取 git sparse checkout：稀疏检出，根据检出件配置下载所需要的 sparse-checkout拉取代码步骤 sparse-checkout配置件件最终拉取的应录

12. 如何实现简化执仓代码的按需拉取步骤：命令命令具CLI + VSCode插件具CLI VSCode插件

13. 架构：仓研发流程的设计 • 权限管理 • 统的研发流程 • 单元测试 • 主研发流程

14. 权限管理 - 存在的问题录下的代码提交了怎么办代码，提交了怎么办

15. 权限管理 - 解决案基本权限约束 • 权限 • 分 • 流程约束 • Git hook校验保护件Owner

16. 权限管理 - 基本权限约束保护分 Owner：代码仓库的所有者，般为TL 般 Maintainer：代码仓库的维护者， Developer：代码仓库的开发者，般 master 为TL/PM 为研发员 release-* 研发本地 hot x-* 没法直接提交

17. 权限管理 - 基本权限约束件录权限卡点

18. 权限管理 - 流程约束函数会对

19. 研发流程 - 存在的问题 • 每个迭代都有上百个开发分 • 研发员技术能参差不 • 每个业务域的迭代节奏不，如何让新建的分不冲突，如何减少上成本和保证研发体验致，是仓维度还是应 • 快速的迭代过程中，如何保证不同应维度的部署发布的代码CR之间互不影响

20. 研发流程 - 解决命名规范分案辅助的命令具CLI 统的构建脚本严谨的 MR/CR流程

21. 研发流程 - 分命名规范 • Dev分命名规范：feature-[应 • 测试分命名规范：test-[应 • 发布分命名规范：release-[应 • 热修复分标识]-版本号- 标识]-版本号标识]-版本号命名规范：hot x-[应标识]-版本号应定义标识是唯的

22. 研发流程 - 辅助的命令命令具 dx 安装应 install add 具 update remove 的依赖 start 安装三 pnpm install vue -w -S pnpm install -- lter @monorepo-app/kefu-monitor-migrate... pnpm install vue -S 简化流程、减少理解成本、提升研发效率的依赖 pnpm install -- lter @monorepo-app/frontend-monorepo dx install -s build dx install vue -S …

23. 研发流程 - 统 turbo.json package.json

24. 研发流程 - 统的构建脚本 • 统构建参数：sh cloud-build.sh -d customer/kefu-xxx-kbench -e t1 • 统解压路径：./apps/customer/kefu-xxx-kbench/dist 按应维度的发布，各业务应发布互不影响

25. 研发流程 - 严谨的MR/CR流程件owner确认，避免错改其他业务域代码带来的在CR阶段通过险

26. 研发流程 - 单元测试 • 组件源码依赖之后，如何确保组件的发布质量 • 研发迭代开发需求已经很忙了，还有时间写单元测试吗 • 研发发布流程中，如何集成动化单测卡点

27. 研发流程 - 单元测试覆盖率和分覆盖率

28. 研发流程 - 单元测试AIGC辅助结构、代码进融合

29. 研发流程 - 单元测试流程卡点 Gitlab webhook Push event CICD构建检测流线任务卡点配置

30. 研发流程 - 主研发流程频繁集成、持续集成减少分管理的复杂性 master作为发布分 release master 转变 master release

31. 研发流程 - 主研发 • 对研发的临的问题平要求较，如何让所有研发适应流程如何缓解定会在当前的release分 • 集成到master代码不致，如何做好双端之间的协同 • 前后端的发布节奏不 • 频繁集成、持续集成给服务带来的压发布

32. 研发流程 - 主研发流程集成到master代码不定会在当前的release分功能开关：能够动态的控制线上功能是否即时 If…else… 前端配置平台发布效单元测试

33. 研发流程 - 主研发流程

34. 迁移：平滑式的迭代与迁移并存

35. 平滑式的迭代与迁移 - 现状 • 迭代和迁移同时进迁移之后，如何确保应 • 应的时候，如何做到快速迁移的功能在产环境不出问题

36. 平滑式的迭代与迁移 - 档与具提效平台配置修改：迁移配置修改：命令应档 + 具dx 修改

37. 平滑式的迭代与迁移 - 灰度环境验证研发测 -> 功能灰度 -> 同步测试 -> 发布上线

38. 收益：仓带来的成效

39. 仓带来的成效 200M左右效益 • 统了lint规范，减少上 • 统了研发流程，提升协作效率 • 更好的代码复成本，提升编码效率

40. 遇到的难点与挑战 • 幽灵依赖的问题 • 全局lock还是局部lock 动回合master给服务带来的压 • • CR过程中如何避免本次变更带来的扰 • 组件中peerDependencies依赖带来的多实例问题 • Git元数据不断增加带来的git命令执 • … 效率问题

41. 内容回顾背景：得物前端平台的架构现状以及前期的技术调研基：架构：仓的分模型以及代码按需拉取的实现仓的权限管理、研发流程、单元测试和主迁移：平滑迁移的流程与线上质量的保证前迁移的仓数据现状以及带来的收益收益：研发的设计

42. 关于我们稀掘： https://juejin.cn/user/2392954206960247 InfoQ： https://www.infoq.cn/u/dewu-tech/publish

43. 感谢