前端工程化：Monorepo架构实战指南
前言
Monorepo是现代前端工程化的趋势！如果你的项目还在使用多仓库管理，那你就浪费了很多效率。今天我就来给大家讲讲Monorepo架构的实战经验。
为什么需要Monorepo
- 代码共享：多个项目共享代码和组件
- 统一管理：统一的依赖管理和构建流程
- 团队协作：更好的团队协作和代码复用
- 一致性：保持代码风格和规范一致
Monorepo工具
1. Turborepo
// turbo.json { "$schema": "https://turbo.build/schema.json", "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }, "test": { "dependsOn": ["build"], "inputs": ["src/**/*.ts", "src/**/*.tsx"] }, "lint": { "inputs": ["src/**/*.ts", "src/**/*.tsx", "*.config.js"] } } }2. Nx
// nx.json { "tasksRunnerOptions": { "default": { "runner": "@nx/workspace/tasks-runners/default", "options": { "cacheableOperations": ["build", "test", "lint"] } } }, "targetDefaults": { "build": { "dependsOn": ["^build"] } } }3. Lerna
// lerna.json { "$schema": "node_modules/lerna/schemas/lerna-schema.json", "version": "6.5.0", "npmClient": "pnpm", "command": { "publish": { "conventionalCommits": true, "message": "chore(release): publish %s" } } }Monorepo项目结构
// 项目结构 monorepo/ ├── packages/ │ ├── app/ # 主应用 │ │ ├── src/ │ │ ├── package.json │ │ └── vite.config.ts │ ├── ui/ # UI组件库 │ │ ├── src/ │ │ └── package.json │ ├── utils/ # 工具函数 │ │ ├── src/ │ │ └── package.json │ └── api/ # API层 │ ├── src/ │ └── package.json ├── apps/ # 应用目录 │ └── admin/ # 管理后台 ├── .gitignore ├── package.json ├── tsconfig.json └── turbo.jsonMonorepo最佳实践
1. 共享配置
// 根目录tsconfig.json { "compilerOptions": { "baseUrl": ".", "paths": { "@monorepo/ui": ["packages/ui/src"], "@monorepo/utils": ["packages/utils/src"], "@monorepo/api": ["packages/api/src"] } } }2. 统一依赖管理
// 根目录package.json { "name": "monorepo", "private": true, "workspaces": [ "packages/*", "apps/*" ], "scripts": { "build": "turbo run build", "test": "turbo run test", "lint": "turbo run lint", "dev": "turbo run dev" }, "devDependencies": { "turbo": "^1.10.0", "typescript": "^5.0.0" } }3. 缓存优化
// turbo.json { "pipeline": { "build": { "dependsOn": ["^build"], "outputs": ["dist/**", ".next/**"], "cache": true } } }4. 版本管理
// 使用conventional commits // feat(package): 添加新功能 // fix(package): 修复bug // chore(package): 更新依赖 // 使用lerna发布 lerna publish常见误区
误区1：过度拆分
错误：把简单的项目拆分成多个包
正确：根据实际需求合理拆分
误区2：共享过多代码
错误：强行共享不应该共享的代码
正确：只共享真正需要共享的代码
误区3：忽视构建缓存
错误：每次都重新构建所有包
正确：使用缓存提高构建效率
误区4：不规范版本管理
错误：随意更新包版本
正确：使用semver规范版本
总结
Monorepo是现代前端工程化的重要架构：
- 选择工具：Turborepo、Nx、Lerna
- 合理拆分：根据功能拆分包
- 共享配置：统一的配置和规范
- 缓存优化：提高构建效率
记住，Monorepo不是银弹，需要根据团队规模和项目复杂度选择。
核心要点：
- 合理拆分项目结构
- 使用缓存提高构建效率
- 统一依赖和配置管理
- 使用semver规范版本
希望这篇文章能帮助你构建Monorepo架构！
)
