前端包管理工具——npm、yarn、pnpm由浅到深理解🌟

🧑‍💻前端包管理工具npm、yarn、pnpm由浅到深理解-HowieCong

1. 包管理工具理解

• 包管理工具是一种管理和组织软件包的工具，可以帮助开发者轻松管理项目中的依赖关系，提高开发效率

• 前端开发中，包管理工具通常用于管理JavaScript库和框架，可以帮助开发者安装、更新和卸载这些库和框架，以及管理它们之间的依赖关系

• 常见的前端包管理工具包括npm、yarn和pnpm等，这些工具提供了类似的功能，但在一些细节上有所不同

2. 前端包管理工具发展趋势

（1）技术创新

• 新的加载与管理模式：以Deno为代表的新工具采用基于URL的模块加载方式，颠覆了传统依赖package.json文件的包管理模式，依赖管理更灵活、透明

• 对TypeScript支持加强：减少开发者的配置成本，在开发过程中更加流畅

（2）性能优化

• 安装与运行速度提升：现有工具如pnpm已经在安装速度上有了很大优势，减少开发者的等待时间

• 内存占用优化：项目规模大 => 对工具内存占用优化要求更高，工具会通过更高效的存储和管理方式，降低内存消耗，提高系统资源的利用率

（3）生态融合

• 多生态合作：面对复杂的项目需求，开发者可能许哟多种工具完成不同任务，比如在monorepo项目中，支持更多生态协作方向发展，能够更方便地协调不同工具管理不同类型的包

• 内置工具丰富化：集成更多内置工具，如代码格式化，测试，调试等，减少开发者对外部工具的依赖，提供一站式的开发解决方案

• 智能依赖方向与优化：借助AI和机器学习，包管理工具具备更智能的依赖分析能力，自动检测和优化依赖关系，减少不必要的依赖和资源浪费

（4）用户体验

• 操作简化：工具命令行操作和配置选项会更加简化和统一，降低学习成本

• 可视化与交互性提升：为了开发者方便进行操作和决策

3. npm

（1）现状

• npm 是Node.js官方默认的包管理工具，生态系统庞大，有大量的开源包可供使用

• 社区支持广泛，很多项目都使用npm进行包管理

（2）基础用法

• 初始化项目：npm init

• 安装包：npm install <package> 或 npm i <package>

• 安装指定版本的包：npm install <package> --save-dev 或 npm i <package> -D

• 安装生产依赖：npm install <package> --save 或 nnpm i --S

npm5及以上版本默认将包安装到生产环境

• 更新包：npm update <package>

• 卸载包：npm uninstall <package> 或 npm un <package>

（3）优缺点

• 优点

  • 与Node.js紧密集成，使用方便

  • 有丰富的命令和配置选型，可以满足各种需求

  • 支持语义化版本控制，方便管理依赖包的版本

• 缺点

  • 安装速度相对较慢，尤其是大型项目的依赖时

  • 可能会出现依赖地域问题，由于依赖包的版本冲突导致的问题

4. yarn

（1）现状

• 由Facebook开发，解决npm的一些问题，如安装速度和依赖地狱问题

• 与npm兼容，大部分npm命令在yarn中都有对应的命令

（2）基础用法

• 初始化项目：yarn init

• 安装包：yarn add <package>

• 安装指定版本的包：yarn add <package>

• 安装开发依赖：yarn add <package> --dev

• 安装生产依赖：yarn add <package>

默认将包安装到生产依赖

• 更新包: yarn upgrade <package>

• 卸载包: yarn remove <package>

（3）优缺点

• 优点

  • 安装速度快，通过缓存和并行安装等优化措施，提高了安装效率

  • 更好地解决了地狱问题，通过锁文件（yarn.lock）来确保依赖的一致性

  • 支持离线模式，在没有网络连接时也能安装依赖

• 缺点：

  • 生态系统相对于npm较小，但也在不断发展

  • 一些npm的高级功能可能在yarn中不支持或需要额外配置

5. pnpm

（1）现状

• 使用硬链接和内容寻址存储来优化依赖的安装和管理，减少磁盘空间占用

• 与npm和yarn兼容，但有一些自己独特的功能

（2）基础用法

• 初始化项目：pnpm init

• 安装包：pnpm install <package>或pnpm i <package>

• 安装指定版本的包：pnpm install <package>@<version>

• 安装开发依赖：pnpm install <package> --save-dev或pnpm i <package> -D

• 安装生产依赖：pnpm install <package> --save或pnpm i <package> -S

默认将包安装到生产依赖

• 更新包：pnpm update <package>

• 卸载包：pnpm uninstall <package>或pnpm un <package>

（3）优缺点

• 优点

  • 安装速度快，特别是在多次安装相同的依赖时

  • 节省磁盘空间，通过共享依赖鹅方式减少了重复文件的存储

  • 支持多版本共存，可以在同一项目中同时使用不同版本的依赖

• 缺点

  • 相对较新，生态系统可能不如 npm 和 yarn

  • 一些工具和插件可能对pnpm的支持不完善

6. 深入理解npm、yarn、pnpm

(1)如何在多个项目中共享依赖包。npm、yarn、pnpm 分别有哪些方法来实现这个目标？

• npm：可以通过依赖安装到全局，或使用npm link在项目间创建软链接

• yarn：同npm，用yarn global add安装全局依赖，或yarn link创建软链接

• pnpm：可使用pnpm link创建软链接

(2) npm 的语义化版本控制是什么？如何使用 npm 来管理依赖包的版本？

• npm语义化版本控制：版本号格式为主版本号.次版本号.修订号，主版本号表示不兼容的API更改，次版本号表示向下兼容的功能，修订号表示向下兼容的bug修复

• 通过package.json文件中的dependencies字段指定依赖包版本范围

(3) 如何在 npm、yarn、pnpm 中使用脚本（scripts）？一些常见的脚本示例

• npm：在package.json的scripts字段中定义脚本，如"start":"node app.js"，然后用npm run start执行

• yarn：同npm，用yarn run <脚本名>来执行

• pnpm：同npm，用pnpm run <脚本名>执行

(4) 如何在 npm、yarn、pnpm 中设置镜像源？为什么需要设置镜像源？

• npm: npm config set registry <镜像源地址>

• yarn: yarn config set registry <镜像源地址>

• pnpm：pnpm config set registry <镜像源地址>

• 设置镜像源原因：提高下载速度，国内访问国外源可能较慢

(5) npm 的 package.json 文件的作用?它包含哪些常见的字段？

• 作用：描述项目信息，管理依赖，定义脚本等

• 常见字段：name（项目名称）、version(版本号)、description（项目描述）、main（入口文件）、scripts（脚本命令）、dependencies（生产依赖）、devDenpendencies（开发依赖等

(6) npm、yarn、pnpm 中实现依赖的扁平化管理？

• npm：通过npm dedupe命令尝试将依赖提升到顶层

• yarn：默认采用扁平化管理

• pnpm：默认扁平化管理

(7) npm、yarn、pnpm 在处理依赖冲突时的策略和机制

• npm：默认采用深度优先遍历，优先安装最先出现的版本，可能导致依赖树很深，可通过npm ls查看依赖树，手动调整

• yarn：采用扁平结构，尽量将依赖提升到顶层，减少重复。若有冲突，会在yarn.lock文件中记录

• pnpm：采用内容寻址存储，将依赖安装到全局store，通过硬链接在项目中使用。若有冲突，会创建新的硬链接

(8) 在 npm、yarn、pnpm 中进行依赖的静态分析和优化？

• 使用工具如webpack-bundle-analyzer分析依赖树，找出不必要的依赖

• 优化依赖的加载顺序，减少页面加载时间

• 使用代码分割和懒加载顺序等技术，提高应用性能

7. 总结对比

特性	npm	yarn	pnpm
安装速度	较慢	快	很快，尤其重复依赖时
依赖管理	深度优先遍历，易出现依赖地狱	扁平结构，依赖地狱问题少	内容寻址存储，依赖管理高效
磁盘空间占用	常规	常规	低，通过共享依赖减少占用
生态系统	庞大	较大，不断发展	相对较小，但逐渐完善
多版本依赖支持	较难实现	较难实现	支持同一项目多版本依赖共存
离线模式	不支持	支持	支持
命令兼容性	自身命令集	与 npm 大部分兼容	与 npm 大部分兼容

❓其他

1. 疑问与作者HowieCong声明

• 如有疑问、出错的知识，请及时点击下方链接添加作者HowieCong的其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

• 若想让作者更新哪些方面的技术文章或补充更多知识在这篇文章，请及时点击下方链接添加里面其中一种联系方式或发送邮件到下方邮箱告知作者HowieCong

• 声明：作者HowieCong目前只是一个前端开发小菜鸟，写文章的初衷只是全面提高自身能力和见识；如果对此篇文章喜欢或能帮助到你，麻烦给作者HowieCong点个关注/给这篇文章点个赞/收藏这篇文章/在评论区留下你的想法吧，欢迎大家来交流！

2. 作者社交媒体/邮箱-HowieCong

• HowieCong Social Meida : Wechat|Instagram|Feishu...

• HowieCong Mail : howiecong@163.com