惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

腾讯CDC
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - Franky
博客园_首页
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
IT之家
IT之家
The Cloudflare Blog
V
Visual Studio Blog
罗磊的独立博客
T
Tailwind CSS Blog
S
SegmentFault 最新的问题
Hugging Face - Blog
Hugging Face - Blog
V
V2EX
阮一峰的网络日志
阮一峰的网络日志
D
Docker
Last Week in AI
Last Week in AI
B
Blog RSS Feed
C
Check Point Blog
J
Java Code Geeks
The GitHub Blog
The GitHub Blog
有赞技术团队
有赞技术团队
博客园 - 聂微东
MongoDB | Blog
MongoDB | Blog
雷峰网
雷峰网

博客园 - 兴杰

JavaScript Library – Astro 前端基础几何计算 – basic geometric tan sin cos CSS & JS Effect – 用 SVG 画曲线和箭头 CSS & JS Effect – 画直角三角形与边框 CSS & JS Effect – 画箭头 C# – Nullable Reference Types ASP.NET Core Library – Magick.NET CSS & JS Effect – Smooth scrollIntoView JavaScript Library – Embla Carousel DOM – checkVisibility 富文本编辑器 ProseMirror 第二篇 の Schema 富文本编辑器 ProseMirror 第一篇 の 初探 JavaScript – Pipeline Operator 工具 – Playwright 工具 – Rsbuild JavaScript Library – Markdown CSS & JS Effect – 大杂烩 BOM – Clipboard API OData – 大杂烩 OData – 基础语法 Basic
工具 - pnpm
兴杰 · 2026-04-04 · via 博客园 - 兴杰

前言

四年前我写过一篇 <Yarn 3.0 Plug'n'Play (PnP) 安装和迁移>

当时非常看好 Yarn 3 + PnP,以为它会是未来趋势。

没想到...使用一阵子后发现,每一次升级都会遇到各种各样的 bug 😨,需要等它 fix issue,真是苦不堪言。

大约撑了一年左右,我就乖乖切换回 non PnP 版本了。

然后我就暂离前端前沿了。

一直到 2026 年回归,赫然发现 pnpm 已经完全取代 Yarn + PnP 了😮。

这篇就来简单介绍一下它🚀。

简单介绍 npm, yarn, pnpm, yarn + pnp

参考: 

主流包管理工具npm、yarn、cnpm、pnpm之间的区别与联系——原理篇

JavaScript package managers compared: npm, Yarn, or pnpm?

npm

npm 是最早的,也是 Node.js 自带的 package manager。

它有两个大问题,第一是超级浪费磁盘空间(因为每一个项目的 package 完全独立,没在管复用的),第二是慢。

Yarn

后来 Yarn 出现了,它比 npm 快一点(因为它做了一些优化),但还是和 npm 一样超级浪费磁盘空间。

pnpm

后来 pnpm 出现了,它和 Yarn 差不多一样快,而且它还解决了磁盘浪费的问题(因为它有一个全局共享 package 的概念)。

虽然它在 2017 年就诞生了,但由于当时设计太前卫,不符合当时的前端生态,所以火不起来,大家依然用 Yarn。

Yarn + PnP

后来 Yarn 推出了 PnP,解决了磁盘浪费问题。

但它的做法非常极端 -- 它把 node_modules 这个圣神的 folder 给干掉了。

这种不符合前端生态的事,根本是犯大忌丫。

于是,大家反而回过头去用 pnpm...

只能说,成也生态,败也生态,这就是前端的乱象。

corepack enable

安装 Node.js 自带 npm。

Yarn 和 pnpm 则需要另外安装。

早年,安装方式是下载 yarn.msi installer,但自从 Node.js 推出 corepack 以后就不这样了。

安装 Node.js 以后,用 administrator 权限打开 cmd,然后输入

corepack enable

它的意思是,透过 Node.js 间接调用 package manager(e.g. npm, Yarn, pnpm)

这样的好处是,如果我们有不同项目,用着不同的 package manager 也不会乱掉。

开启 corepack 以后,在不同项目声明要使用的 package manager 就可以了:

package.json

"packageManager": "pnpm@10.33.0"
// yarn 的话
"packageManager": "yarn@4.13.0"

Tips:要知道最新版本是多少,可以执行 npm view pnpm version 查看。

然后就可以执行各自的 command:

pnpm init
pnpm install
pnpm add rxjs
pnpm add @types/google.maps -D # 或者 --save-dev

yarn init
yarn install
yarn add rxjs
yarn add @types/google.maps --dev

pnpm 常用 command

pnpm init 初始化 package.json

pnpm install 安装所有 package

pnpm start 调用 npm run start,好处就是可以少写一个 run。

pnpm outdated 查看 package 当前版本和最新版本

pnpm update 更新所有 package 到 package.json 限定的最新版本(比如 ^6.0.0 升不到 7)

pnpm update --latest 更新所有 package 到最新版本(超过 package.json 的限定,比如 ^6.0.0 依然升到 7)

pnpm update -i i for interactive,它会让 list out 可升级 package,然后给我们挑选哪一些要升。

corepack use pnpm 升级到最新 pnpm 版本。

pnpm 冷知识

image

虽然表面上看,这个 node_modules 是有占据磁盘空间的,但其实这是假象。

要检验它可以去看 C drive 的磁盘大小

image

这个才准。

pnpm 存 package 的具体位置是 C:\Users\your_user_name\AppData\Local\pnpm\store。