一文搞懂：pnpm 安装开发依赖（devDependencies）的正确姿势

在前端项目中，dependencies 和 devDependencies 的区分是保障项目轻量化与运行稳定的关键，而 pnpm 作为高效的包管理器，在安装开发依赖时有着清晰的命令逻辑。本文将结合两者的核心差异，详细讲解 pnpm 安装开发依赖的具体命令、使用场景及注意事项，帮你避免依赖配置错误。

一、先明确：为什么要区分开发依赖？

在讲命令前，先回顾核心逻辑——开发依赖（devDependencies）是仅在开发/构建阶段需要的工具，不会随项目上线，比如代码检查的 eslint、打包工具 webpack、编译 SCSS 的 sass-loader 等；而运行依赖（dependencies）是项目上线后必须的“零件”，如 vue、axios 等。

如果把开发依赖误放到 dependencies，会导致生产环境冗余加载，增加项目体积；反之若把运行依赖放错位置，会引发生产环境功能失效。pnpm 通过特定命令，帮我们精准控制依赖的安装分类。

二、pnpm 安装开发依赖的核心命令

pnpm 提供了两种直观的命令，用于将依赖安装到 devDependencies 中，本质是通过参数告诉 pnpm：“这个依赖只在开发时用”。

1. 基础命令：pnpm add --save-dev <包名>

这是最标准的命令，--save-dev 是关键参数，缩写为 -D，作用是将依赖记录到 package.json 的 devDependencies 中。

使用示例：
安装代码检查工具 eslint 和 SCSS 编译工具 sass-loader 作为开发依赖：

# 完整写法
pnpm add --save-dev eslint sass-loader

# 缩写写法（更常用）
pnpm add -D eslint sass-loader

执行后，打开 package.json 会看到：

"devDependencies": {
  "eslint": "^8.57.0",
  "sass-loader": "^14.2.1"
}

2. 全局开发依赖：pnpm add --global --save-dev <包名>

如果某个开发工具需要在所有项目中复用（如脚手架 create-vue、代码格式化工具 prettier），可以安装为全局开发依赖，参数为 --global --save-dev（缩写 -gD）。

使用示例：
全局安装 prettier，方便所有项目调用：

# 完整写法
pnpm add --global --save-dev prettier

# 缩写写法
pnpm add -gD prettier

全局开发依赖会被存放在 pnpm 的全局目录中，而非当前项目，避免每个项目重复安装。

三、关键场景：安装开发依赖的常见需求

除了基础安装，实际开发中还有几种高频场景，需要结合 pnpm 命令灵活处理。

1. 安装指定版本的开发依赖

如果需要锁定开发依赖的版本（如避免 webpack 版本更新导致构建报错），可以在包名后加 @版本号：

# 安装 5.88.2 版本的 eslint
pnpm add -D eslint@5.88.2

2. 安装开发依赖并自动执行配置

部分开发依赖（如 eslint）安装后需要初始化配置文件，pnpm 安装后可直接执行初始化命令，无需额外等待：

# 安装 eslint 并初始化配置
pnpm add -D eslint && npx eslint --init

3. 仅安装生产依赖（排除开发依赖）

当项目部署到生产环境时，不需要安装 devDependencies，可执行以下命令，只安装 dependencies 中的依赖，减少服务器存储占用：

# 仅安装生产依赖
pnpm install --production

四、避坑指南：安装开发依赖的注意事项

1. 不要混淆 -D 和 -S：
   pnpm 中 pnpm add -S <包名>（-S 是 --save 的缩写）会将依赖安装到 dependencies，是运行依赖的命令。若把 sass-loader 用 -S 安装，会导致生产环境冗余加载，务必注意参数差异。

2. 检查依赖是否安装正确：
   安装后可通过 pnpm ls -D 命令查看当前项目的开发依赖列表，确认目标依赖是否在列：

   bash 复制代码

   # 查看所有开发依赖
   pnpm ls -D

3. 全局开发依赖的卸载：
   若需删除全局开发依赖，需用全局卸载命令，避免影响其他项目：

   bash 复制代码

   # 卸载全局开发依赖 prettier
   pnpm remove -gD prettier

五、总结：pnpm 开发依赖命令速查表

为了方便日常使用，整理了核心命令对照表，可直接对照操作：

通过以上命令和规则，你可以用 pnpm 精准管理开发依赖，既保证开发阶段的工具需求，又避免生产环境的冗余加载。如果需要进一步梳理项目中的依赖分类，我可以帮你整理一份 “前端常见开发依赖清单”，包含 eslint、webpack 等工具的安装命令与配置步骤，需要吗？