Monorepo 架构介绍

Why Monorepo

Monorepo, 单一代码库, 包含多个项目的单个仓库(相对 multirepo, 每个项目完全独立), 方便代码重用/组件库开发.

- "apps/*" apps/web, apps/doc # 多个app
- "packages/*"
- "components/*"

Monorepo 优点

• 容易维护, 提高开发效率, 更快速地代码重构
• 代码重用, 共享模块和工具链, 减少项目差异, 提高代码重用率(测试、构建、语法检查、部署)
• 容易协作, 同一代码库, 沟通和协作更容易
• 容易测试, 被影响的统一测试, 提高测试的效率
• 场景: react/vue/google/ms/微服务...

Monorepo 缺点

• 版本控制变复杂, git 历史嘈杂
• 代码规模巨大时, 可能影响版本控制/编辑器/构建性能.
• 组织变复杂, 权限管/代码可见性控制
• 公共包更新, 需特别关注依赖的影响

Monorepo 协作

• 规范: 遵循统一的代码规范
• 分支: 避免直接修改主分支的代码, 定期合并主分支
• 开发: 公共包变更, 由更新者处理所有依赖此服务的代码
• 文档: 定期更新文档, 清晰、完整的文档和示例
• git subtree/submodule 解决更复杂的项目

Git subtree/submodule

subtree/submodule 在一个 Git 仓库中使用另一个 Git 仓库, 子仓库的分支（或版本）映射成子目录, 作为模块使用

# subtree引入子项目
git remote add pkgName xxx.git # 添加仓库
git subtree add -P components/pkgName pkgName main --squash # 拉取main分支

# submodule引入子项目
git submodule add xxx.git components/pkgName # 添加仓库
git submodule update --init --recursive # 更新配置

• 简化依赖: 不需要 npm 包方式使用公共组件
• 代码复用性: 更通用的多项目公用(任何项目都可灵活的引用)
• 更方便 debug: 源码级使用, 方便快速定位
• 方便子模块管理, 同时维护主项目/公共包
• 增加一些复杂性, 更新子项目, 主项目需要 commit/push git hash.
• 需要使用分支, 而不是 hash, 定期同步子项目的代码

Monorepo 工具

• pnpm
• Turborepo
  Vercel (serverless 部署平台/Next.js)创建

2021 年发布, 多任务并行/缓存/增量构建/任务编排(filter)
支持 npm/yarn/pnpm

• Nx
  前 Google 的 Angular 团队成员创建.

2016 年发布, 功能比 turbo 多, 多任务并行/缓存/编排任务

• Rush
  微软在 2016 年发布, 内置 pnpm. 有缓存/编译/发布, 文档稍简陋
• lerna + yarn workspace
  lerna 因不太活跃, 被 Nx 接管

Why turbo

turborepo 介绍
TurboRepo 的基本原则是永不重新计算以前已经完成的工作
比起 monorepo, Turborepo 更注重优化开发体验和开发效率

• 任务编排, 可以自定义优先级、过滤
• 速度快, 多任务并行
• 缓存, 加快构建速度(可利用远程缓存)

turbo 创建工程: npx create-turbo@latest
默认创建的 nextjs app: npx degit vercel/turbo/examples/with-vite with-vite
Develop: pnpm run dev -F web

组件文档工具

关注点: 内网搜索/组件预览/文档和代码无需割裂.

• vitepress
  比 vuepress 性能更好, 较新. vue 团队计划 VitePress 取代 VuePress.
• dumi
  阿里, 适合组件文档, 根据目录自动生成 doc, 目前还不支持 vue, api 表格还在实验性
• Docusaurus
  Facebook, 常见 react 组件库. 不适合内网用, 安装依赖会报错
• astro
  Islands Architecture(孤岛架构), Vue, React, Angular 都支持, 不适合内网使用, 缺乏组件文档展示插件.

类似骨架屏/组件异步单独初始化/可见再加载, 无需等全量的 JS 下载完, 优先可交互.

Monorepo 工具 (详细)

turbo

2021 年发布, 多任务并行处理/缓存(从不重新计算以前完成的工作)/增量构建/任务编排(filter), 更适合复杂的项目(多个 app)

# 创建工程
npx create-turbo@latest
# 默认创建的nextjs app, 更多: https://github.com/vercel/turbo/tree/main/examples
npx degit vercel/turbo/examples/with-vite with-vite
# Which package manager do you want to use? pnpm
# Build
pnpm run build
# Develop
pnpm run dev
# Start
PORT=4000 pnpm run start --filter="web"

pnpm

• 比 yarn 和 npm 更快 (直接创建符号链接, 而不是复制文件)
• pnpm 使用更少的磁盘空间(只从全局存储中链接文件, 包版本在磁盘上仅保存 1 次)
• 更安全(解决幻影依赖), pnpm 未在 package.json 中声明的包不能被引用, 而 npm/yarn 由于扁平化 node_modules, 依赖被提升, 子包可被引用.
• 自带 monorepo 支持

# pnpm-workspace.yaml
packages:
  - "apps/*"
  - "packages/*"

• pnpm add xxx
• pnpm remove xxx
• pnpm xxx
• pnpm -F 项目名/包名 dev

Nx

2016 年发布, 功能比 turbo 多

npm install nx -g;
# 创建工程
npx create-nx-workspace@latest
Choose what to create · integrated # Integrated 提供脚手架支持和自动代码迁移功能
# nx g @nrwl/react:app my-app to generate an application
# nx g @nrwl/react:lib my-lib to generate a library

Rush

微软在 2016 年发布, 内置 pnpm. 有缓存/编译/发布, 文档稍简陋.
https://rushjs.io/zh-cn/pages/maintainer/package_managers

Lerna

因不太活跃, 被 Nx 接管

Yarn Workspaces

功能较简单, 大部分场景是同 Lerna 结合使用.