为什么我推荐所有人用 pnpm?3 个理由让 npm 彻底出局

78 阅读2分钟

大家好,我是大华!

你有没有经历过,新项目拉下来,npm install一跑,咖啡都凉了,进度条才走一半。 同事老赵执行了:npm i xxx 结果 3 分钟还在 resolve dependencies…… 我:pnpm add @tiptap/vue-3。12 秒,完事。

1. 为什么?

npm会重复下载你电脑里之前就存在的包。而pnpm会先去仓库看一眼,有就直接硬链接,没有才会下载。

简单点说就是同一个包,只下载一次,然后存到一个地方。所以体积也会更小。

2. 省硬盘

你电脑是不是经常C盘红了?

node_modules动不动几个G,尤其搞微前端的朋友、多项目并行开发的时候。 npm每个项目都复制一套node_modules,太浪费。

pnpm的做法就很棒: 所有包都存在全局一个目录里(比如 ~/.pnpm-store)。 我自己测试:

  • 5个React项目,用npm:总共占了8.7G
  • 同样5个项目,用pnpm:总共 3.2G

直接省了5个G。


3. 锁文件更稳

你有没有遇到过: 同事跑项目报错,说某个包找不到方法。 你一看,你这边好好的。一查,他装的包版本不对。 其实是锁文件(lockfile)没锁住,依赖树乱了。 npmlockfile有时候不太坚定。 pnpmpnpm-lock.yaml更严格。 它记录了依赖的版本、来源、甚至还有包的哈希值。 装出来的结构,几乎100%一致。

案例:

我们有个项目,之前每次交接给测试,总有人装完跑不起来。 排查半天,发现是某个包的子依赖版本不对。 换了pnpm后,这个问题再也没出现过。 测试小姐姐都说:“现在拉代码,pnpm install完就能跑,可省心多了。”


npm怎么切换pnpm?

# 全局装 pnpm
npm install -g pnpm

# 之后的项目都可以这样用
pnpm add axios
pnpm add -D eslint
pnpm install  # 相当于 npm install

你原来的package.json完全不用动。 第一次运行pnpm install,它会自动生成pnpm-lock.yamlpnpm-store

就是这么简单。

我是大华,专注分享前后端开发的实战笔记。关注我,少走弯路,一起进步!

📌往期精彩

《Elasticsearch 太重?来看看这个轻量级的替代品 Manticore Search》

《别再if套if了!Java中return的9种优雅写法》

《别学23种了!Java项目中最常用的6个设计模式,附案例》

《写给小公司前端的 UI 规范:别让页面丑得自己都看不下去》

《Vue3+TS设计模式:5个真实场景让你代码更优雅》