前端工程化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.mzph.cn/web/36693.shtml

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

相关文章

MySQL自增主键踩坑记录

对于MySQL的自增主键,本文记录、整理下在工作中实际遇到的问题。 下面示例均基于MySQL 8.0 修改列的类型后,自增属性消失 CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL,email VARCHAR(100) NOT NULL );上面的…

论文学习——一种自适应提升的动态多目标优化进化算法

论文题目:A dynamic multi-objective optimization evolutionary algorithm with adaptive boosting 一种自适应提升的动态多目标优化进化算法(Hu Peng a,b,∗, Jianpeng Xiong a, Chen Pi a, Xinyu Zhou c, Zhijian Wu d)IEEE Swarm and Ev…

phpstorm2024代码总是提示“no usages”或者“无用法”解决办法

问题:phpstorm2024使用时,总是会提示无用法,如果没有安装中文语言包的情况下会提示:no usages,如果想关闭怎么办? 编译器右上角点击齿轮进入设置,按照下图的方法点击即可关闭。或者在编译器的“…

机器学习——强化学习中的“策略π”的个人思考

这两天回顾了《西瓜书》中的最后一章——“强化学习”,但是忽然发现之前对于本章中的“策略π”的理解有些偏差,导致我在看值函数公式时有些看不明白。对此,我在网上查了一些资料,但是大部分人都是一笔带过,或者是照本…

c++ 设计模式 的课本范例(中)

(10)单例模式 singleton 。整个应用程序执行时,只有一个单例模式的对象。 class GameConfig // 懒汉式,啥时候用单例对象,啥时候创建。 { private:static GameConfig* ptrGameConfig; // 这些函数都作为私有函数&…

【wsl2】WIN11借助wsl2挂载ext4磁盘

我有一块ext4文件系统的硬盘,想要在win11上访问,我们可以通过wsl2进行挂载 wsl2的安装就跳过了,可以自行搜索安装。 安装完成后 >>> GET-CimInstance -query "SELECT * from Win32_DiskDrive"通过这个命令,可…

汽车电子工程师入门系列——AUTOSAR通信服务框架(上)

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

Spring Boot项目如何配置跨域

1、通过SpringSecurity进行配置 2、前端跨域配置:proxy配置项用于设置代理规则,用于前端开发中与后端API交互时使用。

ROS2自定义接口Python实现机器人移动

1.创建机器人节点接口 cd chapt3_ws/ ros2 pkg create example_interfaces_rclpy --build-type ament_python --dependencies rclpy example_ros2_interfaces --destination-directory src --node-name example_interfaces_robot_02 --maintainer-name "Joe Chen" …

Java 基本数据类型【基础篇】

目录 Java 数据类型基本数据类型整数类型【byte、short、int、long】浮点类型【float、double】布尔类型【boolean】字符类型【char】 引用数据类型 Java 数据类型 Java 语言支持的数据类型分为两种:基本数据类型 和 引用数据类型。其数据类型结构如下图所示&#x…

24年hvv前夕,微步也要收费了,情报共享会在今年结束么?

一个人走的很快,但一群人才能走的更远。吉祥同学学安全https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247483727&idx1&sndb05d8c1115a4539716eddd9fde4e5c9&scene21#wechat_redirect这个星球🔗里面已经沉淀了: 《Ja…

30 哈希的应用

位图 概念 题目 给40亿个不重复的无符号整数,没排过序。给一个无符号整数,如何判断一个数是否在这40亿个整数中 1.遍历,时间复杂度O(N) 2.二分查找,需要先排序,排序(N*logN),二分查找,logN。…

2024年【焊工(初级)】考试及焊工(初级)报名考试

题库来源:安全生产模拟考试一点通公众号小程序 焊工(初级)考试是安全生产模拟考试一点通生成的,焊工(初级)证模拟考试题库是根据焊工(初级)最新版教材汇编出焊工(初级&a…

C++ 史上首次超越 C,仅次于Python!【送源码】

TIOBE 公布了 2024 年 6 月的编程语言排行榜——C 史上首次超越 C,跃至榜二,仅次于 Python。 C 是一种广泛应用于嵌入式系统、游戏开发和金融交易软件等领域的语言,在本月成功超越了 C, 成为了 TIOBE 指数中新的第二名。 这是 C …

四川省高等职业学校大数据技术专业建设暨专业质量监测研讨活动顺利开展

6月21日,省教育评估院在四川邮电职业技术学院组织开展全省高等职业学校大数据技术专业建设暨专业质量监测研讨活动。省教育评估院副院长赖长春,四川邮电职业技术学院党委副书记、校长冯远洪,四川邮电职业技术学院党委委员、副校长程德杰等出席…

鸿蒙开发设备管理:【@ohos.multimodalInput.inputConsumer (组合按键)】

组合按键 InputConsumer模块提供对按键事件的监听。 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。本模块接口均为系统接口,三方应用不支持调用。 导入模块 import inputConsumer …

36.基于多目标螳螂优化算法的微电网优化matlab

微♥关注“电击小子程高兴的MATLAB小屋”获取资源 基于螳螂优化算法的多目标优化算法 求解微电网多目标优化调度 比较不同目标函数寻优对调度结果的影响 第1种.将两个目标函数值归一化相加,取相加后最小的目标值的粒子,即寻找折衷解并画图 第2种寻找…

AI助力校园安全:EasyCVR视频智能技术在校园欺凌中的应用

一、背景分析 近年来,各地深入开展中小学生欺凌行为治理工作,但有的地方学生欺凌事件仍时有发生,严重损害学生身心健康,引发社会广泛关注。为此,教育部制定了《防范中小学生欺凌专项治理行动工作方案》进一步防范和遏…

json文件 增删查改

默认收藏夹 qt操作json格式文件... 这个人的 写的很好 我的demo全是抄他的 抄了就能用 —————————— 下次有空把我的demo 传上来 在E盘的demo文件夹 json什么名字

Leetcode - 133双周赛

目录 一,3190. 使所有元素都可以被 3 整除的最少操作数 二,3191. 使二进制数组全部等于 1 的最少操作次数 I 三,3192. 使二进制数组全部等于 1 的最少操作次数 II 四,3193. 统计逆序对的数目 一,3190. 使所有元素都…