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

🤔What

什么是 pnpm？

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

🧐Why

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

答：我不但能给出理由，还能给出 3 大点！

节省磁盘空间

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

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

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

安装包速度快

安装包速度有多快呢？看官网 ​​https://github.com/pnpm/benchmarks-of-javascript-package-managers​​ 生图直出：

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

非扁平 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 的根目录下。既保证了安全性，又解决了非法访问依赖、不确定性、重复安装的问题。

🤫Where

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

答：​​https://www.pnpm.cn/​​

pnpm

pnpm 什么时候诞生的？

答：pnpm 于 2017 年 6 月发布。

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

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

Who

pnpm 作者是谁？

答：Zoltan Kochan

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

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 日更文 关注我，安东尼陪你一起度过漫长编程岁月