npm, yarn, pnpm之间的区别

在这里插入图片描述

前言

在现代化的开发中,一个人可能同时开发多个项目,安装的项目越来越多,所随之安装的依赖包也越来越臃肿,而且有时候所安装的速度也很慢,甚至会安装失败。

因此我们就需要去了解一下,我们的包管理器,在前端比较主流的包管理器主要有三个(当然还有其他优秀的包管理器,本文主要介绍这三个),分别是:npm,yarn,pnpm

幽灵嵌套(Phantom Dependency)

在了解包管理器之前,我们先了解一下包管理的一个难题:幽灵嵌套

幽灵嵌套问题通常发生在依赖之间存在复杂的版本要求时,比如:

  • 包 A 依赖于包 B@1.0.0
  • 包 B 依赖于包 C@2.0.0
  • 另一个包 D 也依赖于 C@3.0.0

在传统的依赖管理中,可能会导致包 C 的不同版本被嵌套在不同的子依赖树中,从而在 node_modules 中形成不同路径的多层嵌套,导致路径非常深。这种情况一旦发生,如果包 A 和包 D 不同意版本要求,可能会导致不同版本的包 C 被分别安装在不同的路径下,出现路径冲突甚至依赖问题,这就是“幽灵嵌套”现象。

NPM (Node Package Manager)

概述:

npm 是 Node.js 默认的包管理工具,最早由 Node 社区开发并捆绑到 Node.js 中,因此使用最为广泛。

从npm v2 到npm v7+的升级过程中,从最初使用递归的方法处理依赖,造成高度嵌套的依赖树,到后来使用扁平化管理,一定程度上解决了依赖嵌套问题,但是出现了算法时间过长的问题,最后引入了package-lock.json机制,作用是锁定依赖结构,一定程度上保持了依赖的稳定性

核心:

  • 采用扁平化依赖管理管理方式
  • 每个依赖包都会在 node_modules 中单独安装
  • 相同的依赖可能会被重复安装多次

特点:

  • 优点:
  1. Node.js 默认包管理器,使用最广泛,拥有强大的额社区支持
  2. 最早的包管理器,简单易上手,对初学者友好
  3. package-lock.json 保证依赖版本一致性
  • 缺点:
  1. 安装速度较慢,占用空间大

目录结构:

  • npm v2及以前
  1. 依赖树可能非常深
  2. 相同包会重复安装
  3. 占用大量磁盘空间
  4. 文件路径可能超过 Windows 限制
node_modules
├── A
│   └── node_modules
│       └── B
│           └── node_modules
│               └── C
└── D└── node_modules└── B└── node_modules└── C
  • npm v3-6,扁平化管理
  1. 采用扁平化优先的安装策略
  2. 相同版本的包会被提升到顶层
  3. 不同版本保留在各自的 node_modules 中
  4. 安装算法比较复杂,需要计算依赖树
// 假设依赖关系:
// package-A 依赖 lodash@4.0.0
// package-B 依赖 lodash@4.0.0node_modules
├── package-A
├── package-B
└── lodash     // 被提升到顶层

当有版本冲突时:

// package-A 依赖 lodash@4.0.0
// package-B 依赖 lodash@3.0.0node_modules
├── package-A
├── package-B
│   └── node_modules
│       └── lodash  // 3.0.0 版本
└── lodash         // 4.0.0 版本提升到顶层
  • npm v7+, 改进了扁平化管理,引入peer dependencies 处理
  1. 自动安装 peer dependencies
  2. 更严格的版本锁定
  3. 改进了依赖解析算法
  4. workspaces 支持
node_modules
├── package-A
├── package-B
├── lodash        // 主版本
└── .package-lock.json  // 更严格的版本锁定

Yarn

概述:

Yarn 是一个 JavaScript 包管理工具,最早由 Facebook 推出,主要用于管理项目中的依赖包。和 npm 类似,yarn 解决了在 JavaScript 项目中下载、安装和管理依赖的需求,并在一定程度上改进了 npm 的一些缺点,比如性能、稳定性和安全性。

核心:

  1. 并行下载提升安装速度:

传统的 npm 安装方式是依次下载依赖,而 Yarn 可以同时下载多个依赖,称为“并行下载”。这种方式充分利用了网络带宽,显著减少安装依赖所需的时间,使得安装速度更快。并行下载尤其在大型项目中效果显著,能够有效降低整体安装时间。

  1. 缓存机制减少重复下载:

Yarn 内置了缓存机制,在首次安装依赖时会将其缓存到本地。之后再次安装这些依赖时,如果依赖版本没有改变,Yarn 会直接从本地缓存中读取,而不是重新下载。这样不仅节省了网络请求,还提升了安装速度,特别适合离线开发和持续集成场景。

  1. yarn.lock 确保依赖版本一致性:

Yarn 使用 yarn.lock 文件记录每个依赖的具体版本和来源,确保团队所有成员在不同机器上安装时得到的依赖版本完全一致。这避免了“依赖地狱”问题,即由于版本不一致导致的错误或不兼容情况,从而提高了开发过程的稳定性。

  1. 更安全的依赖解析机制:

Yarn 在安装依赖时会校验每个包的完整性(如 SHA 校验),以确保包的内容没有被篡改。这种安全机制能在下载依赖时检测到潜在的包篡改或恶意代码的引入,增强了项目的安全性。相比于早期的 npm,Yarn 的这种依赖解析机制更加严谨。

  1. Workspace 支持更好的 monorepo 管理:

Yarn 支持 Workspace 功能,允许在单个代码库(monorepo)中管理多个项目或包。这种管理方式可以将多个子项目的依赖集中管理、共享,减少重复依赖的安装。此外,Yarn 还能通过 Workspace 在多个包之间建立相互依赖关系,使 monorepo 项目的开发、构建和测试更加高效。

  1. PnP(Plug’n’Play)模式提供更快的模块加载:

Yarn 2.x 引入了 PnP 模式,这种模式完全去除了 node_modules 目录,通过在 .pnp.cjs 文件中记录依赖映射关系。PnP 不仅减少了磁盘空间的占用,还提升了依赖的加载速度,因为 Node.js 不再需要递归遍历 node_modules。这样可以加快应用的启动速度,同时在依赖数量庞大的项目中减少文件系统的压力。

特点:

  • 优点:
  1. 采用扁平化优先 + 符号链接(符号链接是一个特殊的文件,它包含对另一个文件或目录的引用路径)的组合策略
  2. 相同版本的包会被提升并复用
  3. 不同版本通过符号链接保持正确的引用关系
  • 缺点:
  1. 仍然存在幽灵依赖问题
    尽管 Yarn 已经在扁平化和依赖管理上做了优化,但在一些复杂的项目中仍然会出现幽灵依赖问题。所谓幽灵依赖,指的是某个包在项目中使用但并未在 package.json 中声明,可能是通过其他依赖的间接依赖引入。这种隐式依赖会导致项目依赖关系难以维护,如果间接依赖被移除,可能会导致项目出错。

  2. 某些场景下的依赖解析较慢
    Yarn 的依赖解析虽然比传统 npm 更快,但在依赖结构复杂、依赖版本冲突较多的情况下,解析和处理依赖关系可能会变慢。尤其在 monorepo 中,Yarn 需要处理多个包之间的依赖关系,可能出现解析速度不如 pnpm 的情况。

目录结构:

  • 基本结构
node_modules/
├── package-A/                # 实际文件
├── package-B/                # 实际文件
├── lodash/                   # 提升到顶层的共享包
└── .bin/                     # 可执行文件的符号链接
  • 依赖共享案例
// 假设有以下依赖关系:
项目
├── package-A (依赖 lodash@4.0.0)
└── package-B (依赖 lodash@4.0.0)// Yarn 会创建这样的结构:
node_modules/
├── package-A/
│   └── node_modules/
│       └── lodash -> ../../../lodash  # 符号链接
├── package-B/
│   └── node_modules/
│       └── lodash -> ../../../lodash  # 符号链接
└── lodash/                            # 实际文件
  • 版本冲突处理
// 当存在版本冲突时:
项目
├── package-A (依赖 lodash@4.0.0)
└── package-B (依赖 lodash@3.0.0)// Yarn 会这样处理:
node_modules/
├── package-A/
│   └── node_modules/
│       └── lodash -> ../../../lodash    # 指向4.0.0
├── package-B/
│   └── node_modules/
│       └── lodash/                      # 本地安装3.0.0
└── lodash/                              # 4.0.0版本在顶层

PNPM(Performant NPM)

概述:

pnpm 是一个更现代化的包管理工具,旨在解决 npm 和 yarn 的一些效率和资源管理问题。

  • 核心:
  1. 采用内容寻址存储系统:

pnpm 使用内容寻址(content-addressable storage)来存储依赖包。每个依赖包都会被哈希处理,并根据其内容生成唯一的存储地址。这样,即使多个项目依赖于相同版本的包,pnpm 也只需要存储一份,不会重复存储同样内容的文件。

  1. 使用硬链接和符号链接共享依赖:

pnpm 通过在 node_modules 中创建硬链接或符号链接(symlink),指向内容寻址存储中实际的依赖包。这样每个项目可以“共享”依赖,而不必为每个项目单独存储依赖包内容。

  • 硬链接(Hard Link) :将文件内容链接到项目文件夹下,不占用额外磁盘空间。
  • 符号链接(Symlink) :为特定版本的包创建路径映射,使项目代码能够准确找到每个依赖包版本的地址。

特点:

  • 优点:
  1. 显著节省磁盘空间
  2. 安装速度快
  3. 更严格的依赖管理
  4. pnpm-lock.yaml 确保依赖版本一致
  • 缺点:
  1. 不兼容一些使用传统 node_modules 结构的工具和插件:

  2. 在 pnpm 中,每个依赖都有自己的隔离路径,某些工具、插件或构建系统可能会假设 node_modules 目录是扁平的,这可能导致兼容性问题。

  3. 与本地开发和测试环境的潜在不兼容:

  4. 有些项目依赖于本地 node_modules 结构,或者需要直接访问 node_modules 中的文件。在 pnpm 使用内容寻址和符号链接时,这可能会导致某些工具无法正常运行。

目录结构

  • 内容寻址存储
.pnpm-store/
└── v3/└── files/├── 00/                              # 前两位哈希值作为目录名│   └── deadbeef...                  # 包内容的哈希值└── ff/└── cafebabe...                  # 另一个包的哈希值
  • 依赖结构
node_modules/
├── .pnpm/
│   ├── react@17.0.2/
│   │   └── node_modules/
│   │       ├── react/                       # 实际文件(硬链接到 store)
│   │       └── loose-envify/                # react 的依赖
│   └── lodash@4.17.21/
│       └── node_modules/
│           └── lodash/                      # 实际文件(硬链接到 store)
├── react -> .pnpm/react@17.0.2/node_modules/react                 # 符号链接
└── lodash -> .pnpm/lodash@4.17.21/node_modules/lodash             # 符号链接

目录说明

  • .pnpm/ 文件夹:存放项目的所有依赖包,按 包名@版本号 命名,并在其 node_modules 文件夹中包含该包的实际文件和依赖项。

  • 硬链接:.pnpm 中的实际文件并不是直接复制到每个项目中,而是通过硬链接指向 pnpm 的全局缓存存储目录 (pnpm store)。这样,不同项目间的相同版本依赖不需要重复下载。

  • 符号链接:pnpm 会在项目的 node_modules 根目录创建符号链接,将每个包链接到 .pnpm 中实际的包路径。例如:

  • node_modules/react 是一个符号链接,指向 .pnpm/react@17.0.2/node_modules/react
    node_modules/lodash 符号链接指向 .pnpm/lodash@4.17.21/node_modules/lodash

工作原理

  • 包安装:pnpm 会将依赖包下载到全局缓存 (pnpm store) 中,并将实际文件硬链接到 .pnpm 文件夹中的特定版本目录下。
  • 创建符号链接:在项目的 node_modules 文件夹内创建符号链接,将包名称指向 .pnpm 中的对应路径。
  • 引用:项目中的 require(‘react’) 会自动找到 node_modules/react 符号链接,并通过符号链接访问实际文件。

总结:

三者同异:

在这里插入图片描述

使用选择:

基于这些特点:

  • 如果项目体积较小,团队成员 Node.js 经验不同,推荐使用 npm
  • 如果需要更好的性能和可靠性,推荐使用 yarn
  • 如果需要最严格的依赖管理、最小的磁盘空间占用,推荐使用 pnpm

常用命令:

npm、yarn 和 pnpm 的常用命令对比表:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/34711.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

vscode上传本地文件到服务器

vscode上传本地文件到服务器 首先下载插件SFTP,我们通过ftp进行文件传输 VScode打开要传输的文件 使用快捷键 ctrlshiftP 打开搜索窗口,搜索SFTP 点击之后vscode文件夹下会生成对应json文件 我们编辑json信息根据远程的服务器情况填写,比如…

Next.js 实战 (二):搭建 Layouts 基础排版布局

前言 等了许久,Next.js 终于迎来了 v15.x 版本,刚好 Github 上面的旧项目重构完,终于可以放心大胆地去研究 Next.js了。 搭建最新项目可以参考官方文档:Installation 最新的 Next.js 版本,使用的是 React19.x 内测版…

Java的Stirng、StringBuilder、StringJoiner

黑马程序员Java个人笔记 目录 字符串比较 比较 boolean equals boolean equalsIgnoreCase 键盘录入和定义的字符串的比较 StringBuilder 打印 ​编辑 添加元素 反转 获取长度 toString 练习 对称字符串 拼接字符串 StringJoiner 概述 ​编辑 构造方法 只有…

elasticsearch(三)

文章目录 1.数据聚合1.1.聚合的种类1.2.DSL实现聚合1.2.1.Bucket聚合语法1.2.2.聚合结果排序1.2.3.限定聚合范围1.2.4.Metric聚合语法 1.3.RestAPI实现聚合1.3.1.API语法1.3.2.业务需求1.3.3.业务实现 2.自动补全2.1.拼音分词器2.2.自定义分词器2.3.自动补全查询2.4.实现酒店搜…

Python_Flask03

这篇文章主要介绍的是数据库的增删改查操作,无多余好说的。 from flask import Flask from flask_sqlalchemy import SQLAlchemy from sqlalchemy import text from flask_migrate import Migrateapp Flask(__name__)# 本地基础信息的主机名 HOSTNAME "127.0…

Hive分区值的插入

对于Hive分区表,在我们插入数据的时候需要指定对应的分区值,而这里就会涉及很多种情况。比如静态分区插入、动态分区插入、提供的分区值和分区字段类型不一致,或者提供的分区值是NULL的情况,下面我们依次来展现下不同情况下的表现…

安达发|工业镜头APS高级排产的关键约束

工业镜头生产具有其特定的复杂性,如技术要求高、生产周期长、工序多等特点。在应用APS系统进行高级排产时,需要考虑以下关键约束: 1. 技术与质量约束 - 精度要求:工业镜头对精度的要求极高,这直接影响到排产计划中机加…

【SKFramework框架核心模块】3-9、资源模块

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群:398291828小红书小破站 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有用记得一键三连哦。 一、前言 【Unity3D框架】SKFramework框架完全教程《全…

Swing中密码框组件

一、介绍 密码框(JPasswordField)与文本框的定义和用法基本相同,唯一不同的是密码框将用户输入的字符串以某种符号进行加密。密码框对象是通过javax.swing.JPasswordField类创建的。 二、常用构造方法 1、public JPasswordField() 2、pub…

SpringMVC ——(1)

1.SpringMVC请求流程 1.1 SpringMVC请求处理流程分析 Spring MVC框架也是⼀个基于请求驱动的Web框架,并且使⽤了前端控制器模式(是⽤来提供⼀个集中的请求处理机制,所有的请求都将由⼀个单⼀的处理程序处理来进⾏设计,再根据请求…

【英一】1998年

阅读1 suffering. 苦难at the mercy of. 完全受...的支配do ones bidding. 服从某人threaten to. 可能...(发生不好的事情)do more harm than good. 弊大于利strive to. 争取,努力assert. 主张cement. 巩固bid for. (尤指许下诺言)企图获得&…

BT.1120视频传输协议标准介绍

1.BT.1120 BT.656 协议主要是针对 PAL、NTSC下的标清视频。随着高清视频的发展的需要,又推出了 BT.1120 标准,它与 BT656 有许多类似的地方,不同点在于时钟频率更高了,更加适合高清视频的传输,隔行传输和逐行传输兼备。…

RabbitMQ学习-Eleven

SpringBoot中RabbitMQ的消息确认和Return机制 1.再application.yml文件中开启消息确认机制和return机制 spring:rabbitmq:publisher-confirm-type: simplepublisher-returns: true 2.创建confirm和return监听 // MsgConfirmAndReturn.java 中的代码片段Component public cla…

GAMES101 完结篇(笔记和作业)

写在前面 我已经把笔记和作业代码放在了GitHub上,欢迎访问GAMES101笔记及作业 (github.com),如果对你有帮助,欢迎fork or star 下面我想简单介绍一下这里面的东西 Homework Homework文件夹里有0~8的作业框架,参考的其他大佬的代…

修改mobaxterm字体为全绿色

修改前: 修改步骤步骤: 红色方框里面的颜色都改为绿色,然后点击OK 重启mobaxterm即可:

vue+mars3d叠加展示arcgis动态服务

数据格式:使用arcgis发布的动态服务 叠加和移除arcgis服务图层的方法 //加载arcgis地图服务function arcgisServer(i,d,m,p){i[d.data] new mars3d.layer.ArcGisLayer({name:d.label,url:p,flyTo: true})m.addLayer(i[d.data])}//移除arcgis服务范围线function rem…

模型案例:| 手机识别模型!

导读 2023年以ChatGPT为代表的大语言模型横空出世,它的出现标志着自然语言处理领域取得了重大突破。它在文本生成、对话系统和语言理解等方面展现出了强大的能力,为人工智能技术的发展开辟了新的可能性。同时,人工智能技术正在进入各种应用领…

241205_给自己的应用加上语音助手功能

241205_给自己的应用加上语音助手功能 前面我们自己做了一个网易云音乐,但每次都要去点点点显得有点麻烦,所以我就考虑添加一些语音助手的功能。 其实当前在日常windows使用中,我觉得也就音乐播放需要一个语音助手交互,其他的功…

Navicat连接服务器MySQL

Navicat连接服务器MySQL 1. Navicat连接服务器MySQL2. 如何查看MySQL用户名和密码3. 修改MySQL登录密码4. 安装MySQL(Centos7)遇到错误和问题 1. error 1045 (28000): access denied for user ‘root’‘localhost’ (using password:yes) 1. Navicat连接服务器MySQL 选择数据…

得物新一代可观测性架构:海量数据下的存算分离设计与实践

一、引言 得物作为全球领先的潮流网购社区,日益增长的用户和数据带来了巨大的技术挑战。当前,得物的可观测性平台每天生成数PB级Trace数据和数万亿条Span记录,要求平台具备高效的实时处理能力和低成本的数据存储解决方案。 传统的存算一体架…