pnpm monorepo 中管理依赖的最佳实践，与 Catalogs（目录）协议的使用（monorepo 中统一版本管理）
monorepo 中如何管理依赖？
在需要的 repo 中安装依赖
在多个 repo 中安装相同依赖，可以使用以下命令：
npm install jest --workspace=web --workspace=mobile --save-devyarn@v1:
yarn workspace web add jest --dev
yarn workspace mobile add jest --devyarn@v2
yarn workspaces foreach -R --from '{web,@repo/ui}' add jest --devpnpm install jest --save-dev --recursive --filter=web --filter=mobile需要注意的是：不同的
包管理器在选择依赖安装的node_modules的位置不同（依赖提升）
优势
- 可维护性： 每个
repo中的package.json都会声明需要的依赖，开发者可以更容易地理解和处理依赖。 - 灵活性： 在大型、复杂的
monorepo中，保持相同版本的依赖是比较困难的。不同的repo的迭代优先级不一致，比如web和ui需要升级react版本，而web可能仍在功能迭代中，ui则可以提前发布相关变更。
简洁的根目录依赖
依赖管理参考
https://github.com/vercel/turborepo/tree/main
https://github.com/vuejs/core/tree/main
幽灵依赖
├── apps
│ ├── mobile (dependencies: {axios: '^1.7.7'})
│ └── web (dependencies: {lodash: '4.17.21'})
└── package.json如何统一依赖版本？
- 使用 syncpack 、 manypkg 和 sherif 等工具
- 使用 pnpm Catalogs 协议
Catalogs
Catalogs 起初是在 Vite Conf 2023 中提出，于今年
7.8号发布: pnpm@9.5，所以使用Catalogs协议请保持你的pnpm版本 >=9.5.0
优势
- 统一版本： 在一个
workspace中，通常希望包之间的依赖可以使用同一个版本，使用Catalogs可以更方便的维护版本统一性 - 减少升级工作量和代码合并冲突： 在升级或降级依赖项时，只需要操作
pnpm-workspace.yaml而不是每个包的package.json，可有效减少冲突的发生。
使用
支持协议的字段
dependenciesdevDependenciesoptionalDependenciespnpm.overrides
默认 Catalog
pnpm-workspace.yamlpackages: - packages/* # Define a catalog of version ranges. catalog: react: ^18.3.1 react-dom: ^18.3.1
package.json{ "name": "@example/app", "dependencies": { "react": "catalog:", // 或者 "react-dom": "catalog:default" } }
可命名的 Catalogs
pnpm-workspace.yamlcatalog: react: ^16.14.0 react-dom: ^16.14.0 catalogs: # Can be referenced through "catalog:react17" react17: react: ^17.0.2 react-dom: ^17.0.2 # Can be referenced through "catalog:react18" react18: react: ^18.3.1 react-dom: ^18.3.1
package.json{ "name": "@example/components", "dependencies": { // 使用 默认配置 "react": "catalog:", // 使用 具名配置 "react-dom": "catalog:react18" } }
发布后将变为以下内容：
package.json{ "name": "@example/components", "dependencies": { "react": "^16.14.0", "react-dom": "^18.3.1" } }
使用 codemod 快速重构项目为 Catalogs 协议
pnpx codemod pnpm/catalogA package.json{ "name": "@example/A", "dependencies": { "react": "^16.14.0", "react-dom": "^18.3.1" } }
b package.json{ "name": "@example/B", "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" } }
执行完命令后：
pnpm-workspace.yamlcatalog: react-dom: ^18.3.1
A package.json{ "name": "@example/A", "dependencies": { "react": "^16.14.0", "react-dom": "catalog:" } }
参考链接
- pnpm Catalogs
- Turbo - Best practices for dependency installation
- vue 是如何使用 catalogs 协议
- ViteConf 2023 | pnpm Catalogs — A New Tool to Manage Dependencies in monorepos
ViteConf 2024
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
2025-05-14
【大杂烩】在 pnpm 中直接修改 node_modules(.pnpm) 中的依赖项，项目中持久化 - pnpm 中的依赖处理、幽灵依赖、寻址规则等
TL;DR:本篇关于 pnpm patch 内容不多，若只需要 patch 使用的相关内容：降落链接 pnpm patch 的使用场景当你需要持久化的修改 node_modules 中的依赖时，如在本地修改依赖进行测试，希望其他人使用的也是修改后的依赖，此时可以使用 pnpm patch 进行依赖修改，将相关变更提交即可。 理论上 pnpm patch 修改的依赖可以在任何环境中使用（如 CI、CD），应用生产前需谨慎使用！ vite 中如何使用 pnpm patch patch 前的知识 1 - pnpm 的依赖管理三层寻址、缓存、isolate(依赖隔离)1. 默认情况下，pnpm 会先将依赖安装到全局 store 中，后续通过 软硬链接 或 clone or copy 复用 Store 中的内容 2....
2024-05-29
一文吃透 pnpm 如何使用 workspace 构建 monorepo，与 npm、yarn 的用法对比（pnpm 9.x 内部安装依赖问题 link-workspace-packages）
环境与版本 platform => mac os node => v22.2.0 npm => 10.8.0 pnpm => 9.1.3 yarn => 1.22.22 名词解释monorepo利用单一仓库来管理多个 packages 的一种策略，如早期的 lerna workspace由上述单仓多包催生的管理方式，workspace（工作空间） 是 npm、yarn、pnpm 等包管理工具提供的一种特性，用于管理多个包的依赖关系。合理配置 workspace 后，包之间互相依赖不需要使用 npm link，将在 install 时中处理 在 pnpm 中使用 workspaceA workspace must have a...
2025-03-06
一键在本地批量检测并升级更新 package.json 中的模块依赖，ncu（npm-check-updates）在 npm、pnpm 或 workspace 项目中的使用教程
简介npm-check-updates（ncu）是一个用于检查和更新工作区内 package.json 中依赖项版本的工具，除了当前项目范围内的依赖外，还可以检查和更新全局类型的依赖，如使用 npm、pnpm，通过 --global 安装的依赖。 使用前需知ncu 能做到的事情，你使用 npm 或 pnpm 等基本都可以做到（如果记得住命令的话~），如只是简单的升级项目或 workspace 中的依赖版本，可使用提供的 update 或 upgrade 等命令。 ncu 支持检查依赖和使用交互模式来更新，且在 workspace 中使用相对更简洁 semver - 语义化版本控制规范 X.Y.Z => Major.Minor.Patch =>...
2024-05-27
npm、yarn、pnpm 设置最新国内镜像源（附官方镜像源和最新阿里源），以及 nrm 的使用教程【2025】
阿里最近（指的是 2022 年~~ 哈哈）更换了淘宝镜像的域名，原域名的 SSL 证书已经过期了（2024/01/22），最近使用旧 淘宝镜像 的应该都遇到 Error: certificate has expired 了吧，遇到了可以看下这个解决方案~ npm查询源npm get registry 设置源# 国内 淘宝 镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry https://registry.npmjs.org/ pnpm pnpm 的镜像源默认与 npm 一致，无需额外设置。 查询源pnpm get registry 设置源# 国内 淘宝...
2024-05-29
使用 pnpm、turborepo 构建 monorepo 项目，changesets 管理日志和版本详解，从零至 github actions（CI）云端缓存 发布 npm 流程
环境与版本 platform => mac os node => v22.2.0 npm => 10.8.0 pnpm => 9.1.3 yarn => 1.22.22 turbo => 1.13.3 changesets => 2.27.5 请注意文档时效和工具版本，浏览前建议查看官方文档，以获得最新信息！ 前置准备 pnpm 使用 workspaceNode corepack 使用pnpm 切换国内镜像源Turorepo 本文档搭配 corepack 更佳~ 还需要掌握 pnpm 的 workspace 相关知识哦~ 快速开始命令初始化pnpm dlx...
2024-05-27
解决 npm、cnpm 或 pnpm install 遇到 certificate has expired （证书已过期）
书接上回~ 前言由于种种原因，大家在使用 npm 或其他包管理工具时，都会更换其默认镜像源，例如：taobao 来提高效率。虽然早在 2022年 时淘宝发布了更换镜像地址的公告，直至 2024/01/22 SSL 证书过期前服务都是可用的。 由于 npm 默认开启了 ssl 验证，你可以选择关闭该项服务（不推荐，仅建议使用内部源时）或者更换正确的镜像源。 方案更换镜像源（推荐） 更多方法点击链接查看 > > > npm查询源npm get registry 设置源# 国内 淘宝 镜像源 npm config set registry https://registry.npmmirror.com/ # 官方镜像源 npm config set registry...
评论
最新文章
