前端工程化08-新的包管理工具pnpm

news2024/11/24 15:25:18

1、历史原因解读

pnpm这个东西发布的时间是比较早的,但是在最近一两年的时候才开始流行,甚至是可以说非常的盛行,那么这个包到底是个什么东西的,那么我们先说下,原来的包管理工具到底有那些问题?比如说我们以前学习过 npm/yarn/cnpm/npx,这三个在安装我们一个包的时候有两个位置可以安装,一个是局部一个全局,那么我们来思考一下假如我们来安装一个包的时候,比如说我们我们这里有一个项目为project01.现在我们来开发一个项目都是要通过webpack来进行打包的,我们必然需要安装webpack,刚才我们在安装webpack的时候,同时也帮我安装了几十个其他的包,因为webpack本身也依赖其他的包,但是真实开发你不能只用一个webpack,还有一些别的包,babel/less/Vue/VueRouter/Vuex/Pinia/axios.等等一大堆的包…,在我的电脑上我们不可能只开发一个项目,我们会开发很多的很多的项目,项目一、项目二、项目三,一个电脑上是可能存在几个、到几十个、甚至上百个项目的,这里的项目不是指正式的公司项目(当然小公司可能就1-3个),但是你学习阶段,会创建不同的Demo项目,也就是每个项目都需要一份对应的依赖库,如果每个项目都是1个G的模块包。那么我们电脑上,光这堆乱七八遭的依赖就非常的大。电脑不得炸掉npm\yarn都没有解决这个问题,pnpm解决了这个问题。

image-20240616214312907

2、什么是pnpm

什么是pnpm呢?我们来看一下官方的解释:

  • pnpm:我们可以理解成是performant(高性能的) npm缩写;

    image-20240616214440124

哪些公司在用呢?

  • 包括Vue在内的很多公司或者开源项目的包管理工具都切换到了pnpm;

image-20240616214515445

3、硬连接和软连接的概念

维基百科的解释,当你不会一个技术需要学习时,请先维基百科,了解下最为准确的定义,尽管他们晦涩难懂

硬链接(hard link):

​ 硬链接(英语:hard link)是电脑文件系统中的多个文件平等地共享同一个文件存储单元;

​ 删除一个文件名字后,还可以用其它名字继续访问该文件;

符号链接(软链接soft link、Symbolic link):

​ 符号链接(软链接、Symbolic link)是一类特殊的文件;

​ 其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用;

image-20240616220105498

快捷方式就是软连接文件寻址找到对应的数据是硬链接

4、软链接和硬链接的测试演练

文件的拷贝

​ 文件的拷贝每个人都非常熟悉,会在硬盘中复制出来一份新的文件数据;

window: copy foo.js foo_copy.js
macos : cp foo.js foo_copy.js

image-20240629211809794

文件的硬链接

window: mklink /H aaa_hard.js aaa.js
macos : ln foo.js foo_hard.js

image-20240629211919505

文件的软连接

window: mklink aaa_soft.js aaa.js
macos : ln -s foo.js foo_copy.js

image-20240629212142587

5、pnpm到底做了什么

当使用npm或Yarn时,如果你==有100个项目,并且所有项目都有一个相同的依赖包,那么, 你在硬盘上就需要保存100 份该相同依赖包的副本。==

如果是使用pnpm,依赖包将被存放在一个统一的位置,因此:

  • 如果你对同一依赖包使用相同的版本,那么磁盘上只有这个依赖包的一份文件;
  • 如果你对同一依赖包需要使用不同的版本,则仅有版本之间不同的文件会被存储起来;
  • 所有文件都保存在硬盘上的统一的位置
    • 当安装软件包时, 其包含的所有文件都会硬链接到此位置,而不会占用 额外的硬盘空间;
    • 这让你可以在项目之间方便地共享相同版本的 依赖包;

image-20240629214803445

为什么效率高,因为应用了硬链接,只是创建硬链接,而不是从新下载,而不用占用额外的磁盘空间

6、pnpm创建非扁平的node_modules目录

pnpm创建的是一个非扁平的node_modules目录,这个也是pnpm的一个特点,但是这个的话也并不是他脱颖而出的一个点,但是确实是这个点还是有一点自己的特色的,并且的话这个特点也算是他的优势之一。

那什么是扁平的node_modules呢?

像我们最近用的npm,或者是yarn,他如果在安装很多包的时候,他就是按照一种扁平化的方式在管理我们的包的,我们观察通过npm安装的包,发现包都是在node_modules这个目录下管理的,如下图

解释

如果我安装webpack这个包,那么webpack所需要的一些依赖包,也是放在node_modules这个目录下的,并不是在webpack目录下还存在一个node_modules,然后把依赖的其他包放进去,早期的npm确实是按照这种方式进行管理,但是会造成同一个包会安装很多次,所以后来的话,不管是yarn,还是npm都将他变成了扁平式的,从而避免重复下载的问题,但是做成扁平化也是有一定的弊端的,比如A包里边有C包,但是我没有安装过C包,C包却能通过代码编写的方式进行使用C包,假如有一天我卸载了A包,C包也许就随之也被卸载掉了,代码跑起来肯定会报错,这是非常别扭、不规范、不安全的。pnpm解决了这个问题

当使用npm或 Yarn Classic安装依赖包时,所有软件包都将被提升到node_modules的 根目录下。

  • 其结果是,源码可以访问 本不属于当前项目所设定的依赖包;

image-20240629221144203

7、pnpm的安装和使用

那么我们应该如何安装pnpm呢?

  • 官网提供了很多种方式来安装pnpm:https://www.pnpm.cn/installation
  • 因为我们每个同学都要求安装过Node,Node中有npm,所以我们通过npm安装即可;

安装pnpm的命令

npm  install -g pnpm

检查pnpm的安装版本

pnpm -v

注意:2024-06-29,安装的pnpm的版本为pnpm9,但是他必须要使用node18,没办法我只能卸载掉,因为我公司用的node才16版本。

卸载pnpm

npm uninstall pnpm

pnpm与node的版本对应关系

image-20240629222319481

更多命令和用法可以参考pnpm的官网:https://pnpm.io/zh/

兼容性:https://pnpm.io/zh/installation#%E5%85%BC%E5%AE%B9%E6%80%A7

pnpm与npm等价命令的对照表,帮助你快速入门:

image-20240629222507468

require,引入包查找顺序内容回顾

默认情况下,会去查找是不是node的核心模块,如果不是的话他就会去node_modules里边进行查找。我们观察通过pnpm安装的axios的那些依赖包,是没有在

node_modules包下显示的,所以他是一个非扁平化的node_modules

我们仔细观察axios这个目录我们会在他的右侧发现有一个小箭头,表示为他是一个软链接

切记他并不是直接对远程仓库的npm仓库的包建立了一个软链接,而是在你的每个目录里面都是有对应的硬链接的,只不过他是在我们node_modules里边给你建立了一个软链接,那么你真实的文件到底在哪里呢?其实是在.pnpm这个文件里边的
在这里插入图片描述

8、pnpm的存储store

在pnpm7.0之前,统一的存储位置是 ~/.pnpm-score中的;

image-20240629224947273

在pnpm7.0之后,统一的存储位置进行了更改:/store

  • 在 Linux 上,默认是 ~/.local/share/pnpm/store
  • 在 Windows 上: %LOCALAPPDATA%/pnpm/store
  • 在 macOS 上: ~/Library/pnpm/store

image-20240629225058505

为什么要做出这样的改变不能跨磁盘建立硬链接的。

**我们可以通过一些终端命令获取这个目录:**获取当前活跃的store目录

pnpm store path

**另外一个非常重要的store命令是prune(修剪):**从store中删除当前未被引用的包来释放store的空间

pnpm store prune

image-20240629225409202

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1877493.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面向对象和面向过程编程的区别

引言 小伙伴们,当你们看到这章的时候,显然你们已经跨过了来自指针给你们带来的麻烦,唔~真棒呢,但是我们只学会一些基础的C语法并不能帮我们解决问题,甚至是稍微难一些的题目我们都没办法解决,那怎么办呢&am…

Linux基础 - BIND加密传输缓存服务器

目录 零. 简介 一. 安装 二. 安全的加密传输 三. 部署缓存服务器 四. 总结 零. 简介 BIND(Berkeley Internet Name Domain)是一款广泛使用的开源 DNS(域名系统)服务器软件。 域名系统的主要作用是将易于人类理解的域名&…

实验2 色彩模式转换

1. 实验目的 ①了解常用的色彩模式,理解色彩模式转换原理; ②掌握Photoshop中常用的颜色管理工具和色彩模式转换方法; ③掌握使用Matlab/PythonOpenCV编程实现色彩模式转换的方法。 2. 实验内容 ①使用Photoshop中的颜色管理工具&#xff…

Node.js个人博客

1. 项目介绍 项目演示地址:https://ximingx.org.cn/ 项目github:https://github.com/ximingx/blog 想象一下,你是一位热爱写作的程序员小王。每天,你都有很多新的想法和技术心得想要分享。但是,管理你的博客网站却成了一个让你头疼的问题。 周一早晨…

统计分析利器:深入解读卡方检验与单因素方差分析的应用案例【练习题】

一、卡方检验 1.对400人进行问卷调查,询问对于教学改革的看法,调查结果如下表所示,请问不同学科不同性别的人意见是否相同。 学科 男生 女生 工科 80 40 理科 120 160 (性别,学科均无序分类>卡方检验&am…

【SGX系列教程】(五)Intel-SGX 官方示例分析(SampleCode)——RemoteAttestation

文章目录 一.RemoteAttestation原理介绍1.1 远程认证原理1.2 远程认证步骤1.3 远程认证基本流程1.4 IAS通过以下步骤验证报告的签名1.5 关键术语1.6 总结二.源码分析2.1 README2.1.1 README给出的编译流程2.2 重点代码分析2.2.0 主要代码模块交互流程分析2.2.1 isv_app文件夹2.…

Leetcode刷题笔记 | 二叉树基本性质 | 一天的题量 | 5道题目 | 深度优先搜索 | 广度优先搜索 | 递归 | 遍历

🙋大家好!我是毛毛张! 🌈个人首页: 神马都会亿点点的毛毛张 📌本期毛毛张分享的是LeetCode关于二叉树🌲的性质的一些基础题,做这些题目的本质还是遍历二叉树🏃‍➡️的过程&#…

uniapp+php开发的全开源多端微商城完整系统源码.

uniappphp开发的全开源多端微商城完整系统源码. 全开源的基础商城销售功能的开源微商城。前端基于 uni-app,一端发布多端通用。 目前已经适配 H5、微信小程序、QQ小程序、Ios App、Android App。 采用该资源包做商城项目,可以节省大量的开发时间。 这…

Docker部署Dillinger个人文本编辑器

Docker部署Dillinger个人文本编辑器 一、Dillinger介绍1.1 Dillinger简介1.2 Dillinger使用场景 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、拉取Dillinger镜像五、部署Dill…

前后端分离的后台管理系统开发模板(带你从零开发一套自己的若依框架)上

前言: 目前,前后端分离开发已经成为当前web开发的主流。目前最流行的技术选型是前端vue3后端的spring boot3,本次。就基于这两个市面上主流的框架来开发出一套基本的后台管理系统的模板,以便于我们今后的开发。 前端使用vue3ele…

YOLO网络结构特点收录

YOLO网络结构特点收录 YOLO(You Only Look Once)网络结构随着版本迭代不断进化,以下是一些关键版本的网络结构特点概述: YOLOv1 输入:将图像调整至固定尺寸,如448x448像素。骨干网络:初期版本…

Leetcode3190. 使所有元素都可以被 3 整除的最少操作数

Every day a Leetcode 题目来源:3190. 使所有元素都可以被 3 整除的最少操作数 解法1:遍历 遍历数组,累加最少操作数,即 min(num % 3, 3 - num % 3)。 代码: /** lc appleetcode.cn id3190 langcpp** [3190] 使所…

ElementUI框架搭建及组件使用

前言: 当开始使用ElementUI框架来搭建网站或Web应用程序时,了解框架的基本结构和组件的使用是至关重要的。ElementUI是一个基于Vue.js的框架,提供了丰富的UI组件和工具,可以帮助开发人员快速构建现代化的用户界面。 在本文中,我…

电脑提示vcomp140.dll丢失的几种有效的解决方法,轻松搞定dll问题

在电脑使用过程中,我们可能会遇到一些错误提示,其中之一就是找不到vcomp140.dll。那么,究竟什么是vcomp140.dll呢?为什么会出现找不到vcomp140.dll的情况呢?本文将从vcomp140.dll的定义、常见原因、对电脑的影响以及解…

[鹏城杯 2022]babybit

发现一个压缩包提取出来提取出来两个压缩包里面是注册表使用MiTeC Windows Registry Recovery 恢复注册表 flag在ROOT\ControlSet001\Control\FVEStats里的OsvEncryptInit和OsvEncryptComplete中 NSSCTF{2022/6/13_15:17:39_2022/6/13_15:23:46}

Nuxtjs3教程

起步 官方文档 官方目录结构 安装 npx nuxi@latest init <project-name>后面跟着提示走就行 最后yarn run dev 启动项目访问localhost:3000即可 路由组件 app.vue为项目根组件 <nuxt-page />为路由显示入口 将app.vue更改内容如下 <template><d…

PostgreSQL 17 Beta 1 发布!

PostgreSQL 全球开发小组宣布&#xff0c;PostgreSQL 17 的第一个测试版本现已可供下载。此版本包含 PostgreSQL 17 正式发布时将提供的所有功能的预览&#xff0c;但测试期间版本的某些细节可能会发生变化。 #PG培训#PG考试#postgresql培训#postgresql考试#postgresql认证 您…

【Qt+opencv】编译、配置opencv

文章目录 前言下载opencv编译opencvmingw版本 总结 前言 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库&#xff0c;它包含了超过2500个优化的算法。这些算法可以用来检测和识别面部&#xff0c;识别对象&#x…

动手学深度学习(Pytorch版)代码实践 -计算机视觉-47转置卷积

47转置卷积 import torch from torch import nn from d2l import torch as d2l# 输入矩阵X和卷积核矩阵K实现基本的转置卷积运算 def trans_conv(X, K):h, w K.shapeY torch.zeros((X.shape[0] h - 1, X.shape[1] w - 1))for i in range(X.shape[0]):for j in range(X.shap…

Python_Socket

Python Socket socket 是通讯中的一种方式&#xff0c;主要用来处理客户端与伺服器端之串连&#xff0c;只需要protocol、IP、Port三项目即可进行网路串连。 Python套件 import socketsocket 常用函式 socket.socket([family], [type] , [proto] ) family: 串接的类型可分为…