1. npm /yarn/pnpm三者都是 Node.js 的包管理器用来安装、管理项目依赖。1.1. npm /yarn/pnpm1.1.1. npmNode.js自带安装 node 就自带 npm无需额外安装官方仓库:https://link.wtturl.cn/?targethttps%3A%2F%2Fnpmjs.orgsceneimaid497858langzh# 常用命令 npm init-y # 初始化package.json npm install xxx # 安装依赖 npm install xxx-D # 开发依赖 npm uninstall xxx # 卸载 npm run xxx # 执行脚本 npm config set registry https://registry.npmmirror.com # 设置淘宝镜像1.1.2. Yarnyarn v1经典旧版Facebook 推出早期为了解决 npm 旧版速度慢、版本锁不稳定问题需要单独安装yarn init yarn add xxx yarn add xxx-D yarn remove xxx yarn run xxx # 锁文件 yarn.lock注意现在官方推荐使用Yarn Berryyarn v2/v3/v4行为和 yarn v1 差别很大。1.1.3. pnpm新一代包管理器速度快、磁盘占用小目前前端项目越来越多用它;硬链接 内容可寻址存储全局缓存多个项目复用同一个包文件节省硬盘;兼容 npm 命令大部分命令把npm换成pnpm即可;pnpm init pnpm add xxx pnpm add xxx-D pnpm remove xxx pnpm run xxx # 锁文件 pnpm‑lock.yaml1.2. npm /yarn/pnpm对比1.2.1. 文件对照表操作npmyarn(v1)pnpm安装生产依赖npm i xxxyarn add xxxpnpm add xxx开发依赖npm i xxx -Dyarn add xxx -Dpnpm add xxx -D卸载npm un xxxyarn remove xxxpnpm remove xxx安装全部依赖npm iyarnpnpm install执行脚本npm run devyarn devpnpm dev锁文件package‑lock.jsonyarn.lockpnpm‑lock.yaml1.2.2. 文件对照表操作npmyarn(v1)pnpm安装生产依赖npm i xxxyarn add xxxpnpm add xxx开发依赖npm i xxx -Dyarn add xxx -Dpnpm add xxx -D卸载npm un xxxyarn remove xxxpnpm remove xxx安装全部依赖npm iyarnpnpm install执行脚本npm run devyarn devpnpm dev锁文件package‑lock.jsonyarn.lockpnpm‑lock.yaml不要混用一个项目只用一种包管理器不要同时生成多种 lock 文件。1.2.3. 核心差异1速度pnpm yarn npmpnpm 优势最大2磁盘占用pnpm 全局缓存极度省硬盘npm/yarn 每个项目完整复制一份包3幽灵依赖npm/yarn 允许代码直接引用没写进 package.json 的包幽灵依赖pnpm 默认严格禁止避免隐性 bug4兼容性都读package.json可以互相迁移但是锁文件互不识别1.2.4. 安装方式#npm装node自带node-v npm-v # 安装yarn v1 npm install-g yarn # 安装pnpm npm install-g pnpm # 或者官方脚本安装1.2.5. 镜像设置国内加速#npmnpm config set registry https://registry.npmmirror.com#yarnyarn config set registry https://registry.npmmirror.com#pnpmpnpm config set registry https://registry.npmmirror.com1.3. npm /yarn/pnpm迁移1.3.1. pnpm 安装1通过 npm 安装已有 node 环境npm install-g pnpm2验证是否安装成功pnpm-v3设置国内镜像必做速度快很多pnpm config set registry https://registry.npmmirror.com# 查看配置 pnpm config get registry4常用基础命令速查pnpm init # 初始化package.json pnpm install # 安装项目全部依赖 pnpm add vue # 安装生产依赖 pnpm add vite-D # 安装开发依赖 pnpm remove vue # 卸载包 pnpm dev # 运行scripts脚本等价 pnpm run dev1.3.2. 区分新项目优先pnpm性能最好现在 Vite、Vue、React 官方都推荐老项目看仓库锁文件1有package‑lock.json→ 使用 npm2有yarn.lock→ 使用 yarn3有pnpm‑lock.yaml→ 使用 pnpm1.3.3. npm/yarn 迁移 pnpm1 删除 node_modules、旧锁文件2pnpm install自动生成pnpm‑lock.yaml1.3.4. 回滚方案迁移失败恢复1 删除node_modules、pnpm‑lock.yaml2 恢复旧锁文件package‑lock.json/yarn.lock3npm install/yarn install回到原来状态。