为了更好的使用 antfu 大佬的 vscode 插件，我开发了一个小工具 📦背景前段时间，antfu 大佬发布了一

背景

前段时间，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 目录

例子

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"
  }
}