npm、pnpm、yarn之间的区别

1 引言

平时在项目开发中,经常用到npm、pnpm、yarn这些来安装包,但是它们之间到底有什么区别呢,一直没太搞明白。

我只知道他们都是可以从npm官网上下载包,安装完包咱们就可以写代码了,其他的不觉明历,所以认为需要总结下。

2 npm

npm(Node Package Manager)是Node.js的默认包管理器。它是一个成熟、广泛使用的工具,有着大量的开源包。

2.1 特点

  • 默认随Node.js一起安装,无需额外配置。
  • 提供了庞大的包生态系统,有大量的第三方包可用。
  • 默认将依赖项安装到项目的node_modules目录中。

2.2 使用实例

bash 复制代码
# 在项目中安装依赖项
npm install lodash
​
# 全局安装包
npm install -g create-react-app
​
# 查看已安装的包
npm list
​
# 清空缓存
npm cache clean

3 pnpm

pnpm 是一种较新的包管理工具,旨在解决npm中的依赖项重复安装的问题。

3.1 特点

  • 默认随Node.js一起安装,无需额外配置。
  • 提供了庞大的包生态系统,有大量的第三方包可用。
  • 默认将依赖项安装到项目的node_modules目录中。

3.2 使用实例

csharp 复制代码
# 在项目中安装依赖项
pnpm add lodash
​
# 全局安装包
pnpm add -g create-react-app
​
# 查看已安装的包
pnpm list
​
# 清空缓存
pnpm cache clean

4 yarn

yarn 是由Facebook提供的包管理工具,旨在提高性能和安全性。

4.1 特点

  • 并行下载、离线安装,提高安装速度。
  • 锁定版本以确保不同环境中获得相同的依赖版本。
  • 具有强大的命令行工具和用户界面。

4.2 使用实例

csharp 复制代码
# 在项目中安装依赖项
yarn add lodash
​
# 全局安装包
yarn global add create-react-app
​
# 查看已安装的包
yarn list
​
# 清空缓存
yarn cache clean

5 比较

5.1 安装速度

  • npm: 相对较慢,特别是在有大量依赖项的项目中。
  • pnpm: 安装速度较快,尤其在多项目工作区中。
  • yarn: 使用并行下载,速度相对较快。

5.2 磁盘空间占用

  • npm: 默认将依赖项复制到项目的node_modules目录,可能导致重复占用磁盘空间。
  • pnpm: 通过符号链接共享依赖项,减少了磁盘空间占用。
  • yarn: 在离线模式下,通过缓存机制减少了磁盘空间占用

5.3 并发安装

  • npm: 不支持并发安装,会一个一个地安装依赖项。
  • pnpm: 支持并发安装,提高了安装速度。
  • yarn: 使用并行下载,速度相对较快。

5.4 稳定性

  • npm: 稳定、成熟,广泛使用。
  • pnpm: 相对较新,但社区正在不断发展。
  • yarn: 由Facebook维护,稳定性较高。

小结

npm是默认选择,稳定且易于使用。pnpm通过共享依赖项减少磁盘空间占用,适用于需要优化空间的项目。yarn通过并行下载和版本锁定提供了更快、更可靠的安装。至于用什么,看我们个人喜好。然后有一点,最好不要混用,不然会有未知的错误,至少我在单一的情况只用一种来管理还是没有遇到啥错误的。

总结的不是很全,如果不周到或大家有更好的见解可以补充一下哈~ 然后就算以上大部分内容来自chatgpt~

相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法