TypeScript 单体仓库：代码组织实战

使用TypeScript的Monorepo：代码组织的实践

现代前端和后端开发越来越频繁地面临管理多个相互关联项目的问题。当包、库和应用程序的数量增长时，传统的独立仓库（multi-repo）方法会拖慢开发速度：代码重复、版本同步困难以及漫长的审查周期。解决方案是monorepo，尤其是与TypeScript结合使用时。在本文中，我们将探讨在TypeScript monorepo中组织代码的实践方面：从工具选择到具体的结构和配置示例。

什么是monorepo，为什么TypeScript项目需要它？

Monorepo是一种将多个项目（包、库、服务）的代码存储在一个Git仓库中的方法。对于TypeScript来说，这尤其重要，因为强类型语言可以轻松地在系统的不同部分之间重用通用类型和接口。

使用TypeScript monorepo的主要优势：

• 统一的依赖版本 — 消除了不同项目使用同一库的不同版本的情况。
• 代码重用 — 通用类型、工具和配置可以轻松地被所有包访问。
• 原子提交 — 影响多个包的更改可以一起提交。
• 简化CI/CD — 一个流水线即可构建和测试所有部分。

然而，monorepo需要代码组织方面的纪律。如果没有正确的结构，它会变成一个“垃圾场”。TypeScript通过强类型和模块系统帮助建立秩序。

选择管理monorepo的工具

市场上有几种流行的monorepo工具。我们来看看两种最常用于TypeScript的：Nx 和 Turborepo。

Nx 是一个强大的系统，支持monorepo、代码生成和高级缓存。它非常适合包含大量包的大型项目。

Turborepo 是Vercel开发的一个更轻量、更快的工具，专注于简单性。它非常适合中型项目和希望最小化配置的团队。

使用Turborepo的基本配置示例：

// turbo.json{  "$schema": "https://turbo.build/schema.json",  "pipeline": {    "build": {      "dependsOn": ["^build"],      "outputs": ["dist/**"]    },    "test": {      "dependsOn": ["build"]    },    "lint": {}  }}

对于TypeScript，必须配置支持project references的tsconfig.json。这允许编译器理解包之间的依赖关系。

// tsconfig.base.json{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext",    "moduleResolution": "bundler",    "strict": true,    "composite": true,    "declaration": true,    "declarationMap": true,    "sourceMap": true,    "outDir": "./dist",    "rootDir": "./src"  }}

Monorepo结构的实践组织

关键原则是将代码划分为逻辑层。考虑一个包含Web应用程序和后端的TypeScript monorepo的典型结构：

monorepo/├── apps/│   ├── web/          # 前端应用 (React, Vue, etc.)│   └── api/          # 后端服务 (Express, NestJS)├── packages/│   ├── shared/       # 通用类型和接口│   ├── utils/        # 工具函数│   ├── ui/           # UI组件 (如果使用)│   └── config/       # 通用配置 (eslint, tsconfig)├── tools/            # CI/CD脚本和工具├── turbo.json├── package.json└── tsconfig.