如何给 sample-monorepo 添加新包10 分钟学会 monorepo 扩展之道【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monoreposample-monorepo是一个使用 npm workspaces 与 TypeScript project references 搭建的 monorepo 示例项目它把前端应用、共享组件和后端服务打包在同一个仓库里统一管理。本文将以实战方式演示如何给 sample-monorepo 添加新包10 分钟带你掌握 monorepo 扩展的核心方法无论你是前端新手还是全栈开发者都能快速上手。为什么选择 monorepo 架构先看懂它的价值 在动手之前先花 1 分钟理解 monorepo 能带来什么好处这样你才知道加一个新包到底在做什么统一依赖管理所有包共享同一个node_modules依赖版本不会打架。一键构建测试在根目录执行一条命令就能构建、测试全部子包。代码共享便利包与包之间可以直接互相引用就像引用本地文件一样简单。sample-monorepo 目前包含 3 个子包前端应用sample/app、共享组件sample/components和 Node 服务端sample/server它们正是 monorepo 协同工作的最佳示范。认识 sample-monorepo 的目录结构 在添加新包之前先熟悉一下仓库的整体布局sample-monorepo/ ├── package.json # 根配置声明 workspaces 和统一脚本 ├── tsconfig.json # 解决方案文件引用所有子包 ├── tsconfig.base.json # 子包共享的 TS 基础配置 └── packages/ ├── app/ # sample/app 前端应用 ├── components/ # sample/components 共享组件 └── server/ # sample/server 服务端关键配置都集中在根目录的 package.jsonworkspaces 声明和 tsconfig.jsonproject references 引用中它们是整个 monorepo 的总开关。添加新包的最快方法5 步实战教程 下面我们以新增一个名为sample/utils的工具包为例演示完整的添加流程。第一步创建包目录并准备 package.json在packages/下新建utils目录并创建 package.json 示例{ name: sample/utils, version: 1.0.0, type: module, exports: { .: ./dist/index.js, ./package.json: ./package.json }, files: [dist, src], license: MIT, private: true }命名遵循sample/前缀方便与现有包风格保持一致也便于npm run -w精确操作单个包。第二步编写 TypeScript 源码创建src/index.ts写入工具函数例如export function greet(name: string): string { return Hello, ${name}!; }再参考现有包的结构为它添加 tsconfig.json继承根配置并指定输出目录{ extends: ../../../tsconfig.base.json, compilerOptions: { outDir: ../dist } }注意输出目录指向包内的dist这样构建产物就和其他包保持一致了。第三步注册到根配置并打通引用这是最容易遗漏的一步打开根目录 tsconfig.json在references数组中追加新包{ files: [], references: [ { path: ./packages/app/src }, { path: ./packages/components/src }, { path: ./packages/server/src }, { path: ./packages/utils/src } ] }workspaces 声明packages/*会自动识别新目录无需额外修改根 package.json 的 workspaces 字段。第四步让其他包引用新包如果sample/components想使用工具函数只需在它的 package.json 中声明依赖dependencies: { sample/utils: ^1.0.0 }然后运行npm installnpm workspaces 会自动建立本地软链接。在源码中直接导入即可import { greet } from sample/utils;第五步构建并验证新包回到仓库根目录运行统一命令验证一切正常npm install # 安装并链接新依赖 npm run build # tsc --build 全量构建 npm test # 运行所有包的测试看到构建通过、测试全绿你的新包就正式加入 sample-monorepo 大家庭了包与包之间如何互相依赖sample-monorepo 的依赖链非常清晰值得参考sample/app→ 依赖sample/components前端组合共享组件sample/server→ 依赖sample/app服务端渲染前端应用这种分层依赖设计让每个包职责单一组件层专注 UI应用层专注业务服务层专注接口。你可以查看 app.tsx 与 main.tsx 观察它们是如何协作的。monorepo 常用命令速查表 ⚡记住这几个命令日常操作基本就够用了命令作用npm run build根目录一键构建所有子包npm test根目录运行全部测试npm run -w sample/utils build只构建指定子包npm run start:client启动前端开发服务器npm run start:server启动服务端新手容易踩的 3 个坑 ️忘了注册 references新包写好了却构建报错多半是根 tsconfig.json 没加引用。npm install 未执行新增包间依赖后必须重新npm install软链接才会建立。导出路径不一致exports字段指向dist但构建产物没生成时引用会报错先构建再引用。总结10 分钟学会 monorepo 扩展之道 ✅通过本文的 5 步教程你已经掌握了给 sample-monorepo 添加新包的完整流程建目录、写配置、注册引用、链接依赖、构建验证。monorepo 的核心思想就是一处管理、全局复用理解了 sample-monorepo 的扩展方式你就能轻松驾驭任何基于 npm workspaces 和 TypeScript project references 的大型项目。现在就去动手创建你的第一个新包吧【免费下载链接】sample-monorepoSample monorepo setup with npm workspaces and typescript project references项目地址: https://gitcode.com/gh_mirrors/sa/sample-monorepo创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考