pnpm实践使用

517 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情

对于前端项目的包管理工具,从最开始的npmcnpm,现在主要使用的是yarn

对于pnpm这款工具之前就已经听说过了,但是没有实践使用过

pnpm中文网pnpm - 速度快、节省磁盘空间的软件包管理器 | pnpm 中文文档 | pnpm 中文网

pnpm

pnpm最大的优点就在于通过连接的方式节省磁盘空间并提升安装速度

当使用 npm 或 Yarn 时,如果你有 100 个项目,并且所有项目都有一个相同的依赖包,那么, 你在硬盘上就需要保存 100 份该相同依赖包的副本。然而,如果是使用 pnpm,依赖包将被 存放在一个统一的位置

pnpm安装

pnpm的安装方式有很多种,因为我是安装了node的,所以直接使用npm install -g pnpm进行全局安装即可。

其他方式安装:安装 | pnpm 中文文档 | pnpm 中文网


创建项目

我打算创建一个vue2vue cli项目

之前需要使用vue create demo-name创建即可,现在需要将包管理工具由npm切换成pnpm

通过vue create --help可以得知切换packageManager包管理工具可以使用-m image.png

所以当前命令:vue create -m pnpm demo-name

Error: command failed: pnpm install --reporter silent --shamefully-hoist

但是当我使用时,却出现了错误

1665657294251_CD4A2123-7031-4d86-9160-B690B87FFD19.png

我通过网上查找大概找到了两个方法,第一个是重新安装pnpm的版本,将其修改为6

第二个则是对.npmrc进行修改,.npmrc位于C:\Users\用户名文件夹下

.npmrc中添加:auto-install-peers=true

参考文章:【已解决】vue安装项目的时候出现了 command failed: pnpm install –reporter silent –shamefully-hoist 很有趣的解密过程-IT Blog (itcn.blog)

这样一来,使用命令重新创建vue cli项目就成功了

image.png


pnpm全局包位置

既然说pnpm是全局安装包,并指向引用的。那么全局包位置在哪里呢? pnpm会在磁盘上生成一个store-dir文件夹,将内容存储在其中。

参考:.npmrc | pnpm

  • 可以使用命令知道store-dir位置:pnpm store path image.png

  • 可以在项目node_module/.modules.yaml中查找storeDir image.png


将yarn项目包换成pnpm

既然可以将包全局放到一个文件夹去,那么是否可以将以前使用yarn安装下载的项目替换成pnpm

我删除了之前echarts绘制地图项目中的node_modules

然后使用pnpm install重新安装即可