npm和pnpm的区别

我来详细解释一下 npm 和 pnpm 的区别，帮助你理解它们的特性和适用场景。

1. 基本定义

• npm（Node Package Manager）
  • Node.js 的默认包管理器，历史悠久，生态成熟。
  • 用于安装、管理和发布 JavaScript 包。
• pnpm（Performant npm）
  • 一个更高效的替代品，设计目标是提升性能和节省磁盘空间。
  • 名字中的 "p" 可以理解为 "performant"（高效）。

---

2. 主要区别

依赖管理方式

• npm
  • 使用扁平化的 node_modules 结构（从 npm 3 开始）。
  • 每个项目都会在 node_modules 中复制一份依赖，即使多个项目使用相同版本的包。
  • 可能导致重复安装相同的包，占用更多磁盘空间。
• pnpm
  • 使用内容可寻址存储（Content-Addressable Storage）和符号链接（symlink）。
  • 全局存储所有依赖（默认在 ~/.pnpm-store），项目中的 node_modules 通过符号链接引用全局存储。
  • 避免重复安装，显著节省磁盘空间。

安装速度

• npm
  • 每次安装都需要下载和解压依赖，速度较慢，尤其是大项目。
  • 并行下载，但效率受限于网络和重复操作。
• pnpm
  • 更快，因为它只下载一次依赖并复用。
  • 使用硬链接和符号链接，安装过程更高效，尤其是重复安装时。

磁盘空间

• npm
  • 每个项目独立存储依赖，空间占用大。
  • 示例：安装 10 个项目，每个用 React，可能有 10 份 React 副本。
• pnpm
  • 全局共享依赖，空间占用小。
  • 示例：10 个项目用 React，只有一份 React 文件，项目通过链接引用。

node_modules 结构

• npm
  • 扁平化结构，所有依赖都在同一层，可能导致“幽灵依赖”（意外访问未声明的包）。
• pnpm
  • 严格的层级结构，只暴露 package.json 中声明的依赖，避免幽灵依赖问题。
  • 通过符号链接模拟扁平化，但更安全。

兼容性

• npm
  • 是官方工具，与 Node.js 生态完全兼容。
  • 几乎所有项目和工具都支持。
• pnpm
  • 兼容性很好，但某些老旧项目或工具可能需要额外配置。
  • 社区支持不如 npm 广泛，但正在快速增长。

命令差异

• npm
  • 常用命令：npm install, npm run, npm uninstall。
• pnpm
  • 命令类似，但有些不同：
    • pnpm install（或 pnpm i）
    • pnpm add <package>（替代 npm install <package>）
    • pnpm remove <package>（替代 npm uninstall）
  • 支持 npm 的所有脚本（pnpm run <script>）。

---

3. 优缺点对比

特性	npm	pnpm
速度	较慢	更快（尤其重复安装）
磁盘空间	占用较多	占用少（全局共享）
安全性	可能有幽灵依赖问题	更严格，避免幽灵依赖
生态支持	广泛，官方支持	较新，但增长迅速
学习成本	无需额外学习	略有学习曲线，但命令相似

---

4. 使用场景

• 选择 npm
  • 你需要绝对的兼容性和稳定性。
  • 项目较小，磁盘空间和速度不是主要问题。
  • 团队或 CI/CD 环境已经深度依赖 npm。
• 选择 pnpm
  • 你有多个项目，想节省磁盘空间。
  • 需要更快的安装速度（比如 monorepo 项目）。
  • 想要更严格的依赖管理，避免意外问题。

---

5. 实际例子

假设安装 React：

• npm：

  npm install react
  

  • 下载 React 到项目的 node_modules/react。
  • 另一个项目再装，又下载一份。
• pnpm：

  pnpm add react
  

  • 下载 React 到全局存储（~/.pnpm-store）。
  • 项目通过符号链接引用，第二个项目无需再下载。

---

6. 总结

• npm 是老大哥，稳定可靠，但效率较低。
• pnpm 是新秀，性能优越，适合现代开发，尤其是大型项目或多项目开发。

如果你正在用 <Bars3Icon> 这样的代码（依赖 @heroicons/react），两者都能正常工作，但 pnpm 会更快且占空间更少。