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

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.rhkb.cn/news/364193.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

了解WPF控件:OpenFileDialog常用属性与用法(十六)

掌握WPF控件:熟练OpenFileDialog常用属性(十六) OpenFileDialog控件在WPF中用于需要用户指定文件路径,为用户提供了一个直观且易用的界面来浏览和选择本地文件系统中的文件。例如,当用户需要打开一个已存在的文本文件…

【小沐学AI】Python实现语音识别(Whisper-Web)

文章目录 1、简介2、下载2.1 openai-whisper2.2 whisper-web 结语 1、简介 https://openai.com/index/whisper/ Whisper 是一种自动语音识别 (ASR) 系统,经过 680,000 小时的多语言和多任务监督数据的训练,从网络上收集。我们表…

计算机网络 动态路由OSPF

一、理论知识 1.OSPF基本概念 ①OSPF是一种链路状态路由协议,使用Dijkstra算法计算最短路径。 ②OSPF使用区域(Area)来组织网络,区域0(Area 0)是主干区域。 ③路由器通过通告直连网络加入OSPF域。 ④反…

动态规划基础练习

我们需要先从数组较大的开始进行处理&#xff0c;每次考察上下左右的&#xff0c;比较当前存储的最大值和转移来的值&#xff0c;哪一个大一点 #define _CRT_SECURE_NO_WARNINGS #include<bits/stdc.h> using namespace std;int n, m; int a[105][105]; int addx[] { 0,…

C++输出彩色方块

1.使用方法 SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HANDLE), 0xab); ———————————————————————————————————————— 0 黑色 1 蓝色 2 绿色 3 湖蓝色 4 红色 5 紫色 6 黄色 7 白色 8 灰色 9 …

架构师必知的绝活-JVM调优

前言 为什么要学JVM&#xff1f; 首先&#xff1a;面试需要 了解JVM能帮助回答面试中的复杂问题。面试中涉及到的JVM相关问题层出不穷&#xff0c;难道每次面试都靠背几百上千条面试八股&#xff1f; 其次&#xff1a;基础知识决定上层建筑 自己写的代码都不知道是怎么回事&a…

图形处理单元(GPU)在现代计算中的应用与挑战(研究论文框架)

摘要:随着高性能计算需求的日益增长,图形处理单元(GPU)已从专业的图形渲染处理器转变为具有高性能并行处理能力的多功能计算平台。本文将探讨GPU的核心优势、编程模型、在不同领域的应用以及面临的挑战和限制。此外,还将讨论GPU技术的未来发展趋势和潜在的研究机会。 关键…

[计算机网络] 虚拟局域网

虚拟局域网 VLAN&#xff08;Virtual Local Area Network&#xff0c;虚拟局域网&#xff09;是将一个物理的局域网在逻辑上划分成多个广播域的技术。 通过在交换机上配置VLAN&#xff0c;可以实现在同一个VLAN 内的用户可以进行二层互访&#xff0c;而不同VLAN 间的用户被二…

hive零基础入门

1、hive简介 hive&#xff1a;由facebook开源用于解决海量结构化数据的统计工具。 hive是基于Hadoop的数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张表&#xff0c;并提供sql查询功能。 2、hive本质 hive的本质是HQL&#xff08;HiveSQL&#xff09;转化成MapR…

快速应用开发(RAD):加速软件开发的关键方法

目录 前言1. 快速应用开发的概念1.1 什么是快速应用开发&#xff1f;1.2 RAD与传统开发方法的对比 2. 快速应用开发的实施步骤2.1 需求分析与规划2.2 快速原型开发2.3 用户评估与反馈2.4 迭代开发与改进2.5 最终交付与维护 3. 快速应用开发的优点与应用场景3.1 优点3.2 应用场景…

UNIAPP编译到微信小程序时,会多一层以组件命名的标签

UNIAPP编译到微信小程序时&#xff0c;会多一层以组件命名的标签 解决方案 可以配置virtualHost来配置 export default {options: {virtualHost: true} }

Navicat安装与连接教程

navicat 的安装 官网&#xff1a;https://www.navicat.com.cn/ 进入官网之后点击左上角的产品&#xff0c;然后往下滑动就可以看见许多类型&#xff0c;我们使用的是MongoDB数据库&#xff0c;所以就下载Navicat 17 for MongoDB 进入到这里之后&#xff0c;选择自己的系统版本…

面试-J.U.C包的梳理

1.J.U.C包的梳理 Java.Util.Concurrent包简称JUC (1)JUC整体架构图 (2)分析 Executor&#xff1a;线程执行器&#xff0c;任务执行和调度的框架。Tools下存在executor相关的executors类&#xff0c;用于创建executorservice&#xff0c;scheduleexecutorservice&#xff0c;…

京东云备案流程图_云主机快速ICP备案_京东云服务器备案问题解答

京东云ICP备案流程&#xff0c;备案包括网站和APP备案&#xff0c;以及备案问题解答FAQ&#xff0c;阿腾云以京东云网站域名备案流程为例&#xff0c;先填写主办单位信息&#xff0c;选择网站备案或APP备案&#xff0c;申请授权码并验证&#xff0c;填写并上传主办单位详细信息…

学生宿舍管理系统

摘 要 随着高校规模的不断扩大和学生人数的增加&#xff0c;学生宿舍管理成为高校日常管理工作中的重要组成部分。传统的学生宿舍管理方式往往依赖于纸质记录和人工管理&#xff0c;这种方式不仅效率低下&#xff0c;而且容易出错&#xff0c;无法满足现代高校管理的需求。因此…

gemini 1.5 flash (node项目)

https://www.npmjs.com/package/google/generative-ai https://ai.google.dev/pricing?hlzh-cn https://aistudio.google.com/app/apikey https://ai.google.dev/gemini-api/docs/models/gemini?hlzh-cn#gemini-1.5-flash https://ai.google.dev/gemini-api/docs/get-started…

数据可视化在智慧园区中的重要作用

在现代智慧园区的建设和管理中&#xff0c;数据的作用越来越重要。智慧园区利用物联网、云计算、大数据等技术&#xff0c;实现了园区各类信息的实时采集和处理。数据可视化作为数据处理和展示的重要工具&#xff0c;为智慧园区的各个方面提供了强有力的支持。 首先&#xff0c…

家电品牌如何利用3D数字化技术,突破转型瓶颈?

家电行业正经历着从增量市场向存量市场的转变&#xff0c;用户的消费观念也日趋成熟&#xff0c;更加注重产品的体验和服务质量。无论是线上购物平台还是线下实体门店&#xff0c;提供个性化和增强体验感的产品与服务已成为家电市场未来发展的核心驱动力。 51建模网依托“3D数字…

视频共享融合赋能平台LntonCVS统一视频接入平台数字化升级医疗体系

医疗健康事关国计民生&#xff0c;然而&#xff0c;当前我国医疗水平的地区发展不平衡、医疗资源分布不均和医疗信息系统老化等问题&#xff0c;制约了整体服务能力和水平的提升。视频融合云平台作为推动数字医疗的关键工具&#xff0c;在医疗领域的广泛应用和普及&#xff0c;…

YOLOv5改进 | 注意力机制 | 迈向高质量像素级回归的极化自注意力【全网独家】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a; 《YOLOv5入门 …