目录
一、什么是pnpm
1.节省磁盘空间提高安装效率
2.创建非扁平的node_modules目录结构
二、pnpm的安装和使用
1.安装全局pnpm
2.查看pnpm版本
三、pnpm在monorepo架构中的使用
1.在根目录pnpm初始化生成package.json
2.配置工作空间
3.安装项目依赖
4.暴露公用方法
四、pnpm常用命令
一、什么是pnpm
pnpm又称 performant npm,翻译过来就是高性能的npm。
1.节省磁盘空间提高安装效率
pnpm通过使用硬链接和符号链接(又称软链接)的方式来避免重复安装以及提高安装效率。
硬链接:和原文件共用一个磁盘地址,相当于别名的作用,如果更改其中一个内容,另一个也会跟着改变
符号链接(软链接):是一个新的文件,指向原文件路径地址,类似于快捷方式
官网原话:
当使用 npm 时,如果你有 100 个项目,并且所有项目都有一个相同的依赖包,那么,你在硬盘上就需要保存 100 份该相同依赖包的副本。然而,如果是使用 pnpm,依赖包将被存放在一个统一的位置,因此:
1.如果你对同一依赖包需要使用不同的版本,则仅有 版本之间不同的文件会被存储起来。例如,如果某个依赖包包含 100 个文件,其发布了一个新 版本,并且新版本中只有一个文件有修改,则pnpm update 只需要添加一个新文件到存储中,而不会因为一个文件的修改而保存依赖包的所有文件。
2.所有文件都保存在硬盘上的统一的位置。当安装软件包时,其包含的所有文件都会硬链接自此位置,而不会占用额外的硬盘空间。这让你可以在项目之间方便地共享相同版本的依赖包。
最终结果就是以项目和依赖包的比例来看,你节省了大量的硬盘空间,并且安装速度也大大提高了!
2.创建非扁平的node_modules目录结构
二、pnpm的安装和使用
1.安装全局pnpm
npm i pnpm -g
2.查看pnpm版本
如果显示版本,说明安装成功
pnpm -v
三、pnpm在monorepo架构中的使用
如下结构,我们项目中有一个main应用,在web文件夹下还有一个react应用和vue应用,我们可以用pnpm对依赖进行统一管理
1.在根目录pnpm初始化生成package.json
pnpm init
2.配置工作空间
① 新建pnpm-workspace.yaml文件
② 配置pnpm-workspace.yaml文件
packages:# 主项目- 'main-project'# 子目录下所有项目- 'web/**'
3.安装项目依赖
在根目录运行如下命令,一键为所有项目安装依赖
pnpm i
4.暴露公用方法
① 创建common文件夹及index.ts
② 在common文件夹中运行pnpm init初始化
pnpm init
③ pnpm-workspace.yaml文件中添加common文件夹
④ 编写index.ts文件暴露方法
export const hello = () => { console.log('hello') }
⑤ 根目录运行pnpm -F main-project add common将common里的方法暴露给main-project
这里的-F是–filter的简写,用于过滤指定的package,用法 pnpm –filter
pnpm -F main-project add common
⑥ 在页面中引入公共方法
⑦ 启动页面
pnpm -Fmain-project dev
四、pnpm常用命令
#安装软件包及其依赖的任何软件包 如果workspace有配置会优先从workspace安装pnpm add #安装项目所有依赖pnpm install#更新软件包的最新版本pnpm update#移除项目依赖pnpm remove#运行脚本pnpm run#创建一个 package.json 文件pnpm init#以一个树形结构输出所有的已安装package的版本及其依赖pnpm list