前端打包工具之npm、yarn、pnpm对比

最新推荐文章于 2024-07-16 20:15:00 发布

前端~初学者

最新推荐文章于 2024-07-16 20:15:00 发布

阅读量1.1k

点赞数 27

分类专栏：前端工程化文章标签：前端 npm node.js

本文链接：https://blog.csdn.net/dzq1223/article/details/139762623

版权

前端工程化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端打包工具之npm、yarn、pnpm对比

1、npm
2、yarn
3、pnpm
4、总结

1、npm

1.1 概述

NPM（Node Package Manager），作为默认的JavaScript应用包管理器，与Node.js一同安装，它是目前使用最广泛的包管理器，得益于其对大量包的强大支持。

1.2 安装

首先需要安装 Node.js，安装好之后，npm 会自动安装在电脑上，因此无需另行安装。你可以在命令行中输入 npm -v 命令，检查 npm 是否已经正确安装。如果输出了版本号，则说明 npm 安装成功。

# 查看 Node.js 版本信息
node -v
# 查看 npm 版本信息
npm -v

1.3 常用命令

# 1、创建一个新的 Node.js 应用程序或模块，并在 package.json 文件中定义依赖项。
npm init

# 2、安装依赖项。如果在安装时没有指定包的版本号，则将安装最新版本的包。
npm install

# 3、安装指定的依赖项，并将其添加到 package.json 文件中的 dependencies 中。
npm install <package name> --save

# 4、安装指定的开发依赖项，并将其添加到 package.json 文件中的 devDependencies 中。
npm install <package name> --save-dev

# 5、将包安装为全局包，以便在系统的任何位置使用它们。
npm install -g <package name>

# 6、更新 package.json 文件中指定的所有包的版本。
npm update

# 7、更新指定的包的版本。
npm update <package name>

# 8、卸载指定的依赖项，并将其从 package.json 文件中的 dependencies 或 devDependencies 中删除。
npm uninstall <package name>

# 9、查看指定的包的详细信息，包括其版本、描述、关键字、维护者等。
npm view <package name>

# 10、搜索与指定关键字匹配的包。
npm search <keywords>

# 11、清除 npm 的缓存。
npm cache clean

# 12、启动 Node.js 应用程序。
npm start

# 13、运行测试套件。
npm test

# 14、运行 package.json 文件中指定的脚本。
npm run <script name>

# 15、列出当前项目中已安装的所有包及其依赖关系。
npm ls

# 16、检查当前项目中已安装的包是否有过时的版本。
npm outdated：

# 17、查看指定包的详细信息。
npm view <package name>

# 18、查看指定包的摘要信息。
npm info <package name>

# 19、将当前目录下的代码发布为一个 npm 包。
npm publish

# 20、查看当前登录的 npm 用户名。
npm whoami

1.4 优缺点

优点

广泛使用：作为Node.js的默认包管理器，npm拥有最庞大的用户基础和生态系统，几乎所有的Node.js模块都在npm注册中心发布。
全面的包库：npm拥有数百万的软件包，涵盖了从前端框架到后端工具的广泛领域，几乎可以找到任何需要的库或工具。
灵活性：npm支持丰富的配置选项，允许用户高度自定义安装过程，包括版本锁定、脚本自定义等。
命令行工具：npm提供了强大的CLI工具，不仅用于包的安装、更新和卸载，还支持脚本执行、版本管理等功能。

缺点

安装速度：早期版本的npm因依赖解析算法效率问题，导致安装速度较慢，尤其是在处理大量依赖时。
一致性问题：npm允许在不同环境中安装相同的依赖但版本可能不一致，这可能导致“依赖地狱”问题。
缓存管理：npm的缓存机制有时会导致占用大量磁盘空间，且清理不够智能。

2、yarn

2.1 概述

Yarn 是一个 JavaScript 的包管理器，它是由 Facebook、Google、Tilde 以及其他社区成员共同维护的开源项目。Yarn 在 NPM 的基础上进行了改进和增强，旨在提高依赖包的安装速度和可靠性。

2.2 安装

如果您已经安装了 Node.js，可以通过 npm 来安装 Yarn。通过 npm 安装 Yarn 有两种方式：

1、全局安装

# 全局安装
npm install -g yarn

# 查看 Yarn 版本信息
yarn -v

这种方式会将 Yarn 安装到全局环境中，从而可以在任意位置使用 yarn 命令。

2、本地安装

# 本地安装
npm install yarn

# 查看 Yarn 版本信息
yarn -v

这种方式会将 Yarn 安装到当前目录的 node_modules 文件夹中。可以通过 ./node_modules/yarn/bin/yarn 命令来运行 Yarn。

注意：可以使用以下命令来安装特定版本的 Yarn

# 查看可用的 Yarn 版本
npm view yarn versions

# 全局安装特定版本
npm install -g yarn@<version>

# 本地安装特定版本
npm install yarn@<version>

# 查看 Yarn 版本信息
yarn -v

2.3 常用命令

# 1、该命令将引导您创建一个新的 package.json 文件。您可以提供一些信息，例如项目名称、版本号、作者、描述等。
yarn init

# 2、该命令将安装指定的软件包并将其添加到项目依赖项中。您可以使用 @ 版本前缀来安装特定版本的软件包。例如：yarn add package@1.0.0。
yarn add [package]

# 3、该命令将从项目依赖项中删除指定的软件包。
yarn remove [package]

# 4、该命令将更新指定软件包的版本。您可以使用 @ 版本前缀来更新特定版本的软件包。例如：yarn upgrade package@1.0.0。
yarn upgrade [package]

# 5、该命令将根据项目中的 package.json 文件安装所有依赖项。如果您在运行时指定了 --production 标志，则只会安装生产依赖项。
yarn install

# 6、该命令将清除 Yarn 的缓存。这可能会释放一些磁盘空间并解决某些依赖项问题。
yarn cache clean

# 7、该命令将全局安装指定的软件包。这通常用于安装全局命令行工具。
yarn global add [package]

# 8、该命令将从全局安装中删除指定的软件包。
yarn global remove [package]

# 9、该命令将列出当前项目中的所有依赖项。
yarn list

# 10、该命令将运行项目中指定的脚本。例如：yarn run start。
yarn run [script]

# 11、该命令将运行项目中的测试脚本。
yarn test

# 12、该命令将根据项目中的配置文件构建项目。
yarn build

# 13、该命令将发布您的软件包到 Yarn 存储库中。
yarn publish

# 14、该命令将显示有关指定软件包的详细信息。
yarn info [package]

# 15、该命令将使您登录到 Yarn 存储库。
yarn login

# 16、该命令将使您从 Yarn 存储库注销。
yarn logout

# 17、该命令将允许您将本地软件包链接到项目中。
yarn link [package]

# 18、该命令将从项目中取消链接指定的软件包。
yarn unlink [package]

# 19、该命令将显示指定软件包的依赖项信息。
yarn why [package]

# 20、该命令将显示项目依赖项的许可证信息。
yarn licenses ls

2.4 优缺点

优点

更快的安装速度：Yarn通过并行下载、缓存机制和更高效的依赖解析算法，显著提高了安装速度。
确定性构建：Yarn确保每次安装的结果都是一致的，无论是在哪个系统或何时安装，解决了npm的“依赖地狱”问题。
更好的安全措施：Yarn提供了安全检查功能，可以检查已知漏洞的依赖，增强项目的安全性。
工作空间管理：Yarn支持多包工作空间管理，方便大型项目或 mono-repo 的维护。

缺点

生态兼容性：尽管Yarn与npm兼容，但某些npm特定的功能或插件可能在Yarn中无法完美运行。
学习曲线：对于习惯使用npm的开发者来说，Yarn的配置和一些高级功能可能需要时间学习。

3、pnpm

3.1 概述

pnpm，即performant npm，高性能的npm。相比起目前主流的包管理器，pnpm是速度快、节省磁盘空间的包管理器。

3.2 安装

1、使用 npm 全局安装

# 使用 npm 全局安装
npm install -g pnpm

# 查看 pnpm 版本信息
pnpm --version

2、使用 yarn 全局安装

# 使用 yarn 全局安装
yarn global add pnpm

# 查看 pnpm 版本信息
pnpm --version

注意：可以使用以下命令来安装特定版本的 pnpm

# 查看可用的 pnpm 版本
npm view pnpm versions

# 使用 npm 全局安装特定版本
npm install -g pnpm@<version>

# 使用 npm 本地安装特定版本
npm install pnpm@<version>

# 查看 pnpm 版本信息
pnpm --version

3.3 常用命令

# 1、用于安装项目中的所有依赖。
pnpm install

# 2、用于安装指定的依赖包，例如 pnpm install react。
pnpm install [package]

# 3、用于全局安装指定的依赖包，例如 pnpm install --global typescript。
pnpm install --global [package]

# 4、用于更新项目中的所有依赖。
pnpm update

# 5、用于更新指定的依赖包，例如 pnpm update react。
pnpm update [package]

# 6、用于删除指定的依赖包，例如 pnpm remove react。
pnpm remove [package]

# 7、用于列出当前项目中已安装的所有依赖包。
pnpm list

# 8、用于列出当前系统中已全局安装的所有依赖包。
pnpm list --global

# 9、用于列出当前项目中已安装的所有依赖包及其直接依赖项。
pnpm list --depth=1

# 10、用于查看指定依赖包的详细信息，例如 pnpm info react。
pnpm info [package]

# 11、用于将指定的依赖包添加到 devDependencies，例如 pnpm add jest --save-dev。
pnpm add [package] --save-dev

# 12、用于将指定的依赖包添加到 dependencies，例如 pnpm add react --save。
pnpm add [package] --save

# 13、用于全局安装指定的依赖包，例如 pnpm add typescript --global。
pnpm add [package] --global

# 14、用于重新构建项目中的所有依赖。
pnpm rebuild

# 15、用于运行项目中的脚本命令，例如 pnpm run start。
pnpm run [script]

# 16、用于查看本地包存储状态。
pnpm store status

# 17、用于清理本地存储的未被任何项目使用的包。
pnpm store prune

# 18、用于将指定的依赖包添加到本地存储，以便其他项目使用。
pnpm store add [package]

# 19、用于启动本地包服务器。
pnpm server

# 20、用于在所有项目中执行指定命令，例如 pnpm recursive install。
pnpm recursive [command]

3.4 优缺点

优点

高效存储和速度：pnpm通过“硬链接”和“文件复用”技术，极大地减少了磁盘占用和安装时间，即使在大型项目中也表现出色。
完全兼容npm和Yarn：pnpm设计为与npm和Yarn的配置文件兼容，无缝迁移成本低。
严格模式：pnpm默认启用“严格模式”，强制执行精确的版本控制，有助于避免潜在的依赖冲突。
跨平台性能：pnpm在Windows、Linux和macOS上表现一致，解决了npm在某些平台上性能不佳的问题。

缺点

相对较小的社区：相比npm和Yarn，pnpm的用户群较小，意味着遇到问题时可获取的帮助资源可能较少。
生态系统集成：虽然兼容npm生态，但某些IDE或CI/CD工具可能对pnpm的支持不如npm和Yarn成熟。

2.5

4、总结

工具	npm	yarn	pnpm
工作原理	递归地安装所有依赖到node_modules目录下	构建扁平化的依赖树并优化安装过程	使用单个全局存储层和符号链接来减少磁盘空间占用
安装方式	npm install	yarn add/install	pnpm install
缓存机制	本地缓存每个项目的依赖	共享缓存，保证多个项目间的依赖版本一致	共享存储层缓存，避免重复下载
安装速度	相对较慢，尤其在网络不佳时	快于npm，支持并行安装	更快，充分利用磁盘空间和网络资源
磁盘空间占用	每个项目下的node_modules有完整副本，占用较多空间	同一依赖只在全局缓存一份	利用符号链接进一步减少磁盘占用
锁定文件	package-lock.json	yarn.lock	pnpm-lock.yaml
依赖一致性	通过package-lock.json实现一定的依赖版本控制	强制一致，每次安装都会严格按照yarn.lock文件	同样强制一致，基于pnpm-lock.yaml
离线模式	支持，但需先下载过相关包	提供强大的离线模式	也支持离线安装
网络策略	单线程请求	多线程并行请求	多线程并行请求，智能网络调度
安全性	通过npm audit检查依赖的安全性	同样具有审计功能，检查安全漏洞	支持安全审计
交互界面	提供基本的命令行交互	更友好的CLI，提供进度条等反馈	CLI体验良好，同样提供进度显示
生态系统	最大，兼容性最好	兼容npm的所有特性，并额外增强了一些功能	对npm生态完全兼容，但在大型项目中有更好表现
特色功能	npx，用于执行一次性命令；npm ci用于快速、可靠的持续集成环境构建	更加严格的版本控制，改进的冲突解决策略；workspaces支持多包管理	针对monorepo设计，高效的多包管理和tree shaking能力