一、pnpm和npm的区别

---

1. 什么是 pnpm ?

pnpm 是一个类似于 npm / yarn 的 包管理工具，用来安装依赖、运行脚本等，但它的特点是：

• 更快：它用模块硬链接（hard link）管理依赖，占用空间小，安装速度非常快。
• 节省磁盘空间：不会为每个项目单独拷贝依赖，而是共用全局的依赖存储。
• 更严格：默认不会把没有声明在 package.json 里的包安装到项目中（可以帮助你避免依赖污染）。

---

pnpm 常用命令对比

功能	npm 命令	pnpm 命令
安装依赖	npm install	pnpm install
安装指定依赖	npm install axios	pnpm add axios
安装开发依赖	npm install axios -D	pnpm add axios -D
删除依赖	npm uninstall axios	pnpm remove axios
运行 scripts	npm run dev	pnpm run dev 或 pnpm dev
更新依赖	npm update	pnpm update

⚠️ vben 项目里有一条脚本：

"preinstall": "npx only-allow pnpm"

它的意思是 强制只能用 pnpm 安装依赖，如果用 npm 或 yarn 会直接报错。

---

2. 这个项目的特点

vben 其实是一个 Monorepo 多包项目，意思是它在一个仓库中管理多个应用和包，比如：

• @vben/web-antd → 一个 Vue 3 + Ant Design 应用
• @vben/web-ele → 一个 Vue 3 + Element Plus 应用
• @vben/naive → 一个 Vue 3 + Naive UI 应用
• @vben/docs → 文档站
• @vben/playground → 演示项目

它用 turbo（TurboRepo） 来管理这些子项目的构建/启动。

---

3. 重要的 scripts 命令快速说明

我帮你提炼一下关键的脚本功能，你不需要一次性全记住，先会常用的就行。

项目启动类

"dev": "turbo-run dev"  
// 启动整个项目（所有子应用）
"dev:antd": "pnpm -F @vben/web-antd run dev"
// 启动 web-antd 子应用
"dev:ele": "pnpm -F @vben/web-ele run dev"
// 启动 web-naive 子应用
"dev:naive": "pnpm -F @vben/web-naive run dev"
// 启动文档
"dev:docs": "pnpm -F @vben/docs run dev"

📌 常用：

pnpm install   # 安装依赖
pnpm dev       # 启动整个项目
pnpm dev:antd  # 只启动某个子项目

---

构建类

"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build"
// 构建所有子项目
"build:antd": "pnpm run build --filter=@vben/web-antd"
// 构建 Ant Design 子应用
"build:docker": "./build-local-docker-image.sh"
// 构建本地 Docker 镜像

📌 常用：

pnpm build       # 全部打包
pnpm build:antd  # 只打包一个子应用

---

检查类

"check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type && pnpm check:cspell"
"check:circular": "vsh check-circular"  // 检查循环引用
"check:dep": "vsh check-dep"             // 检查依赖问题
"check:type": "turbo run typecheck"      // TypeScript 类型检查
"check:cspell": "cspell lint **/*.ts **/README.md .changeset/*.md --no-progress"
// 拼写检查

📌 常用：

pnpm check  # 一键检查类型、循环依赖、拼写等

---

代码规范类

"lint": "vsh lint"               // ESlint 检查代码
"format": "vsh lint --format"    // 自动格式化代码

📌 常用：

pnpm lint
pnpm format

---

依赖管理类

"update:deps": "pnpm update --latest --recursive" // 更新依赖到最新
"reinstall": "pnpm clean --del-lock && pnpm install" // 删除 node_modules/lockfile 重装依赖

---

测试类

"test:unit": "vitest run --dom"  // 单元测试

---

4. 总结常用命令表

场景	命令
安装依赖（只能用 pnpm）	pnpm install
启动整个项目	pnpm dev
启动某个子应用	pnpm dev:antd（或 dev:ele、dev:naive）
构建整个项目	pnpm build
构建某个子应用	pnpm build:antd
代码检查	pnpm check
格式化代码	pnpm format
运行单元测试	pnpm test:unit

---

💡 如果你是第一次运行 vben：

pnpm install    # 安装依赖（必须 pnpm）
pnpm dev:antd   # 启动 Antd 版本

就能在浏览器里打开项目预览了。

---

二、pnpm定义

---

1️⃣ scripts 在哪里定义？

在项目的 package.json 里，有一个 "scripts" 字段，比如：

{
  "scripts": {
    "dev": "turbo-run dev",
    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 turbo build",
    "dev:ele": "pnpm -F @vben/web-ele run dev"
  }
}

这只是一个 npm / pnpm 约定的配置区域，里面定义的命令都是“别名”，让你可以用：

pnpm run dev

去执行 "dev": "turbo-run dev" 这个指令。

也就是说：

• 左边的 key（比如 dev、build:ele） 是你自己起的名字（命令别名）
• 右边的 value（比如 turbo-run dev） 是实际会执行的终端命令

---

2️⃣ 这些 scripts 是谁写的？

• 这些都是 Vben 项目的作者自己写的
• pnpm 官方并不会自带这些命令
• 这些命令里有些在调用 外部工具（比如 turbo、cross-env、vsh 等），有些只是组合命令

---

3️⃣ 为什么看起来很多？

因为 Vben 是 Monorepo 多应用仓库，不同的 app（antd/ele/naive…）需要独立启动/构建，所以作者一次性在 scripts 里写好了所有常用的指令：

例子：

"dev:ele": "pnpm -F @vben/web-ele run dev"

意思是：

• pnpm -F @vben/web-ele run dev = 只在 @vben/web-ele 这个子项目里运行 dev 脚本。
• 所以 pnpm dev:ele 就可以单独启动 Element Plus 版本。

---

4️⃣ 这些命令跟 pnpm 官方命令 的关系

pnpm 官方只规定了几个基本行为：

• pnpm install
• pnpm run <脚本名>
• pnpm add <包名>
• pnpm remove <包名>

而 "scripts": {...} 里到底可以放什么，全靠你自己写。
就好比你电脑的桌面快捷方式：快捷方式怎么命名、实际执行什么命令，完全是你自己设定的。

---

5️⃣ 只保留 Element Plus 版本

暂时不需要 antd / naive / docs，在根 package.json 里删掉其他没用的 scripts，比如：

"scripts": {
  "dev": "pnpm dev:ele",              // 启动就是启动 Element Plus
  "dev:ele": "pnpm -F @vben/web-ele run dev",
  "build": "pnpm build:ele",          // 构建也是构建 Element Plus
  "build:ele": "pnpm run build --filter=@vben/web-ele"
}

三、自我感悟

• 了解了pnpm和npm的区别
• 加深了对package.json里面的script的认识

---