前端工程化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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第三阶段Spark

Spark和PySpark的介绍 PySpark的相关设置 安装PySpark库 pip install pyspark pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pyspark 构建PySpark执行环境入口对象 # 导包 from pyspark import SparkConf, SparkContext# 创建SparkConf类对象 conf SparkConf()…

C++进修——C++核心编程

内存分区模型 C程序在执行时,将内存大方向划分为4个区域 代码区:存放函数体的二进制编码,由操作系统进行管理全局区:存放全局变量和静态变量以及常量栈区:由编译器自动分配释放,存放函数的参数值&#xff…

谈一下MySQL的两阶段提交机制

文章目录 为什么需要两阶段提交?两阶段提交流程?两阶段提交缺点? 为什么需要两阶段提交? 为了保证事务的持久性和一致性,MySQL需要确保redo log和binlog的同步持久化。MySQL通过“两阶段提交”的机制来实现在事务提交…

Python 面试【初级】

欢迎莅临我的博客 💝💝💝,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

安卓开发自定义时间日期显示组件

安卓开发自定义时间日期显示组件 问题背景 实现时间和日期显示,左对齐和对齐两种效果,如下图所示: 问题分析 自定义view实现一般思路: (1)自定义一个View (2)编写values/attrs.…

day57---面试专题(框架篇)

框架篇 1. Spring refresh 流程 要求 掌握 refresh 的 12 个步骤Spring refresh 概述 refresh 是 AbstractApplicationContext 中的一个方法,负责初始化 ApplicationContext 容器,容器必须调用 refresh 才能正常工作。它的内部主要会调用 12 个方法,我们把它们称为 refre…

【JavaScript】JavaScript简介

希望文章能给到你启发和灵感~ 如果觉得文章对你有帮助的话,点赞 关注 收藏 支持一下博主吧~ 阅读指南 JavaScript入门(1)————JavaScript简介开篇说明一、什么是JavaScript二、JavaScript的使用2.1 开发工具的选择…

上市公司环境研究汇总数据集(2008-2022年)

数据简介:上市公司环境研究是指对上市公司在环境保护和可持续发展方面的表现和做法进行评估和研究。这些评估可以包括上市公司的环境风险、环境管理制度和政策、环境负债和环境绩效等方面。 上市公司环境研究可以帮助上市公司更好地了解自身的环境状况和风险&#…

FastAPI教程II

本文参考FastAPI教程https://fastapi.tiangolo.com/zh/tutorial Cookie参数 定义Cookie参数与定义Query和Path参数一样。 具体步骤如下: 导入Cookie:from fastapi import Cookie声明Cookie参数,声明Cookie参数的方式与声明Query和Path参数…

[单机版架设]新天堂2-死亡骑士338|带AI机器人

前言 今天给大家带来一款单机游戏的架设:新天堂2-死亡骑士338单机服务端—带AI机器人 如今市面上的资源参差不齐,大部分的都不能运行,本人亲自测试,运行视频如下: 新天堂2 搭建教程 此游戏架设不需要虚拟机&#xf…

android轮播图入门1——简单无限自动轮播图

目标 目标是实现一个简单的轮播图,特征如下: 只展示本地图片可以无限轮播,在第一帧时也可以向前轮播可以自动轮播 code 先上代码,需要事先准备几张本地图片当素材 MainActivity: package com.example.loopapplication;import…

1-Pandas是什么

Pandas是什么 Pandas 是一个开源的第三方 Python 库,从 Numpy 和 Matplotlib 的基础上构建而来,享有数据分析“三剑客之一”的盛名(NumPy、Matplotlib、Pandas)。Pandas 已经成为 Python 数据分析的必备高级工具,它的…

nginx 1024 worker_connections are not enough while connecting to upstream

现象 请求api响应慢,甚至出现504 gateway timeout,重启后端服务不能恢复,但重启nginx可以恢复。 解决方案 worker_connections使用了默认值 1024,当流量增长时,导致连接不够 在nginx.conf中修改连接数就可以了&…

pg_rman:备份和恢复管理工具#postgresql培训

pg_rman 是 PostgreSQL 的在线备份和恢复工具。 pg_rman 项目的目标是提供一种与 pg_dump 一样简单的在线备份和 PITR 方法。此外,它还为每个数据库集群维护一个备份目录。用户只需一个命令即可维护包括存档日志在内的旧备份。 #PG培训#PG考试#postgresql考试#pos…

基于Spring Boot与Vue的智能房产匹配平台+文档

博主介绍:✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示:文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐:最热的500个选题…

深度解析:机器学习如何助力GPT-5实现语言理解的飞跃

文章目录 文章前言机器学习在GPT-5中的具体应用模型训练与优化机器翻译与跨语言交流:情感分析与问答系统:集成机器学习功能:文本生成语言理解任务适应 机器学习对GPT-5性能的影响存在的挑战及解决方案技术细节与示例 文章前言 GPT-5是OpenAI公…

【教学类65-04】20240625秘密花园涂色书04(通义万相)(图纸16:9,A4横板1张,一大168张纸168份)

背景需求 【教学类65-01】20240622秘密花园涂色书01(通义万相)(A4横版2张,一大3小 38张纸76份)-CSDN博客文章浏览阅读118次。【教学类65-01】20240622秘密花园涂色书01(通义万相)(A…

ValidateAntiForgeryToken、AntiForgeryToken 防止CSRF(跨网站请求伪造)

用途&#xff1a;防止CSRF&#xff08;跨网站请求伪造&#xff09;。 用法&#xff1a;在View->Form表单中: aspx&#xff1a;<%:Html.AntiForgeryToken()%> razor&#xff1a;Html.AntiForgeryToken() 在Controller->Action动作上&#xff1a;[ValidateAntiForge…

AI复活亲人市场分析:技术、成本与伦理挑战

“起死回生”这种事&#xff0c;过去只存在于科幻电影里&#xff0c;但今年&#xff0c;被“复活”的案例却越来越多。 2月底&#xff0c;知名音乐人包晓柏利用AI“复活”了她的女儿&#xff0c;让她在妈妈生日时唱了一首生日歌&#xff1b;3月初&#xff0c;商汤科技的年会上…

windows 10 安装tcping 使用教程

1 官网下载:tcping下载 2 复制tcping 到win10系统目录C:\Windows\System32 3 tcping 网址测试,可以指定端口 4 tcping 测试端口联通 5 tcping http模式