前端npm和pnpm

1. npm和pnpm是什么？

两个本质是两款不同的包管理工具，核心差异体现在依赖安装、存储和性能等方面。

• npm：安装node后默认会自带安装(node安装时候默认安装了npm包管理工具插件)

  // 检查是否安装npm
  npm -v
  // 如果提示不到，则说明Node.js 没装好，或者安装后没有正确配置系统环境变量
  

• pnpm：需要通过npm进行安装，可以理解为是一个包管理工具插件

  // 检查是否安装pnpm
  pnpm -v
  // 如果提示「command not found」，想装的话执行：
  npm install -g pnpm
  

2. npm和pnpm区别

• (2.1)依赖存储机制（最核心差异）
  • npm：采用 “扁平化 + 复制” 的方式。npm@3 + 虽然做了依赖扁平化，但每个项目的node_modules里，依赖包都是完整复制一份，不同项目即使依赖同一个版本的包，也会重复存储，导致磁盘空间占用大
  • pnpm：
    采用 “内容寻址存储（CAS）+ 硬链接 / 符号链接” 的方式。
    • 全局存储：所有项目的依赖包会统一存储在电脑的一个全局目录（如~/.pnpm-store），同一个版本的包只存一次
    • 链接引用：项目的node_modules里的依赖，其实是指向全局存储的硬链接 / 符号链接，而非完整复制。
      效果：磁盘占用极少（通常比 npm 节省 70% 以上空间），安装速度也更快
• (2.2)安装速度
  • npm：安装时需要下载并复制文件到项目目录，依赖越多、重复依赖越多，速度越慢。
  • pnpm：因为复用全局存储的文件（仅创建链接），无需重复下载 / 复制，安装速度通常是 npm 的 2-3 倍，甚至更快。
• (2.3)安装速度
  • npm：为了避免依赖冲突，会把嵌套依赖 “拍平” 到node_modules根目录，可能导致依赖结构混乱（比如子依赖的依赖出现在根目录），甚至出现 “幽灵依赖”（没在package.json声明却能引用的包）。
  • pnpm：默认创建严格的嵌套依赖结构（通过符号链接实现），node_modules里只有package.json声明的直接依赖，没有幽灵依赖，更符合规范，也能避免依赖冲突。

3. 如果拿到一个全新的、没有任何依赖安装痕迹(无 node_modules、无任何锁文件)的项目中，如何选择 npm install 还是 pnpm install？

• (3.1)先查项目是否有「包管理器约定」（最优先）
  即使没有锁文件，项目中可能会有明确的包管理器使用说明，这是最该遵循的依据
  • 查看项目文档：优先看 README.md、CONTRIBUTING.md 等文件，里面通常会写「安装依赖请执行 pnpm install」或「npm install」；
  • 查看 package.json 中的特殊配置：
    • 如果 package.json 里有 "packageManager": "pnpm@10.8.0" 这类字段（npm/yarn 也有类似），这是项目明确指定的包管理器版本，必须按这个来
    • 如果有 pnpm-workspace.yaml 文件（多包仓库），说明项目是为 pnpm 设计的，只能用 pnpm；
  • 查看脚本命令：看 package.json 的 scripts 字段，比如有 "install": "pnpm install --frozen-lockfile"，说明推荐用 pnpm。

• (3.2)无约定时：按需求选择 npm 或 pnpm
  

  如果项目完全没有任何包管理器的约定，就根据自身需求和场景选，以下是核心对比：
  image.png
  
  推荐选择逻辑：
  • 新手 / 快速上手：选 npm install
    无需额外安装，Node 安装后直接能用，学习成本低，适合简单项目、初次接触前端的场景
  • 追求效率 / 团队协作 / 大型项目：选 pnpm install
    安装速度快、磁盘占用少，锁文件更稳定，尤其适合 monorepo 项目，团队协作时能避免依赖版本不一致的问题；
  • 踩坑后兜底：如果用 pnpm 安装后出现奇怪的依赖问题（极少见），再换成 npm 试试。

4. 如果是非全新，当前工程项目之前安装了部分依赖，怎么判断使用哪种包管理工具进行安装的

你想确认当前项目的依赖最初是用 npm 还是 pnpm 安装的，这个需求很常见，主要可以通过查看项目文件和目录特征来精准判断，我会一步步教你怎么看

• (4.1)核心判断依据：锁文件（最准确)
  

  包管理器在安装依赖时会生成专属的锁文件，这是判断的核心依据：
  image.png
• (4.2)辅助判断：node_modules 目录特征
  pnpm 安装的 node_modules 有明显特征，和 npm 差异很大：
  • npm 安装的 node_modules：所有依赖包直接平铺在 node_modules 下（比如 node_modules/eslint、node_modules/react）；
  • pnpm 安装的 node_modules：
    1.根目录下只有项目直接依赖的包（且多为软链接）；
    2.会有一个隐藏目录 node_modules/.pnpm，所有依赖的实际文件都存在这个目录里；
    3.可以打开终端执行 ls -la node_modules（Mac/Linux）或 dir node_modules（Windows）查看。