当前位置: 首页 > news >正文

包管理工具

代码共享方案

放到npm仓库,下载到本地放到node_modules

npm配置文件

必须填写的属性:name、version
name是项目的名称;
version是当前项目的版本号;
description是描述信息,很多时候是作为项目的基本描述;
author是作者相关信息(发布时用到);
license,是开源协议(发布时用到);
private属性记录当前的项目是否是私有的;当值为true时,npm是不能发布它的,这是防止私有项目或模块发布出去的方式;

配置文件获得方式
  • npm init
  • cli脚手架生成
常见属性:
必须填写的属性:name、version

name是项目的名称;
version是当前项目的版本号;
description是描述信息,很多时候是作为项目的基本描述;
author是作者相关信息(发布时用到);
license是开源协议(发布时用到);

private属性:

private属性记录当前的项目是否是私有的;
当值为true时,npm是不能发布它的,这是防止私有项目或模块发布出去的方式

main属性:

比如我们使用axios模块const axios=require(‘axios’)
如果有main属性,实际上是找到对应的main属性查找文件的;

scripts属性:

scripts属性用于配置一些脚本命令,以键值对的形式存在;口配置后我们可以通过npm run命令的key来执行这个命令;
npm start和npm run start的区别是什么?
它们是等价的:
对于常用的start.、test、stop、restart可以省略掉run直接通过npm starts等方式运行;

dependencies属性

dependencies属性是指定无论开发环境还是生成环境都需要依赖的包:通常是我们项目实际开发用到的一些库模块vue、vuex、ue-router、.react、react–dom、axios等等:与之对应的是devDependencies;

devDependencies属性

一些包在生成环境是不需要的,比如webpack、babel等,这个时候我们会通过npm install webpack-save-dev,将它安装到devDependencies属性中;

peerDependencies属性

还有一种项目依赖关系是对等依赖,也就是你依赖的一个包,它必须是以另外一个宿主包为前提的;
比如element-plus是依赖于vue3的,ant design是依赖于react、react-dom;

项目安装

  1. 项目安装会在当前目录下生成一个node modules文件夹,我们之前讲解require查找顺序时有讲解过这个包在什么情况下被查找;
  2. 局部安装分为开发时依赖和生产时依赖:
#默认安装开发和生产依赖
npm install axios
npm i axios
#开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack -D
#根据package.json中的依赖包
npm install

npm install原理

  1. 执行npm install’它背后帮助我们完成了什么操作?
  2. 我们会发现还有一个称之为package-lock.json的文件,它的作用是什么?
  3. 从npm5开始,npm支持缓存策略(来自yarn的压力),缓存有什么作用呢?
    在这里插入图片描述

yarn

cnpm

npx

npx的作用非常多,但是比较常见的是使用它来调用项目中的某个模块的指令

以webpack为例:

​ 全局安装的是webpack5.1.3
​ 项目安装的是webpack3.6.0

执行webpack --version

显示结果会是webpack5.1.3,事实上使用的是全局的,为什么呢?

原因非常简单,在当前目录下找不到webpack时,就会去全局找,并且执行命令;

执行局部命令

方式一:明确查找到node module下面的webpack
方式二:在scripts定义脚本,来执行webpack;.

./node modules/.bin/webpack --version
"scripts":{
"webpack":"webpack --version"
)
npx webpack --version

npx的原理非常简单,它会到当前目录的node modules/bin目录下查找对应的命令;

以前包管理工具的痛点:

在这里插入图片描述

每一次安装都要安装这些插件,就会造成磁盘很多冗余文件,于是pnpm就诞生了。

pnpm

  1. 快,节省内存
  2. 支持monorepos
OS硬链接和软连接的概念

硬链接(英语:hard link)是电脑文件系统中的多个文件平等地共享同一个文件存储单元
删除一个文件名字后,还可以用其它名字继续访问该文件:

指向的是同一个,修改了a,b也会被影响。

编辑东西在硬链接里面编辑,软连接编辑不了

符号连接(软连接)

符号链接(软链接、Symbolic link)是一类特殊的文件:
其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用

快捷方式:保存一个文件的快捷方式(路径)。不能够通过软连接来编辑。

也是为什么当硬链接删除掉,符号链接没用了!

测试软硬连接

在这里插入图片描述

  1. 文件的拷贝:再在磁盘里面复制一份文件,然后再创建一个硬链接指向磁盘里面的文件。
  2. 文件的硬链接:创建两个方式共享同一个文件 —cmd测试
  3. 创建一个符号连接指向硬链接的地方,不能够通过符号连接,来更改源文件的内容。 — cmd测试
pnpm的工作原理

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

  1. 如果你对同一依赖包使用相同的版本,那么磁盘上只有这个依赖包的一份文件;
  2. 不同的版本,也只会保存不相同的文件
  3. 所有文件都保存在硬盘上的统一的位置
    1. 当安装软件包时,其包含的所有文件都会硬链接到此位置,而不会占用额外的硬盘空间
创建非扁平的node_modules

当使用npm或Yarn安装依赖包时,所有软件包都将被提升到node_modules的根目录下。因为npm觉得,不同包如果依赖的其他包相同的时候,不应该再次创建一个包,因此所有的包都会被提升到同一目录结构当中。

但是pnpm完美解决了这个问题,它虽然是非扁平的结构,但是它并不是生成真正的文件在这里,他是生成一个硬链接指向磁盘中的位置。

pnpm的存储store

pnpm在依赖查找的时候,会先去pnpm store中查找硬链接,pnpm store中是一大堆的hash字符,通过这写hash字符,可以查找到硬链接,再将本项目的node_modules指向这个硬链接。

pnpm store path 查找路径指令

释放pnpm空间

有时候删除了项目,所有的项目都没有依赖到那个包,但是pnpm store里面不会自动删除这个包。如果我们想要释放pnpm的空间,可以使用pnpm store prune这个命令。

总结:

  1. npm
  2. yarn
  3. cnpm
  4. pnpm

参考

codewhy包的讲解

s指向这个硬链接。

pnpm store path 查找路径指令

释放pnpm空间

有时候删除了项目,所有的项目都没有依赖到那个包,但是pnpm store里面不会自动删除这个包。如果我们想要释放pnpm的空间,可以使用pnpm store prune这个命令。

总结:

  1. npm
  2. yarn
  3. cnpm
  4. pnpm

参考

codewhy包的讲解

相关文章:

包管理工具

代码共享方案 放到npm仓库,下载到本地放到node_modules npm配置文件 必须填写的属性:name、version name是项目的名称; version是当前项目的版本号; description是描述信息,很多时候是作为项目的基本描述&#xff1b…...

Qt第六十五章:自定义菜单栏的隐藏、弹出

目录 一、效果图 二、qtDesigner 三、ui文件如下: 四、代码 一、效果图 二、qtDesigner 原理是利用属性动画来控制QFrame的minimumWidth属性。 ①先拖出相应的控件 ②布局一下 ③填上一些样式 相关QSS background-color: rgb(238, 242, 255); border:2px sol…...

element table中嵌套el-select 无法选择问题

<el-table-column align"left" label"姓名" show-overflow-tooltip :key"tableKey"><template slot-scope"scope"><el-select placeholder"请选择" :disabled"!saveButton" v-model"scope.ro…...

2.6.C++项目:网络版五子棋对战之数据管理模块-游戏房间管理模块的设计

文章目录 一、意义二、功能三、作用四、游戏房间类基本框架五、游戏房间管理类基本框架七、游戏房间类代码八、游戏房间管理类代码 一、意义 对匹配成功的玩家创建房间&#xff0c;建立起一个小范围的玩家之间的关联关系&#xff01; 房间里一个玩家产生的动作将会广播给房间里…...

计算机视觉中的数据预处理与模型训练技巧总结

计算机视觉主要问题有图像分类、目标检测和图像分割等。针对图像分类任务&#xff0c;提升准确率的方法路线有两条&#xff0c;一个是模型的修改&#xff0c;另一个是各种数据处理和训练的技巧(tricks)。图像分类中的各种技巧对于目标检测、图像分割等任务也有很好的作用&#…...

GeoHash分享

写在前边 复制的一个内部分享&#xff0c;所以可能更偏向PPT性质&#xff0c;本文提出的问题&#xff0c;在末尾参考材料中都会有所提及&#xff0c;包括更深层次的实现原理和各大API对于GeoHash的优化。感兴趣的读者可以拓展看一下。 START GeoHash是一种地址编码&#xff…...

【超详细】CentOS 7安装MySQL 5.7【安装及密码配置、字符集配置、远程连接配置】

准备工作&#xff1a;CentOS 7系统&#xff0c;并确保可以联通网络 1、获取MySQL 5.7 Community Repository软件包 注意&#xff1a;这里使用的是root用户身份。 wget https://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm2、安装软件包 rpm -ivh mysql5…...

Elasticsearch 8.X 分词插件版本更新不及时解决方案

1、关于 Elasticsearch 8.X IK 分词插件相关问题 球友在 ElasticSearch 版本选型问题中提及&#xff1a;如果要使用ik插件&#xff0c;是不是就使用目前最新的IK对应elasticsearch的版本“8.8.2”&#xff1f; https://github.com/medcl/elasticsearch-analysis-ik/releases/ta…...

Delete `␍`eslintprettier/prettier

将CRLF改为LF 然后就消失了 除此之外,也可以修改git全局配置 git config --global core.autocrlf false...

4种实用的制作URL 文件的方法

很多小伙伴有自己的博客、淘宝或者共享文件网站&#xff0c;想要分享、推广自己的网址做成url文件&#xff0c;让别人点击这个url文件直接访问自己的网站。URL文件其实就一个超级链接&#xff0c;制作的方法很多&#xff0c;这里列举4种。 收藏网站直接拖拽 1.第一种&#xf…...

css总结

记录做项目经常会写到的css 1、左边导航栏固定&#xff0c;右边div占满剩余宽度 <template><div class"entrance"><div class"left"></div><div class"right"><div class"content"></div>…...

[C语言]排序的大乱炖——喵喵的成长记

宝子&#xff0c;你不点个赞吗&#xff1f;不评个论吗&#xff1f;不收个藏吗&#xff1f; 最后的最后&#xff0c;关注我&#xff0c;关注我&#xff0c;关注我&#xff0c;你会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的很重要…...

Docker 网络与Cgroup资源限制

目录 一、Docker 网络实现原理&#xff1a; 二、Docker 的网络模式&#xff1a; 三、网络模式详解&#xff1a; 1. host模式&#xff1a; 2. container模式&#xff1a; 3. none模式: 4&#xff0e;bridge模式: 5&#xff0e;自定义网络: 四、Cgroup资源控制&#xff1a; …...

D - United We Stand

思路&#xff1a; &#xff08;1&#xff09;题目要求将集合A划分为B&#xff0c;C两组&#xff0c;使得C中任意数都不是B中的除数 &#xff08;2&#xff09;直观感受&#xff0c;只要让C中数比B中大&#xff0c;则满足条件&#xff0c;不妨只取最大的放入C中&#xff1b; …...

【1.总纲】

目录 知识框架No.0 总纲安排No.1课程安排一、目标二、内容三、 学到 No.2 深度学习介绍一、AI地图二、图片分类三、物体检测和分割四、样式迁移五、人脸合成六、文字生成图片七、文字生成-GPT八、无人驾驶九、广告点击 No.3 安装No.3 安装 知识框架 No.0 总纲安排 B站网址&…...

I/O模型之非阻塞IO

简介 五种IO模型   阻塞IO   非阻塞IO   信号驱动IO   IO多路转接    异步IO 代码书写 非阻塞IO 再次理解IO 什么是IO&#xff1f;什么是高效的IO&#xff1f; 为了理解后面的一个问题&#xff0c;我们首先要再重新理解一下什么是IO 在之前的网络介绍中&#xff…...

2023版 STM32实战11 SPI总线读写W25Q

SPI全称 英文全称&#xff1a;Serial peripheral Interface 串行外设接口 SPI特点 -1- 串行(逐bit传输) -2- 同步(共用时钟线) -3- 全双工(收发可同时进行) -4- 通信只能由主机发起(一主,多从机) 开发使用习惯和理解 -1- CS片选一般配置为软件控制 -2- 片选低电平有效,从…...

Spring Security认证源码解析(示意图)

建议先看完Spring Security总体架构介绍和Spring Security认证架构介绍&#xff0c;然后从FilterChainProxy的doFilterInternal函数开始&#xff0c;配合文章进行debug以理解Spring Security认证源码的执行流程。 在之前的Spring Security认证架构介绍中&#xff0c;我们已经知…...

2023.10.22 关于 定时器(Timer) 详解

目录 引言 标准库定时器使用 自己实现定时器的代码 模拟实现的两大方面 核心思路 重点理解 自己实现的定时器代码最终代码版本 引言 定时器用于在 预定的时间间隔之后 执行特定的任务或操作 实例理解&#xff1a; 在服务器开发中&#xff0c;客户端向服务器发送请求&#…...

【STM32】GPIO控制LED(寄存器版)

在开始之前记得先准备好环境&#xff1a; STM32F103核心板下载教程.pdf 林何/STM32F103C8 - 码云 - 开源中国 (gitee.com) 一、STM32的GPIO模块数据手册详解 每个GPIO端口对应16个引脚&#xff0c;例GPIOA&#xff08;PA0~PA15&#xff09;内核cpu就可以通过APB2总线对寄存器…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...