当前位置: 首页 > news >正文

Pnpm:包管理的新星,如何颠覆 Npm 和 Yarn

在探索现代 JavaScript 生态系统时,我们常常会遇到新兴技术的快速迭代和改进。其中,包管理工具的发展尤为重要,因为它们直接影响开发效率和项目性能。最近,pnpm 作为一种新的包管理工具引起了广泛关注。它不仅挑战了传统工具如 npmYarn,还提供了一些独特的优势,使其在许多方面超越了前辈。

为了更好地理解 pnpm 的优势,我们从包管理工具的历史开始探索,从 npm2 开始的各个阶段。我们将看到 pnpm 如何通过技术创新解决历史遗留问题,并极大地提高性能和效率。接下来,深入了解 pnpm 的核心机制以及它如何改变开发者处理依赖管理的方式。

npm2

使用 Node 版本管理工具将 Node 版本降级到 4,然后 npm 版本将是 2.x

bbe7d64c7b951605784e01781d63c800.png

在一个目录中运行 npm init -y 快速创建一个 package.json 文件。

然后运行 npm install express,express 包及其依赖项将被下载:

087821fc2cbc072f2826bc815feacd4d.png

展开 express,它也有 node_modules

176109b05ffc34cac8a505c875573082.png

继续展开几层,每个依赖项都有自己的 node_modules

8acbf93385c7ffc9b715ccbf3f765979.png

换句话说,npm2 的 node_modules 是嵌套的。

这正常吗?这有什么问题吗?

实际上,这确实有问题。多个包不可避免地具有共同的依赖项。当像这样嵌套时,相同的依赖项将被多次重复,占用了相对较大的磁盘空间。

这还不是最大的问题;致命的问题是 Windows 中文件路径的最大长度超过 260 个字符。像这样嵌套会超过 Windows 的路径长度限制。

在 npm 尚未解决这个问题时,社区出现了一个新的解决方案:yarn

yarn

Yarn 如何解决重复依赖和过长嵌套路径的问题?

扁平化。所有依赖项不再逐层嵌套,而是全部处于同一层级,因此不再存在重复依赖或路径过长的问题。

我们删除 node_modules,使用 Yarn 重新安装并执行 yarn add express

此时,node_modules 看起来像这样:

06956e1a3492738a21df03a3e71989f4.png

所有依赖项都在同一层级,大多数包在其下没有第二层 node_modules

93536310ce3762a22b84975ea45bcef4.png

当然,有些包仍然有 node_modules,例如这个:

815558361b01a81533650a44cd7029de.png

为什么仍然存在嵌套?

因为一个包可能有多个版本,并且只有一个版本可以被提升。因此,当遇到不同版本的同一包时,仍然使用嵌套。

npm 升级到版本 3 后,也采用了这种扁平化解决方案,与 yarn 非常相似:

53a735e7f5a691e3e2e3e7358fcc1224.png

当然,yarn 也实现了 yarn.lock 的功能来锁定依赖项版本,但 npm 也实现了这一点。

yarnnpm 都采用了扁平化解决方案。这种方法没有问题吗?

不完全是,扁平化解决方案也有自己的问题

主要问题是幽灵依赖,这意味着在代码中可以引入未在依赖项部分声明的依赖项。

这很容易理解,因为一切都是扁平化的,所以可以找到依赖项的依赖项。

然而,这带来了风险,因为没有明确的依赖声明,如果有一天另一个包不再依赖于那个包,你的代码将无法运行,因为依赖于它,但现在没有安装。

这就是幽灵依赖的问题

另一个问题是多个版本的依赖项,如上所述。只有一个版本会被提升,而其他版本则会重复多次,导致磁盘空间浪费。

社区有解决这两个问题的想法吗?

当然有!这就是为什么引入了 pnpm

pnpm

回顾一下,为什么 npm3yarn 扁平化 node_modules?不就是因为相同的依赖项会被多次重复,并且长路径可能会在 Windows 上引发问题吗?

如果我们不重复它们,而是使用链接呢?

首先,介绍链接。它是操作系统提供的软链接和硬链接。硬链接是同一个文件的不同引用,而符号链接会创建一个新文件,其内容指向另一个路径。当然,这两种链接的使用方式是类似的。

如果不复制文件,而是将 npm 包的唯一副本存储在全局仓库中,并将其他位置链接到它呢?

这样就不会因多次复制而浪费磁盘空间,也不会有路径过长的问题。路径长度的限制本质上意味着不应该有太深的目录层级;现在所有位置的目录是链接在一起的,而不是在同一个目录中,因此没有长度限制。

是的,pnpm 通过这种方法实现了这一点。

再次删除 node_modules,然后使用 pnpm 通过运行 pnpm install 重新安装。

你会注意到它打印出这样一句话:

81d07585d7dbeed4dccc2b09875ecf13.png

软件包从全局存储硬链接到虚拟存储,这里的虚拟存储是 node_modules/.pnpm

我们打开 node_modules 看一看。

183653422b5b2526f6d55a72119768cd.png

确实不是扁平的,依赖 express,所以在 node_modules 下只有 express,没有任何幽灵依赖。

展开 .pnpm 看看:

9d322ffb7a06115d185ee80414ce0a21.png

所有依赖项都在这里解决,全部从全局仓库直接链接过来,并通过符号链接组织包之间的依赖关系。

例如,.pnpm 下的 express,都是符号链接。

625a41e037dd0f16cd4e2a9733610ad3.png

换句话说,所有依赖项都是从全局仓库硬链接到 node_modules/.pnpm,然后它们通过符号链接相互依赖。

官方提供了一个示意图,结合起来看很清楚:

ae68435e05f539a97f76e52ce9e51d22.png

这就是 pnpm 的实现原理。

pnpm 的优越性

首先,最大的优势是节省磁盘空间。包只在全局保存一份,其余的都是符号链接或硬链接。这节省了大量磁盘空间。

其次,它很快,因为它使用链接而不是复制,这自然使它更快。

这些也是它所宣称的优势:

600dd09771bbf79e8fa2f1b062dc65e2.png

相比 npm2,优势在于不会多次重复相同的依赖项。

相比 yarn 和 npm3+,没有幽灵依赖,也没有未提升依赖项的重复问题。

这已经足够优秀,可以说是对 yarn 和 npm 的一次打击。

结语

最近,pnpm 频繁被提及,可以说是当下的趋势。在本文中,我们总结了其受欢迎的原因:

npm2 以嵌套方式管理 node_modules,导致多次重复依赖项的问题。

npm3+ 和 yarn 通过扁平化方式管理 node_modules,解决了嵌套方式的一些问题,但引入了幽灵依赖的问题。此外,同名包只有一个版本被提升,而其他版本仍会重复。

pnpm 通过不复制文件,而是从全局仓库硬链接到 node_modules/.pnpm,并通过符号链接组织依赖关系,解决了这些问题。

这不仅节省了磁盘空间,消除了幽灵依赖问题,还加快了安装速度。从机械角度来看,pnpm 超越了 npm 和 yarn。

通过这种对 npm 和 yarn 的创新方法,pnpm 正在通过简化依赖管理的方式产生影响。

最后:

vue2与vue3技巧合集

VueUse源码解读

相关文章:

  • 四川汇聚荣科技有限公司怎么样?
  • ansibie yum模块
  • 项目3:从0开始的RPC框架(扩展版)-2
  • 【地质灾害监测实现有效预警,44人提前安全转移】
  • linux关于epoll概述(各项组成,以及作用)
  • 前后端分离后灰度发布实现方式
  • iOS Facebook SDK 安装
  • 针对ARM64嵌入式系统的Linux内核参数优化
  • vlan三层交换技术--交换机--(自作)
  • 测试测量-DMM直流精度
  • 我的常见问题记录
  • 学习C++第二天
  • Springboot微服务整合缓存的时候报循环依赖的错误 两种解决方案
  • 深入理解go语言反射机制
  • 电压互感器在线监测的原理
  • JavaScript-如何实现克隆(clone)函数
  • CSS3 变换
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • mysql_config not found
  • orm2 中文文档 3.1 模型属性
  • React 快速上手 - 07 前端路由 react-router
  • SpingCloudBus整合RabbitMQ
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • 搞机器学习要哪些技能
  • 基于Vue2全家桶的移动端AppDEMO实现
  • 解析带emoji和链接的聊天系统消息
  • 跨域
  • 类orAPI - 收藏集 - 掘金
  • 每天10道Java面试题,跟我走,offer有!
  • 如何合理的规划jvm性能调优
  • 如何利用MongoDB打造TOP榜小程序
  • 如何胜任知名企业的商业数据分析师?
  • 数据结构java版之冒泡排序及优化
  • 微服务入门【系列视频课程】
  • 这几个编码小技巧将令你 PHP 代码更加简洁
  • 做一名精致的JavaScripter 01:JavaScript简介
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (13)DroneCAN 适配器节点(一)
  • (2024,LoRA,全量微调,低秩,强正则化,缓解遗忘,多样性)LoRA 学习更少,遗忘更少
  • (C++20) consteval立即函数
  • (LeetCode 49)Anagrams
  • (Matlab)使用竞争神经网络实现数据聚类
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (八)Flink Join 连接
  • (七)glDrawArry绘制
  • (算法)硬币问题
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • (原创)boost.property_tree解析xml的帮助类以及中文解析问题的解决
  • (转)chrome浏览器收藏夹(书签)的导出与导入
  • ***详解账号泄露:全球约1亿用户已泄露
  • .jks文件(JAVA KeyStore)
  • .Mobi域名介绍