新项目就别用npm和yarn管理包了,是时候使用更优秀的pnpm了

前言

从刚开始入干前端项目就使用npmyarn管理包,但一直也有听过pnpm,直到最近做一个从零到一的Vue3项目,这个项目整个生态都用了最新的技术,那么npm必须也升级上更强大的pnpm啊。然后用了pnpm也有一段时间了个人感觉真的是真香啊,所以真心推荐,那就用这文章通过对比与npmyarn的优劣和pnpm用法细致告诉大家我为什么推荐使用pnpm

一、pnpm对比npm与yarn的优劣

pnpm 是一个高性能的包管理工具,是2016年由Zoltan Kochan首次发布的,是对 npmyarn 的性能和使用场景的优化。pnpm 的全称是 performant npm,看全称就知道是高性能的 npm的意思。它是由 npm和yarn 衍生而来,通过解决这两个工具潜在的 bug 和一些性能问题,实现了更快的速度和更高的效率,甚至占用的空间还更小。

1、pnpm的优势

(1)安装速度更快: pnpm更快,是因为它用了一个全局的链接系统来避免重复安装相同的模块。也就是说如果有多个项目需要同一个模块的同一个版本,那么pnpm 只会下载一次并复用到所有需要它的项目中。

(2)节省磁盘内存: 当你使用 npm或者yarn 时,假如你有 100 个项目,并且所有项目都有一个相同的依赖包,那你在硬盘上就要保存 100 份该相同依赖包。然而,如果使用了 pnpm依赖包,会将相同依赖存放在一个统一的位置,因此保存规则如下:

  1. 如果你对同一依赖包需要使用不同的版本,则仅有 版本之间不同的文件会被存储起来。例如,如果某个依赖包包含 100 个文件,其发布了一个新 版本,并且新版本中只有一个文件有修改,则 pnpm update 只需要添加一个 新文件到存储中,而不会因为一个文件的修改而保存依赖包的 所有文件。
  2. 所有文件都保存在硬盘上统一的位置。当安装软件包时,其包含的所有文件都会硬链接到这个位置,而不会占用 额外的硬盘空间。这让你可以在项目之间方便地共享相同版本的 依赖包。

(3)目录结构确定性: pnpm 保证了每次安装的时候都会产生完全相同的 node_modules 目录结构,这在持续部署的环境中特别重要,因为它确保了可预测性和一致性。

(4)并行和异步: pnpm支持并行化和异步操作,即在处理大型项目和比较复杂的依赖树时相当重要,因为它可以极大地减少等待时间。

2、pnpm的缺点

(1)兼容性: 以下是pnpm官方列出来对应版本对nodejs的兼容情况,明显不如npm或者yarn,这也是呼应标题为什么新项目才推荐的原因。

(2)社区支持和资源较差: npm或者yarn 由于历史原因拥有更成熟而广泛的社区支持和资源。也就是说在遇到问题时,网上寻找 npm或者yarn 的解决方案比 pnpm 更容易一些。

(3)硬链接的限制: pnpm 虽然硬链接可以节省磁盘空间,但在某些文件系统(例如:NTFS)或操作系统上,硬链接可能不受支持或有局限性,这可能影响 pnpm 的可用性,但实在不行时可以关闭硬连接,所以这个问题不大。

二、pnpm对比npm与yarn的具体用法

pnpmnpmyarn的命令是很相似的,但它们在一些细节和功能上存在小差异。下面是常用的 pnpmnpmyarn 命令的对比

(1)安装pnpm

csharp 复制代码
npm install -g pnpm
或
yarn global add pnpm

(2)查看版本

npm -v

pnpm -v

yarn -v

(3)安装所有依赖

css 复制代码
npm install 或 npm i  

pnpm install 或 pnpm i 

yarn install 或者 yarn i

(4)全局安装依赖

csharp 复制代码
npm install -g 包的名称

pnpm add -g 包的名称

yarn global add 包的名称

(5)添加指定依赖

csharp 复制代码
npm install 包的名称 或 npm i 包的名称   

pnpm add 包的名称

yarn add 包的名称

(6)卸载依赖

arduino 复制代码
npm uninstall 包的名称 或 npm rm 包的名称

pnpm remove 包的名称

yarn remove 包的名称

(7)更新依赖

sql 复制代码
npm update 或 npm up

pnpm up

yarn upgrade 包的名称

(8)运行脚本

arduino 复制代码
npm run <script-name>

pnpm run <script-name>

yarn run <script-name>

(9)查看包信息

npm info 包的名称

pnpm info 包的名称

yarn info 包的名称

(10)清理缓存

css 复制代码
npm cache clean --force

pnpm cache clean

yarn cache clean

(11) 查看过时的依赖

npm outdated

yarn outdated

pnpm outdated

小结

以上是对pnpm背景的介绍和与npmyarn性能和用法指令的差异对比,总体上说前者性能更好但兼容性不如后者,更适合比较新技术的项目。如果那里写的不对欢迎大佬们指点修正。

相关推荐
DT——3 小时前
Vite项目中eslint的简单配置
前端·javascript·代码规范
学习ing小白5 小时前
JavaWeb - 5 - 前端工程化
前端·elementui·vue
一只小阿乐5 小时前
前端web端项目运行的时候没有ip访问地址
vue.js·vue·vue3·web端
计算机学姐5 小时前
基于python+django+vue的旅游网站系统
开发语言·vue.js·python·mysql·django·旅游·web3.py
真的很上进5 小时前
【Git必看系列】—— Git巨好用的神器之git stash篇
java·前端·javascript·数据结构·git·react.js
胖虎哥er6 小时前
Html&Css 基础总结(基础好了才是最能打的)三
前端·css·html
qq_278063716 小时前
css scrollbar-width: none 隐藏默认滚动条
开发语言·前端·javascript
.ccl6 小时前
web开发 之 HTML、CSS、JavaScript、以及JavaScript的高级框架Vue(学习版2)
前端·javascript·vue.js
小徐不会写代码6 小时前
vue 实现tab菜单切换
前端·javascript·vue.js
2301_765347546 小时前
Vue3 Day7-全局组件、指令以及pinia
前端·javascript·vue.js