pnpm的安装及其使用(转载)

发布时间 2024-01-04 17:17:01作者: 浅巷深念

1、pnpm是什么

pnpm (performant npm,意思是高性能的 npm)是 Node.js 的替代包管理器。它是 npm 的直接替代品,速度更快、效率更高。为什么效率更高?当你安装一个包时,pnpm 将它保存在你机器上的一个全局存储中,然后我们从它创建一个硬链接而不是复制。对于模块的每个版本,磁盘上只保存一个副本。

例如,当使用 npm 或 yarn 时,如果您有 100 个使用 lodash 的包,那么磁盘上将有 100 个 lodash 副本。Pnpm 可让您节省千兆字节的磁盘空间!

它由 npm/yarn 衍生而来,但却解决了 npm/yarn 内部潜在的 bug,并且极大了地优化了性能

2、特性有哪些

(1)速度快

官方的benchmark 数据是这样的,但是实际使用发现pnpm的第一次下载包速度跟yarn是差不多的,其优势体现在第二次下载相同的包更快

(2)高效利用磁盘空间

pnpm 内部使用基于内容寻址的文件系统来存储磁盘上所有的文件,这个文件系统出色的地方在于
1、不会重复安装同一个包。用 npm/yarn 的时候,如果 100 个项目都依赖 lodash,那么 lodash 很可能就被安装了 100 次,磁盘中就有 100 个地方写入了这部分代码。但在使用 pnpm 只会安装一次,磁盘中只有一个地方写入,后面再次使用都会直接使用 hardlink(硬链接)
2、即使一个包的不同版本,pnpm 也会极大程度地复用之前版本的代码。举个例子,比如 lodash 有 100 个文件,更新版本之后多了一个文件,那么磁盘当中并不会重新写入 101 个文件,而是保留原来的 100 个文件的 hardlink,仅仅写入那一个新增的文件

(3)*支持monorepo

随着前端工程的日益复杂,越来越多的项目开始使用 monorepo。之前对于多个项目的管理,我们一般都是使用多个 git 仓库,但 monorepo 的宗旨就是用一个 git 仓库来管理多个子项目,所有的子项目都存放在根目录的packages目录下,那么一个子项目就代表一个package。

3、pnpm依赖原理

npm、yarn安装包的问题

在 pnpm 出现以前,npm 和 yarn 为了提高包的复用率,都采用了扁平化的装包策略。扁平化的安装方式会导致我们的 node_modules 文件夹和 package.json 存在很大的出入,比如你install一个包 express,但是你的node_modules下会有很多包
这个时候会有一些问题

(1)幽灵依赖
从目前的包引用方式来说,inport的时候我们会从node_modules的文件夹中寻找,按照上面的图中所示,如果我们在package.json中没有accepts,其实我们也是可以引用到的,因为她确实存在,这时候我们访问的就是未申明npm包,如果某一天express主包不再依赖accepts,这个时候项目就会有依赖缺失的问题。 我们把这种主包依赖的子包,未被申明而在项目中使用,可以理解成是主包夹带的包,我们称之为 幽灵依赖。

(2)包版本的不确定性
这个很好理解,如果A、B两个主包都依赖accepts包,但是A依赖accepts@1.0,B依赖accepts@2.0 ,那node_modules下的扁平结构是展示1.0 还是 2.0 呢?目前的方式是谁后安装的谁就显示。 这种不确定性在开发中引起的问题也不在少数 「别人用这个包可以解决这个问题,但是我安装这个包就不能解决」,往往就是这个原因导致的

(3)依赖重复安装
这个也很好理解,AB都依赖accepts,依赖不同的版本,无论node_modules的顶层提升了哪个版本,这个包都是会被安装两次的。

4、pnpm的安装、使用

1、安装

需要先安装:Node环境(✔️)   npm环境(✔️)

// 全局安装
npm install pnpm -g

2、查看源

pnpm config get registry

3、切换淘宝源

pnpm config set registry https://registry.npmmirror.com/

4、使用

pnpm install 包 // 安装依赖
pnpm i 包 // 安装依赖 等价于 npm i
pnpm add 包 // -S 默认写入dependencies 等价于 npm i 包
pnpm add -D // -D devDependencies
pnpm add -g // 全局安装  等价于 npm i 包 -g
pnpm view ts-node versions // 查看ts-node的所有版本
pnpm list [-g] // 查看依赖(全局)
pnpm dev //pnpm run dev 等价于 npm run dev/test/build
pnpm serve(脚本名称) 运行脚本serve 等价于 npm run serve
pnpm --version // 查看pnpm的版本

5、移除

pnpm remove 包 // 移除包
pnpm remove 包 --global // 移除全局包

6、 更新

pnpm up // 更新所有依赖项
pnpm upgrade 包 // 更新包
pnpm upgrade 包 --global // 更新全局包

 注意:pnpm不会自动下载依赖中使用的其他依赖,npm和cnpm可以自动下载依赖中的其他依赖,这涉及到依赖链的问题,pnpm会先检查共享存储库,如果有该依赖则创建符号链接(即硬链接)定位到共享存储库中的依赖,不会重复的去下载。npm则是每个项目都是单独下载的依赖。

7、 如果希望自动下载依赖中的依赖 则可以使用

pnpm recursive install

8、 pnpm 还提供了其他一些命令来管理依赖,例如:

pnpm recursive add <package>:在项目及其子项目中添加依赖
pnpm recursive update:更新所有依赖

9、设置包存放地址 

pnpm config set store-dir "E:/xxx"

10、更新pnpm版本

pnpm add -g pnpm to update

如果出现下述错误:

ERROR  Unable to find the global bin directory
Run "pnpm setup" to create it automatically, 
or set the global-bin-dir setting, 
or the PNPM_HOME env variable. The global bin directory should be in the PATH.

执行pnpm setup依然报错。
看提示有“set the global-bin-dir setting”、“PNPM_HOME”、 “PATH”。然后进行如下设置。

1、在命令行中执行以下命令

 

pnpm config set store-dir "D:\pnpm\storeDir" # pnpm全局仓库路径(类似 .git 仓库)
pnpm config set global-dir "D:\pnpm\globalDir" # pnpm全局安装路径
pnpm config set global-bin-dir "D:\pnpm\globalBinDir" # pnpm全局bin路径
pnpm config set state-dir "D:\pnpm\state" # pnpm创建pnpm-state.json文件的目录
pnpm config set cache-dir "D:\pnpm\cache" # pnpm全局缓存路径

2、在环境变量中配置。pnpm全局bin路径

 

3、执行pnpm add -g pnpm,没有报错信息

4、执行pnpm -v 已经是最新版本了

 

11、安装问题

当在vscode上使用时出现

 

1. 以管理员身份运行vscode;
2. 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的;
3. 执行:set-ExecutionPolicy RemoteSigned;
4. 这时再执行get-ExecutionPolicy,就显示RemoteSigned;

到这一般就没有问题了。

出现这个就是没有用管理员运行

 方法一:用管理员运行vscode
方法二如下:

Set-ExecutionPolicy -Scope CurrentUser

出现这个

 填入 RemoteSigned

 

5、将npm或yarn项目改为pnpm项目

修改npm或者yarn的lock文件为pnpm的

pnpm import

删除node_modules

rm force node_modules

安装依赖

pnpm install

最后用pnpm ls查看是否报错,没报错而是出现依赖名称那就没问题了。

6、清除pnpm缓存

删除 node_modules 文件夹和pnpm-lock.yaml文件,然后重新安装依赖项。
使用pnpm store prune命令清除缓存,然后重新安装依赖项

 

最后附上官网地址:Motivation | pnpm
————————————————
版权声明:本文为CSDN博主「任磊abc」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/sinat_36728518/article/details/134492999

参考:https://blog.csdn.net/zwl5670/article/details/129598244