Pnpm

Turbopack 是 Vercel 开发的 JavaScript/TypeScript 打包工具（bundler），用 Rust 编写，定位是 Webpack 的继任者。它目前主要通过 Next.js 使用：从 Next.js 16 开始，next dev 和 next build 默认都用 Turbopack。 打包工具做什么 浏览器不能直接运行一个现代前端项目的源码：TypeScript 和 JSX 要编译成 JavaScript，import 了上百个 npm 包的模块图要合并、拆分成若干个文件，CSS、图片要处理，生产环境还要压缩、去掉没用到的代码（tree shaking）。打包工具做的就是这件事：从入口文件出发，沿着 import 建出完整的模块图，再按规则输出浏览器和 Node.js 能直接加载的文件。 Next.js 这类同时有服务端和客户端代码的框架，还要求打包工具同时产出两套结果：服务端渲染用的代码，和发给浏览器的代码。 常见的打包工具： 工具 实现语言 说明 Webpack JS 2012 年起的事实标准，插件和 loader 生态最大 Rollup JS 偏库打包，Vite 的生产构建原先基于它 esbuild Go 速度快，常被其他工具当作底层编译器 Vite JS 开发模式基于浏览器原生 ESM，正在把底层换成 Rust 实现 Turbopack Rust Vercel 出品，与 Next.js 绑定 背景 Webpack 统治前端工程化十余年，但它用 JavaScript 实现，项目一大，冷启动和热更新都慢。Vercel 在 2022 年随 Next.js 13 发布了 Turbopack 的 alpha 版。Webpack 的原作者 Tobias Koppers 是 Turbopack 的核心作者之一。 ...

pnpm - 高效的 Node.js 包管理器 pnpm 简介 pnpm (performant npm) 是一个快速、节省磁盘空间的 JavaScript 包管理器，作为 npm 和 yarn 的替代方案。它通过创建硬链接和符号链接的方式来共享依赖，避免重复安装相同的包。 核心特点 节省磁盘空间 所有版本的依赖都存储在硬盘上的单一位置（全局存储目录） 当安装包时，文件会从全局存储硬链接到项目的 node_modules 如果你有 100 个项目使用相同版本的某个依赖，磁盘上只会有这个依赖的一份文件 极快的安装速度 由于使用硬链接，安装过程比 npm 和 yarn 都快 多个项目共享依赖时，速度优势更加明显 严格的依赖解析算法避免了冗余操作 创建非扁平化的 node_modules 使用符号链接创建依赖的嵌套结构 只有 package.json 中声明的依赖才能访问 避免了"幽灵依赖"（phantom dependencies）问题 严格的依赖管理 防止访问未声明的依赖 确保项目的可重现性和安全性 pnpm 工作原理 全局存储 (~/.pnpm-store/) ├── package-a@1.0.0 ├── package-b@2.0.0 └── package-c@3.0.0 ↓ (硬链接) 项目 node_modules/ └── .pnpm/ └── package-a@1.0.0/ └── node_modules/ └── package-a (实际内容) ↓ (符号链接) └── package-a → .pnpm/package-a@1.0.0/node_modules/package-a 与 npm/yarn 的对比 特性 pnpm npm yarn 磁盘空间效率 ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐ 安装速度 ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ 依赖隔离 ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐ Monorepo 支持 ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ 严格性 ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ pnpm 安装 全局安装 pnpm # 使用 npm 安装 npm install -g pnpm # 使用 Homebrew (macOS/Linux) brew install pnpm # 使用独立脚本安装 curl -fsSL https://get.pnpm.io/install.sh | sh - # Windows (PowerShell) iwr https://get.pnpm.io/install.ps1 -useb | iex 查看版本 pnpm --version pnpm -v pnpm 基本命令 安装依赖 # 安装 package.json 中的所有依赖 pnpm install pnpm i # 安装指定包 pnpm add <package> pnpm add lodash # 安装指定版本 pnpm add lodash@4.17.21 # 安装到 devDependencies pnpm add -D <package> pnpm add --save-dev jest # 全局安装 pnpm add -g <package> pnpm add -g typescript # 安装指定 workspace 包 pnpm add <package> --filter <workspace> 更新依赖 # 更新所有依赖 pnpm update pnpm up # 更新指定包 pnpm update lodash pnpm up lodash # 更新到最新版本（忽略 package.json 中的版本范围） pnpm update --latest pnpm up -L # 交互式更新 pnpm update -i 删除依赖 # 删除指定包 pnpm remove <package> pnpm rm lodash # 删除全局包 pnpm remove -g <package> 查看依赖 # 列出所有依赖 pnpm list pnpm ls # 列出指定包的依赖树 pnpm list <package> # 查看过期的包 pnpm outdated # 查看包信息 pnpm view lodash pnpm info lodash 运行脚本 # 运行 package.json 中定义的脚本 pnpm run <script> pnpm run build pnpm run test # 简写（对于常用命令） pnpm start pnpm test pnpm t 清理缓存 # 清理未被引用的包 pnpm store prune # 查看 store 状态 pnpm store status # 查看 store 路径 pnpm store path 安全审计 # 检查依赖包的安全漏洞（对应 npm audit） pnpm audit # 自动修复漏洞（对应 npm audit fix） pnpm audit --fix # 仅生产环境依赖审计 pnpm audit --prod # 输出 JSON 格式 pnpm audit --json # 审计并显示详细信息 pnpm audit --audit-level=<severity> # severity 可选值: low, moderate, high, critical pnpm audit 与 npm audit 的差异： ...