这些前端新技术你很难再忽视了 —— pnpm

·  阅读 3156
这些前端新技术你很难再忽视了 —— pnpm

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第13天,点击查看活动详情


新系列《这些前端新技术你很难再忽视了》,包括:SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势,很有必要了解。

咱们将采用 5W1H 分析法,即 What(何事)、Why(何因)、Where(何地)、When(何时)、何人(Who)、How(何法)6 个维度来解析这些“新玩意儿”。

本篇带来 —— pnpm

闲话少说,冲了~

  • 点赞收藏关注,今晚一夜暴富 👍👍👍

🤔What

什么是 pnpm?

答:简单理解 pnpm 就是 npm、yarn 的同类竞争对手,是一款现代包管理器。

🧐Why

那为什么要选 pnpm ,而不是 npm 或 yarn 呢?给出理由

答:我不但能给出理由,还能给出 3 大点!

  1. 节省磁盘空间

当使用 npm 或 Yarn 时,如果你有 100 个项目,并且所有项目都有一个相同的依赖包,那么, 你在硬盘上就需要保存 100 份该相同依赖包的副本。然而,如果是使用 pnpm,依赖包将被 存放在一个统一的位置。

如果你对同一依赖包需要使用不同的版本,则仅有 版本之间不同的文件会被存储起来。例如,如果某个依赖包包含 100 个文件,其发布了一个新 版本,并且新版本中只有一个文件有修改,则 pnpm update 只需要添加一个 新文件到存储中,而不会因为一个文件的修改而保存依赖包的 所有文件。

所有文件都保存在硬盘上的统一的位置。当安装软件包时,其包含的所有文件都会硬链接自此位置,而不会占用 额外的硬盘空间。 这让你可以在项目之间方便地共享相同版本的依赖包。

  1. 安装包速度快

安装包速度有多快呢?看官网 github.com/pnpm/benchm… 生图直出:

image.png

可以看到,在多数场景下,pnpm 包安装的速度都是明显优于 npm/yarn,速度会快 2-3 倍。

  1. 非扁平 node_module 结构

当使用 npm 安装依赖包时,所有软件包都将被提升到 node_modules 的 根目录下。

这样会有几个问题:幽灵依赖、不确定性、依赖分身,我们逐个解析~

  • 幽灵依赖

幽灵依赖的定义是:子依赖提升造成的,虽然不会出现在package.json中(声明缺失),但是仍可以在项目中正常被 import,即可以访问非法(未声明的) npm 包。

比如 A@1.0.0 依赖 B@1.0.0

node_modules
├── A@1.0.0
├── B@1.0.0
└── C@1.0.0
  └── node_modules
    └── B@2.0.0
复制代码

在package.json中,没有 B 依赖的声明,因为它是子依赖,被扁平化 提升 到了和 A 一个层级而已。

{
  "dependencies": {
    "A": "^1.0.0",
    "C": "^1.0.0"
  }
}
复制代码

虽然没有在package.json中声明,但在项目中引用 B 还是能正常工作的,如果某天某个版本的 A 依赖不再依赖 B 或者 B 的版本发生了变化,那么就会造成依赖缺失或兼容性问题。

  • 不确定性

不确定性是指:同样的 package.json 文件,install 依赖后可能不会得到同样的 node_modules 目录结构

沿用上面的例子,A 依赖 B@1.0,C 依赖 B@2.0,在 package.json 安装 B 依赖,究竟应该提升 B 的 1.0 还是 2.0?就有两种情况了:

node_modules
├── A@1.0.0
├── B@1.0.0
└── C@1.0.0
  └── node_modules
    └── B@2.0.0
复制代码
node_modules
├── A@1.0.0
│ └── node_modules
│   └── B@1.0.0
├── B@2.0.0
└── C@1.0.0
复制代码

这样就取决于用户的安装顺序了,或者要删掉重装,否则导致扁平化处理中提升不一致,导致“不确定性”。

  • 依赖分身

依赖分身指的是:相同版本的依赖被重复安装

在上例基础上,我们假设再新增两个依赖关系:A 和 D 都依赖 B@1.0.0、C 和 E 都依赖 B@2.0.0

关系演变成:

node_modules
├── A@1.0.0
├── B@1.0.0
├── D@1.0.0
├── C@1.0.0
│ └── node_modules
│   └── B@2.0.0
└── E@1.0.0
  └── node_modules
    └── B@2.0.0
复制代码

可以看到 B@2.0 会被安装两次,实际上无论提升 B@1.0.0 还是 B@2.0.0,都会被重复安装。

pnpm 则是通过使用符号链接的方式仅将项目的直接依赖项添加到 node_modules 的根目录下。既保证了安全性,又解决了非法访问依赖、不确定性、重复安装的问题。

image.png

🤫Where

官方文档地址?还是看文档更准确。

答:www.pnpm.cn/

image.png

🙄pnpm

pnpm 什么时候诞生的?

答:pnpm 于 2017 年 6 月发布。

目前 npm 上周下载量已经有 10w +、github star 18k+

同时要提到的是:npm 是 2010 年 1 月 诞生,yarn 则在 2016 年 6 月诞生。

😄Who

pnpm 作者是谁?

答:Zoltan Kochan

首先他看到了 yarn 对 npm 在一致性、安全性、离线安装和性能方面的问题的解决,然后再在这个基础上,采用硬链接和软链接的方式,提高了安装速度、节约了磁盘空间、避免了“依赖分身”和“幻影依赖”的问题。

image.png

😁How

怎么使用?

答:跟 npm install 类似,安装项目下所有的依赖。

// 安装 axios
pnpm install axios
// 安装 axios 并将 axios 添加至 devDependencies
pnpm install axios -D
// 安装 axios 并将 axios 添加至 dependencies
pnpm install axios -S
// 移除 axios
pnpm uninstall axios --filter package-a
// 将本地项目连接到另一个项目
pnpm link ../../axios
复制代码

小结:本篇仅为初探,期待后续有更多探索,以及 pnpm 有更好的发展~

OK,以上便是本篇分享。点赞关注评论,为好文助力👍

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

分类:
前端
收藏成功!
已添加到「」, 点击更改