Yarn 与 pnpm

npm 之外，Yarn 与 pnpm 是前端最常用的两种替代包管理器。它们解决的核心痛点相似：更快、更稳、更省磁盘——但实现机制不同，lockfile 格式也不兼容。

学习目标

• 对比 npm、Yarn、pnpm 的安装速度与磁盘占用
• 知道各 lockfile 文件名与混用风险
• 能为小团队或 monorepo 做初步选型

三者对比

	npm	Yarn (Berry/Classic)	pnpm
lockfile	package-lock.json	yarn.lock	pnpm-lock.yaml
磁盘	每项目完整 node_modules	依版本而定	全局 store + 硬链接
严格性	可配置	Plug'n'Play（Berry）更严	非扁平 node_modules，防幽灵依赖
常见场景	默认、文档最多	老项目、部分企业	monorepo、Next/Vite 生态

幽灵依赖：代码 import 了未在 package.json 声明、仅被其他包带进 node_modules 的包——pnpm 默认更难犯此错。

基本用法对照

# npm
npm install
npm install axios

# Yarn
yarn
yarn add axios

# pnpm
pnpm install
pnpm add axios

scripts 字段三家通用：pnpm run dev 与 npm run dev 读同一份 package.json。

何时选谁

1. 已有 lockfile：别随意换管理器——换就要全团队换并重新生成 lock
2. monorepo：pnpm workspace、Yarn workspaces 都成熟；看团队熟悉度
3. Next.js / Vite 模板：官方示例多支持三者；跟文档默认即可

本站 platform 若使用 pnpm，通常根目录有 pnpm-lock.yaml；读 nextjs-essentials 时留意 README 里的安装说明。

与 html-css 静态页的区别

html-css-essentials 可以用纯 HTML 文件打开浏览器；一旦引入 React、Tailwind、PostCSS，几乎必然进入 npm 系工具链——本课是「从单文件到工程」的分水岭。

版本与 Corepack

Node 16+ 可启用 Corepack 锁定 Yarn/pnpm 版本，避免「我本地 Yarn 1、CI 是 Yarn 4」：

corepack enable
corepack prepare pnpm@latest --activate

练习

• 同一 Vite 模板分别用 npm 与 pnpm 安装，对比 体积（粗略即可）