前端面试(五):前端包管理工具的比较

前言

在前端开发中我们经常会用到包管理工具,比如npm,yarn,pnpm等,今天下午的面试中我就被问到了这几个的异同,可惜我最近一直没有复习到简历上面的知识技能点,对这几个包管理工具都仅仅有浅薄的了解。所以我决定一天写一篇文章,复盘记录面试中问到的点~

包管理工具

我在简历上写了我熟悉使用包管理工具,为了防止被问懵,那么我需要掌握的基础知识包括:

  • 什么是包管理工具
  • 包管理工具有哪些?
  • 常见的包管理工具的异同是什么?
  • 如何选择包管理工具。

接下来我们一步一步的解决上述问题。

什么是包管理工具

在介绍包管理工具前,我们需要了解包的概念。

在Node.js中,第三方模块叫做包(package)。Node.js附带了叫做npm的工具,这个工具可以用来管理这些包,开发者们可以上传包到npm的包数据库中,也可以根据项目的需要下载安装软件包,具有这种管理包功能的工具我们称之为包管理工具

前端开发中常见的包管理工具有:npm,pnpm,yarn,还有cnpm…

npm

npm的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

  1. 新建项目时初始化,填写项目的name,version,author等信息
npm init
  1. 安装依赖包
// 项目中安装全部依赖
npm install

// 项目中默认安装最新版本的依赖包
npm install @scope/package-name

// 项目中安装指定版本的依赖包
npm install @scope/package-name@version

// 全局安装依赖请加上-g
  1. 更新下载好的依赖包
// 进入项目的根目录
cd path/to/project

// 运行更新命令
npm update

// 测试是否更新成功,如果更新成功运行以下命令不会有输出
npm outdated
  1. 通过模块引入的方式使用依赖包

  2. 使用废弃的依赖包:废弃的依赖包不代表不能使用,而是他很久没更新了,没人维护了

  3. 卸载依赖包

// 项目中卸载依赖包
npm uninstall @scope/package-name

// 项目中卸载指定版本的依赖包
npm uninstall @scope/package-name@version

其余的命令可以看这里,这个博主讲的很细:# npm 常用命令(自用)

pnpm

pnpm是一个快速的、磁盘空间高效的包管理器,旨在提高工作效率并减少存储空间的占用。

  1. 安装依赖包
// 项目中安装全部依赖
pnpm install

// 项目中默认安装最新版本的依赖包
pnpm add package
  1. 更新下载好的依赖包
// 进入项目的根目录
cd path/to/project

// 运行更新命令
pnpm update 或 pnpm up, pnpm upgrade
  1. 卸载依赖包
// 项目中卸载依赖包
pnpm remove package 或 pnpm rm package, pnpm uninstall package
  1. 链接依赖包到node_modules里
pnpm link dir
  1. 删除当前目录里的链接
pnpm unlink dir

其余命令和命令参数请看:pnpm cli命令管理依赖

yarn

Yarn也是JavaScript的包管理工具。作为JavaScript的包管理工具,Yarn是由FacebookGoogleExponentTilde公司联合推出的新一代JavaScript包管理工具,用于取代npm。Yarn的特点包括更快的安装速度,更好的稳定性,更简单的依赖关系管理,支持离线模式和支持自定义安装来源。Yarn使用并行下载的方式,并且能够缓存包,所以安装速度比npm更快。Yarn使用了一个锁定文件来确保安装的依赖包的版本始终一致,这可以避免出现包冲突的情况。

  1. 安装依赖包
// 项目中安装全部依赖
yarn install

// 项目中默认安装最新版本的依赖包
yarn add package
  1. 更新下载好的依赖包
// 进入项目的根目录
cd path/to/project

// 运行更新命令
yarn up
  1. 卸载依赖包
// 项目中卸载依赖包
yarn remove package
  1. 链接依赖包到node_modules里
yarn link dir
  1. 删除当前目录里的链接
yarn unlink dir

更多命令信息请查看:yarn-reference

异同比较

多谢参考文档4、5

相同点

  • 都是包管理工具:可以允许安装、更新、删除依赖包
  • 支持从npm仓库中下载和安装包
  • 依赖解析:可以解析项目的依赖关系,并确保正确版本的包被安装
  • 脚本执行:可以支持在项目中运行自定义脚本
  • 锁文件:支持在项目中生存锁文件,如package-lock.json,pnpm-lock.yaml,yarn.lock
  • 工作区:支持workspace,允许在多个项目之间共享依赖关系

不同点

0.安装算法差异

yarn:扁平化安装

npm:npm4之前是嵌套安装的,之后采用扁平化安装

pnpm:pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件,这样可以做到不会出现重复安装,在项目中需要使用到依赖的时候,pnpm 只会安装一次,之后再次使用都会直接硬链接指向该依赖,极大节省磁盘空间,并且加快安装速度

1. 相同依赖包的重复下载差异

前端面试(五):前端包管理工具的比较

2.命令差异

虽然npm、yarn和pnpm都有类似的命令,但它们的一些命令略有不同。

例如,安装依赖项的命令在npm中是“npm install”,在yarn中是“yarn install”,在pnpm中是“pnpm install”。

3.锁定依赖版本差异

npm和yarn都会将依赖项安装在本地node_modules文件夹中,而pnpm会将依赖项安装在全局缓存中,并使用硬链接和符号链接将其连接到项目中。

4.性能差异

yarn和pnpm相对于npm来说更快。

yarn使用并行下载和缓存机制来提高性能,而pnpm则使用硬链接和符号链接来减少磁盘空间的使用。

适用场景

包管理工具 适用场景
npm 普适于所有项目
pnpm 大型项目,monorepo,适合节约性能和磁盘空间的项目
yarn 适合快速、可靠且兼容的依赖管理

参考文档

  1. # 【NodeJs】——包管理工具
  2. # Node.js(四)——包
  3. npmjs.com
  4. # yarn 、npm 、pnpm有什么相同和不同之处
  5. # pnpm、npm、yarn 包管理工具『优劣对比』及『环境迁移』
  6. www.cnblogs.com/yaopengfei/…

原文链接:https://juejin.cn/post/7356411935418581011 作者:Sammmmmmmy

(0)
上一篇 2024年4月12日 下午4:53
下一篇 2024年4月12日 下午5:03

相关推荐

发表回复

登录后才能评论