位置: IT常识 - 正文
pnpm学习(pnmdp)
编辑：rootadmin推荐整理分享pnpm学习(pnmdp)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:npdp自学,pnf技术讲解视频,pnmdp,pnmdp,pnp课程是什么意思不影响gpa,npdp自学,pnp课程是什么意思,pnp课程是什么意思,内容如对您有帮助，希望把文章链接给更多的朋友！
现代的包管理工具 pnpm（ performant npm ），意思是高性能的 npm 它由 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依赖原理1、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的顶层提升了哪个版本，这个包都是会被安装两次的。
2、pnpm的安装包方式 同样的，使用pnpm安装一个express，安装结构如下
可以看到 node_modules 结构非常清晰，但是这个 express 文件夹只是一个软链接, 它的真正存储的地方在图中的 .pnpm 文件夹中 我们看一下pnpm官方对这一现象的图示说明：
顶级外层来看，格式很清晰，.pnpm中也是嵌套的。这是因为pnpm的node_modules布局使用的是符号链接来创建依赖关系的嵌套结构。.pnpm内部的每个包中的每个文件都是只用硬链接指向了.pnpm store 中的文件 这样的好处就是会让我们的node_modules很清晰，内部的包可以和package.json中的依赖对应起来，一目了然，我们安装什么里面就有什么 这样幽灵依赖的问题就解决了，包版本不确定性的问题也就解决了。毕竟顶层就只有我们手动安装的包，其他依赖包都收在.pnpm中。这样无论是哪个版本都会平铺在这里供你使用。 这个平铺的方式就是通过链接的形式进行引用
问题是上面的软链接、硬链接是啥呢？简单说明一下
软链接：类似windows系统的快捷方式；软链接里面存放的是源文件的路径，指向源文件； 硬链接：是计算机文件系统中的多个文件平等地共享同一个文件存储单元（如MFT条目、inode），可以实现多对一的关系，pnpm主要利用的是这一特性，这就很容易说明多个项目用到同一个包，就不用再重复下载包了，只需要管理好.pnpm store中的对应源文件就可以了
4、日常使用pnpm 使用命令和之前 npm/yarn 差不多，甚至可以无缝迁移到 pnpm 上来，常用命令主要是 1、pnpm install ：安装依赖 2、pnpm update ：更新依赖，根据指定的范围将包更新到最新版本，monorepo 项目中可以通过 --filter 来指定更新某个项目的某个包 3、pnpm uninstall ：删除依赖，根据指定的范围将包删除，monorepo 项目中可以通过 --filter 来指定删除某个项目的某个包 4、pnpm add：添加包 5、pnpm filter？
5、pnpm Demo演示上述提到的filter到底是什么功用呢？结合以下项目具体阐述 1、先配置最外层主目录结构 pnpm-workspace.yaml 配置
1) pnpm-workspace.yaml 配置 packages: - "packages/**"意思是定义pnpm的workspace空间，项目的多包文件入口是packages
2、在packages中创建多个项目，各个项目是独立的，你可以创建vue、react项目、方法库等，各项目是独立的，但是依赖包可以进行共享
我现在的目录结构如下：PNPMDEMO├── package.json├── packages│ ├── components│ │ ├── index.js│ │ └── package.json│ ├── reactApp│ │ ├── public│ │ └── src│ │ └── .....│ │ └── package.json│ │ └── vite.config.js│ ├── utils│ │ ├── index.js│ │ └── package.json├── pnpm-lock.yaml└── pnpm-workspace.yaml3、编写每个项目的package.json，其实主要是编写一下名称，方便以后使用 （我在utils/packages.json中安装了dayjs，在utils/packages.json安装了lodash）
{"name": "@packages/utils","version": "2.0.0","description": "","main": "index.js","scripts": {"test": "echo "Error: no test specified" && exit 1"},"keywords": [],"author": "","type": "module","license": "ISC","dependencies": {"dayjs": "^1.11.5"}}4、安装依赖 1）在根目录下安装依赖的话，这个依赖可以在所有的packages中使用 2）package下各项目安装依赖，问题来了? 我们需要cd到package的所在目录嘛?答案是:不需要的,可以通过pnpm强大的filter命令执行操作
5、命令 在根目录可以进行总目录的命令操作，也可对packages下的各项目进行整体命令操作 pnpm -w <package_selector> pnpm --filter <package_selector>
1）全局安装，下面各项目直接可以调用总包 ：pnpm -w add shortid2）对packages下的各项目执行打包"scripts": {"test": "echo "Error: no test specified" && exit 1","build": "pnpm --filter * build"},3）对packages下某个项目进行增加依赖操作例如：在@packages/components中安装lodash，在@packages/utils中安装一个dayjspnpm --filter @packages/components add lodashpnpm --filter @packages/utils add dayjs6、实例场景 在utils项目内定义一个方法，在reactAPP进行引用 1、在utils项目内定义一个方法
import dayjs from "dayjs";export const formatDay = () => {return dayjs().format('YYYY-MM-DD')}2、 在根目录下执行`pnpm -F @packages/react-app add @packages/utils@*`,表示@packages/components安装@packages/utils，其中的@*表示默认同步最新版本，省去每次都要同步最新版本的问题
完成后在reactAPP的packages.json中是这样的 { "name": "@packages/react-app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "@packages/utils": "workspace:*", //引入的utils的包 "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.0.17", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "^2.1.0", "vite": "^3.1.0" } }3、 在reactApp下的调用utils定义的方法
import { useState } from 'react' import {formatDay,formatMth} from '@packages/utils' import './App.css' function App() { console.log(formatMth()); return ( <div className="App"> {formatDay()} </div> ) } export default App7、包提升 就是实现在packages下的某个项目中引入一个第三方库，将此第三方库提升到目录层，其他packages下的所有项目都可以使用此第三方库 1）在components项目中引入lodash 2）配置.npmrc文件 public-hoist-pattern[]=lodash 3）执行pnpm install,在reactApp下即可使用lodash的方法
上一篇：【综述】分子预训练模型综述
下一篇：el-upload上传文件类型大小限制+手动上传+通过后端给的接口带参数(el-upload上传文件携带参数)
