TypeScript Project References 实战sample-monorepo 如何用 tsc --build 让编译提速 10 倍【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo大型 TypeScript monorepo 的编译速度常常是开发者的噩梦改一行代码却要等几十秒的全量编译。TypeScript Project References正是为解决这一痛点而生的官方方案。本文以开源示例项目sample-monorepo基于 npm workspaces 的 TypeScript 多包工程为样本带你一步步拆解它是如何用一条tsc --build命令把编译速度提升近 10 倍的。为什么 monorepo 编译会越来越慢当项目拆分出app前端、components组件库、server后端等多个包时传统做法是对整个仓库做一次性全量编译每次构建都要重新解析、检查所有包的源码任何一个包改动其他包的类型检查也全部重来随着代码量增长编译时间线性恶化这背后缺少的是增量意识绝大多数文件根本没变为什么要重复编译它们sample-monorepo 的包结构先看懂依赖关系这个仓库只用了 3 个包却完整演示了 monorepo 的核心链路包名目录职责sample/componentspackages/components纯 React 组件库最底层sample/apppackages/app前端应用依赖 componentssample/serverpackages/serverExpress 服务端依赖 app依赖方向是单向的server → app → components。这正是 Project References 能发挥威力的前提——TypeScript 可以按拓扑顺序从底层组件库开始逐层构建。关键配置一tsconfig.base.json 开启 composite ⚙️Project References 的一切基础是composite 项目。在 tsconfig.base.json 中composite: true, declaration: true, sourceMap: true三个选项缺一不可composite: true允许本包被其他项目引用并生成.tsbuildinfo增量缓存文件declaration: true为下游包生成.d.ts类型声明sourceMap: true配合 packages/app/package.json 中排除dist/tsconfig.tsbuildinfo的发布配置保证产物可调试关键配置二solution 文件 子项目 references根目录的 tsconfig.json 不编译任何文件它只扮演解决方案文件角色列出所有子项目references: [ { path: ./packages/app/src }, { path: ./packages/components/src }, { path: ./packages/server/src } ]子项目之间通过references声明依赖packages/app/src/tsconfig.json 引用 componentspackages/server/src/tsconfig.json 引用 app。TypeScript 看到这条依赖链后就能智能决定谁先编译、谁后编译。核心加速武器一条 tsc --build 命令 ⚡根目录 package.json 里构建脚本只有一行build: tsc --buildtsc --build即tsc -b与普通tsc有本质区别增量编译读取各包缓存的.tsbuildinfo只重编译发生变化的文件拓扑排序自动先构建被依赖的 components再构建 app最后构建 server跳过未变项目如果某个包没有任何改动直接复用上次产物耗时接近 0 秒这正是提速 10 倍的秘密——首次构建或许差别不大但第二次、第三次构建当大部分包没有变更时tsc --build只需几百毫秒而全量编译依然要数秒甚至数十秒。改动越少、包越多收益越夸张。配套实践让 monorepo 体验更丝滑 sample-monorepo 还示范了几个配套技巧npm workspaces根 package.json 通过workspaces: [packages/*]统一管理依赖配合 lerna.json 的useWorkspaces配置一条npm install搞定所有包测试链路pretest脚本package.json先 lint 再 buildtest:only用 Node 原生node --test配合 source-map 直接跑编译产物前端构建app 包用 webpack 打包packages/app/webpack.config.js编译产物经dist目录暴露server 端通过sample/app直接引用给你的项目落地三步走 ✅想在自己的 monorepo 里复刻这套方案记住这三步拆包把代码按依赖方向拆成多个包确保依赖是单向的配置公共配置开composite根目录建 solution 文件子项目互相references替换命令把tsc换成tsc --build然后享受增量编译的快乐如果你还没克隆项目可以用git clone https://gitcode.com/gh_mirrors/sa/sample-monorepo拿到完整源码对照 tsconfig.base.json 和 tsconfig.json 亲手试一遍npm install npm run build再改一行代码重新构建感受前后两次编译耗时的巨大差异——这比任何教程都更有说服力。总结一下TypeScript Project References tsc --build的组合通过增量缓存 依赖拓扑 按需重建三板斧让 monorepo 的编译从全量重复劳动变成精准的定点修补。sample-monorepo 用不到 50 行配置就完整示范了这套最佳实践是学习 monorepo 工程化不可多得的样板工程。【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考