关于npm和pnpm

1. ​npm(传统包管理器)​

  • ​工作原理​​:

    1. ​扁平化依赖​ ​:安装依赖时,npm会尽量将子依赖提升到 node_modules顶层,避免深层嵌套。例如:安装 vue@3.2.0时,它的子依赖 @vue/reactivity会被放在 node_modules/@vue/reactivity,而不是 node_modules/vue/node_modules/@vue/reactivity

    2. ​独立存储​ ​:每个项目的 node_modules都是完全独立的副本,即使多个项目用同一版本的库,也会重复下载存储。

  • ​优点​​:

    • 简单易用,Node.js 自带,无需额外安装。

    • 扁平化结构让开发者能直接引用子依赖(即使未显式声明)。

  • ​缺点​​:

    • ​磁盘空间浪费​ ​:100 个项目用 vue,就有 100 份 vue文件。

    • ​依赖不确定性​ ​:扁平化可能导致版本冲突(如两个依赖需要不同版本的 axios)。

    • ​幽灵依赖​​(后文详解)。

2. ​pnpm(高效包管理器)​

  • ​工作原理​​:

    1. ​全局存储 + 硬链接​​:

      • 所有依赖的包实际存储在统一的全局目录(如 ~/.pnpm-store)。

      • 项目的 node_modules中只创建这些文件的​​硬链接​​(几乎不占额外空间)。

    2. ​嵌套依赖结构​​:

      • 严格保持依赖树的嵌套关系,避免扁平化。

      • 例如 vue的子依赖 @vue/reactivity会放在 node_modules/vue/node_modules/@vue/reactivity

  • ​优点​​:

    • ​极快安装​​:依赖已存在时,直接创建硬链接(秒级安装)。

    • ​节省磁盘​ ​:100 个项目用 vue,磁盘上只有 1 份 vue文件。

    • ​严格依赖隔离​​:避免版本冲突和幽灵依赖。

  • ​缺点​​:

    • 需要单独安装(npm install -g pnpm)。

    • 某些老旧工具可能不兼容嵌套的 node_modules结构。

3. 幽灵依赖

幽灵依赖是指:​​项目中使用了未在 package.jsondependenciesdevDependencies中声明的包​​,但这些包却能正常工作(直到某天突然崩溃)。

npm的扁平化依赖​​是罪魁祸首:假设你安装 A包,A依赖 B@1.0。npm会把 B@1.0提升到 node_modules顶层。你的代码​​直接引用 B​​(即使没在 package.json声明),也能运行!这就是一个"幽灵依赖"。

4.总结

相关推荐
GuWenyue13 分钟前
放弃云端API!一套React+WebGPU本地LLM方案,零数据上传、离线可用
前端·人工智能·前端框架
原则猫1 小时前
函数/变量提升
前端
独泪了无痕2 小时前
Vue3 Hooks使用实战解析
前端·vue.js
shawxlee4 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
星栈4 小时前
从装一堆工具到看懂 Node 工程化思维:我的项目复盘记录
后端·node.js
用户059540174464 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹4 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen4 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱4 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
郝亚军6 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js