Monorepo 单仓库多应用
内容提要
本文介绍了如何使用Monorepo管理Vue组件库的开发，包括Monorepo的优缺点、适用场景及核心技术（如pnpm和Lerna）。通过示例，展示了项目结构搭建、依赖配置、构建脚本编写，以及解决样式丢失和热更新的问题，最终实现了完整的Vue组件库开发流程。
延伸解读
Monorepo 的适用边界与代价
文章指出 Monorepo 适合代码共享、统一版本管理、简化依赖和加快迭代等场景，但并非没有代价。单仓过大会拖慢 Git 操作，弱权限管理使 Git 无法按文件夹控制权限，且强依赖第三方工具链。此外，弱隔离容易产生网状依赖，幽灵依赖也可能出现。因此，采用前需评估团队规模、项目耦合度和工具维护成本，避免盲目跟风。
pnpm Workspace 与 Lerna 的分工
文章以 pnpm Workspace 和 Lerna 为例实践 Monorepo。pnpm 通过 pnpm-workspace.yaml 定义工作空间，利用 --filter 实现精细化操作，并支持按依赖拓扑排序执行脚本。Lerna 则用于包版本管理。两者结合，既能共享依赖、统一构建，又能独立发包。这种组合降低了多包管理的复杂度，但需要熟悉 pnpm 的过滤语法和 workspace 协议。
构建 Vue 组件库的关键配置
在 Monorepo 中构建 Vue 组件库，需为每个子模块配置 package.json 和 vite.config.ts。通过 rollupOptions.external 将依赖外部化，避免打包进产物，减小体积。同时，利用 resolve.alias 将内部模块指向源码，解决样式丢失和热更新问题。集成 TypeScript 时，需用 vue-tsc 进行类型检查并生成 d.ts，再通过脚本移动声明文件到对应 dist 目录。
样式与类型产物的后处理
文章特别处理了 CSS 和 d.ts 文件的归集。由于 Vite 将 CSS 打包为独立的 style.css，且散落在各包中，不便用户按需导入。因此编写脚本将各包的 style.css 移动并重命名到 ui 模块的 dist 下，并生成 index.css 供完整导入。类似地，vue-tsc 生成的 d.ts 文件也通过脚本移动到各模块的 dist 目录。这些后处理步骤是保证组件库可用性的重要环节。
Q&A
Monorepo的主要优点是什么？
Monorepo的优点包括代码共享、统一版本管理和简化依赖管理。
使用Monorepo时有哪些常见的缺点？
Monorepo的缺点包括单仓库过大、git管理耗时和弱权限管理。
Monorepo适合哪些开发场景？
Monorepo适合需要共享代码、统一版本管理和加快开发迭代周期的场景。
如何解决Monorepo中样式丢失的问题？
可以通过配置vite的resolve.alias来确保样式文件能够正确加载。
在Monorepo中如何管理依赖？
可以使用pnpm Workspace和Lerna来管理依赖和构建流程。
如何在Monorepo中集成TypeScript？
需要设置tsconfig.json以进行类型检查，并使用vue-tsc生成类型声明文件。
