包管理

前端包管理工具(npm/pnpm/yarn)原理与工作流程

#resource / nodejs #type / concept #status / growing

包管理

[!info] related notes


基础概念

包管理本质上是管理 js 文件依赖。
在之前,前端开发需要手动下载 JS 库文件并放入项目目录,这种方式不仅效率低下,而且难以处理复杂的依赖关系。
随着2009年Node.js和2010年npm的诞生,前端开发进入了模块化新时代。

包管理的主要目标:

  • 依赖解析:自动分析并安装项目直接依赖和嵌套依赖,构建完整的依赖树
  • 版本控制:通过语义化版本(SemVer)规范管理依赖版本,平衡稳定性和新特性获取
  • 资源优化:减少重复依赖的磁盘占用,加快安装速度
  • 生态统一:提供数十万个可重用模块的中央仓库(npm registry),避免重复造轮子

包管理的工作流程:

  1. 解析package.json中的依赖声明
  2. 从registry(如npm官方源或镜像)下载包
  3. 将包解压到node_modules目录
  4. 递归处理每个包的依赖关系
  5. 生成锁文件记录精确的依赖版本和来源

包管理工具:

  • npm
  • yarn
  • pnpm

依赖解析

{
  "name": "project-name",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.2.0" // 生产依赖
  },
  "devDependencies": {
    "webpack": "^5.76.0" // 开发依赖
  },
  "peerDependencies": {
    "react-dom": ">=16.8.0" // 同伴依赖
  }
}

版本控制

**语义化版本控制(Semantic Versioning,SemVer)**是版本控制中的重要概念,用于理解包的版本变更的含义。

版本控制就是让我们能够追踪和管理项目中使用对应软件包的版本。

1. package.json 的依赖声明

功能:
通过语义化版本(SemVer)指定依赖的允许范围(如 ^1.2.0、~2.3.1),但不锁定具体版本。
dependencies:生产环境依赖
devDependencies:开发环境依赖

特点:

  • 允许版本浮动
  • 是包管理器安装依赖的初始依据

2. xxx-lock.json 锁定依赖项

功能:
记录所有依赖及其子依赖的精确版本(如 react@18.2.0),确保跨环境安装的一致性

特点:

  • 优先级高于 package.json 的版本范围:安装时以锁文件中的版本为准,除非显式覆盖(如 pnpm update)。
  • 自动生成:由 pnpm install 根据 package.json 和当前 registry 状态生成。
  • 确定性:解决 “依赖地狱” 问题,避免因版本浮动导致的不可预测行为。

3. package.jsonoverrides 字段

功能:
强制覆盖依赖树中任何层级的依赖版本,无论其他依赖如何声明。

特点:

  • 优先级最高:直接绕过 pnpm-lock.yaml 和 package.json 的原始声明。
  • 作用范围广:可覆盖直接依赖、间接依赖(嵌套依赖)或特定包的子依赖。 -应急使用:常用于修复安全漏洞、解决版本冲突或临时兼容性问题。

怎么指定某个包的版本

删除 node_modules 文件夹方法

直接在 vscode 中删除 node_modules 文件夹可能会很慢:
(1)文件数量巨大:node_modules依赖可能会有上万个文件和文件夹,那么就使得操作系统需要花费非常多的时间来处理每一个文件的删除。
(2)文件系统缓存:操作系统有可能需要花时间去刷新文件系统的缓存,特别是对于那些频繁访问的文件或目录。
(3)文件进程被占用:如果某些进程正在使用 node_modules 中的文件,也就是被正在引用,那么这些文件将无法被删除的,会弹出提示直到相关的进程释放。
(4)磁盘IO限制:硬盘或SSD的读写速度也可能成为瓶颈,尤其是在比较老机械硬盘上,随机读写的性能较低就会特别慢。
(5)图形界面限制:图形界面的文件管理器在处理大量文件时,可能会因为UI的更新和绘制而变慢。

快速删除的方法:

  • rm -rf
  • rmdir /S(cmd)
  • rmdir -Recurse -Force(powershell)
  • mac 右键好像秒删

版本控制相关命令

node -v

pnpm view <package-name> versions #查看远程版本
pnpm list <package-name> #查看本地版本
pnpm info <package-name> #查看包的信息
创建于 2025/1/1 更新于 2026/5/27