背景

前段时间，antfu 大佬发布了一篇博客，博客内容就是讲为了更好的对依赖进行分类管理，开发了一个 vscode 插件 PNPM Catalog Lens。

这个插件的作用就是能够高亮显示项目依赖的类别，大家也可以去体验一下，插件的效果大概就是长这样：

那这个插件是如何获取依赖的类别的呢，博客中也提到了，主要是基于 pnpm 的 catalog功能实现的。

这里简单讲一下什么是 pnpm 的 catalog功能：

官方定义： “Catalogs” 是一个工作空间功能，可将依赖项版本定义为可复用常量。 目录中定义的常量稍后可以在 package.json 文件中引用。

简单来说，就是 pnpm 官方提供的一种依赖管理方式，可以将依赖项版本定义在 pnpm-workspace.yaml文件中，然后在 package.json 文件中引用。

具体用法是这样的：

# pnpm-workspace.yaml
# 定义目录和依赖版本号
catalog:
react: ^18.3.1
redux: ^5.0.1

// package.json
{
"dependencies": {
"react": "catalog:", // 引用依赖
"redux": "catalog:" // 引用依赖
}
}

其中 catalog 分为默认目录和具名目录：

• 默认目录：顶层 catalog 字段允许用户定义一个名为 default 的目录,这些版本范围可以通过 catalog:default 引用,也可简写为 catalog:

# pnpm-workspace.yaml
# 定义默认目录
catalog:
react: ^18.3.1
redux: ^5.0.1

// package.json
{
"dependencies": {
"react": "catalog:default", // 引用默认目录
"redux": "catalog:" // 引用默认目录
}
}

• 具名目录：可以在 catalogs 键下配置具有名称任意选择的多个 catalog,这些目录可以通过 catalog:名称 引用。

# pnpm-workspace.yaml
# 定义具名目录
catalogs:
# 可以通过 "catalog:react17" 引用
react17:
react: ^17.0.2
react-dom: ^17.0.2
# 可以通过 "catalog:react18" 引用
react18:
react: ^18.2.0
react-dom: ^18.2.0

// package.json
{
"dependencies": {
"react": "catalog:react18", // 引用具名目录
"react-dom": "catalog:react18" // 引用具名目录
}
}

这个 catalog 的好处非常多：

• 维护唯一版本：catalog可以让工作区内共同依赖项的版本更容易维护。 重复的依赖关系可能会在运行时冲突并导致错误。 当使用打包器时，不同版本的重复依赖项也会增大项目体积。
• 易于更新：升级或者更新依赖项版本时，只需编辑 pnpm-workspace.yaml 中的目录，而不需要更改所有用到该依赖项的 package.json 文件。
• 减少合并冲突：由于在升级依赖项时不需要编辑 package.json 文件，所以这些依赖项版本更新时就不会发生 git 冲突。

这个插件的作用就是基于 catalog 的分类功能，能够高亮显示项目依赖的类别。

开发 CLI 工具

这个插件确实看起来很好用，也比较好看，但是每次安装完依赖都要手动在 pnpm-workspace.yaml 文件中添加，感觉有点麻烦。

于是，我就想着能不能每次安装自动将依赖添加到 pnpm-workspace.yaml 文件中，package.json 文件中自动更新引用。

但是，pnpm 好像并没有提供类似的功能或者插件来扩展安装功能，所以我写了个 CLI 工具 padc 来扩展 pnpm add 的功能。

项目地址： padc

功能

• 自动更新 pnpm-workspace.yaml 目录
• 将 catalog:<name> 引用注入 package.json 中
• 支持完整的 pnpm add 选项透传
• 更方便的多项目依赖分类管理

安装

全局安装 padc 工具：

pnpm i -g padc

使用

padc <package> [-c <catalog>]

• package：要安装的依赖包名称
• -c：指定依赖包的目录名称

如果不指定目录，则可以有以下选择：

• 选择 default 目录，将依赖包添加到 default 目录中
• 选择 catalogs 目录中的一个目录， 将依赖包添加到该目录中
• 创建一个新目录， 将依赖包添加到新创建的目录中

padc lodash -c utils

这会将 lodash 添加到 pnpm-workspace.yaml 中的 utils 目录中，并将 catalog:utils 注入package.json 中。

# pnpm-workspace.yaml
catalogs:
utils:
lodash: ^4.17.21

// package.json
{
"dependencies": {
"lodash": "catalog:utils"
}
}