pnpm 改造

npm 和 Yarn 的不足

磁盘空间浪费

• 问题：npm 和 Yarn 都会将包完整地复制到每个项目的 node_modules 中。
• 后果：如果你有 10 个项目都依赖了同一个版本的 React，你的硬盘上就会有 10 份 React 的副本。对于开发者来说，这很快就会吞噬数十 GB 的硬盘空间。
  幽灵依赖问题
• 问题：由于 npm/Yarn 采用扁平化结构，即使你没有在 package.json 中声明某个包，只要它是你某个依赖项的依赖，你依然可以在代码中 import 它。
• 后果：这会导致代码不安全。如果某天你的直接依赖项删除了这个间接依赖，你的代码就会因为找不到包而突然崩溃，而你甚至不知道为什么。
  依赖项不一致/安装变慢
• 问题：在大型 monorepo 项目中，npm 和 Yarn 处理成百上千个包时，解析算法和文件 IO 压力巨大。
• 后果：即使有 lock 文件，在大团队协作或 CI/CD 环境下，安装速度依然可能成为开发流程的瓶颈。

为什么选择 pnpm？

• 更快的安装速度：pnpm 使用硬链接和符号链接，避免重复下载相同的包

• 节省磁盘空间：所有包都存储在全局存储中，项目之间共享

• yarn
  

• pnpm
  

• 更严格的依赖管理：默认情况下，只能访问 package.json 中声明的依赖，避免幽灵依赖
  

• 更好的 monorepo 支持：原生支持 workspace，性能更优
  

Pnpm -w vue

---

安装 pnpm

npm install -g pnpm

迁移步骤

• 删除 node_modules
• 删除 yarn.lock.lock / package-lock.json（建议先改名，迁移完pnpm再删除）
• 项目根目录创建 .npmrc 文件，.yarnrc 迁移到 .npmrc
  • 设置私有库 registry=http://ops-nexus.fotechwealth.com.local/repository/npm-group/
• 安装依赖 pnpm install

运行项目

• pnpm默认会把子依赖放在 .pnpm 下，项目中没有在 package.json 中安装的导入会报错 ，
  

  • @sentry/browser 是被 node_modules 中 @sentry/vue 导入的

• @sentry/browser in ./node_modules/@sentry/vue/esm/index.js
• @sentry/core in ./node_modules/@sentry/vue/esm/integration.js
• @sentry/utils in ./node_modules/@sentry/vue/esm/tracing.js
• @vant/popperjs in ./node_modules/vant/lib/popover/index.js
  • 需要配置vue.config.js，告诉 webpack：遇到 pnpm 的软链接，不要当成陌生路径，顺着链接走，按真实包来解析
    // vue.config.js
    module.exports = {
    configureWebpack: (config) => {
    return {
    resolve: { symlinks: true }
    }
    }
    }
    • pnpm 是 软链接 + 内容寻址存储：
      node_modules/
      vant -> .pnpm/vant@4.x/node_modules/vant
      @sentry/vue -> .pnpm/@sentry+vue@x/node_modules/@sentry/vue

• 导入了没有在 package.json 安装的包，手动安装相关依赖
  

• 未安装 vue-loader
  

• Vue loader 版本安装不对
  

发布版本

cmdb 设置 pnpm