包管理工具

代码共享方案

放到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包的讲解

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

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

相关文章

力扣每日一题61:旋转链表

题目描述: 给你一个链表的头节点 head ,旋转链表,将链表每个节点向右移动 k 个位置。 示例 1: 输入:head [1,2,3,4,5], k 2 输出:[4,5,1,2,3]示例 2: 输入:head [0,1,2], k 4 输…

CSS必学:你需要知道的盒子模型的秘密

作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 👉 WangMin 作为前端开发来说,要掌握的CSS基础一定很多,那么CSS中盒子模型肯定是必考必问必掌握的前端知识点,因为它是CSS基础中非常重要的内容,…

异步编程详解(.NET)

在之前写的一篇关于async和await的前世今生的文章之后,大家似乎在async和await提高网站处理能力方面还有一些疑问,很多网站本身也做了不少的尝试。今天我们再来回答一下这个问题,同时我会做一个async和await在WinForm中的尝试,并且…

Java SOAP 调用 C# 的WebService

Java SOAP 调用 C# 的WebService,C# 的WebService方法的创建可以参考上一篇文章。IntelliJ IDEA Community Edition 2021.2.3的idea64.exe新建项目,导入需要的jar,代码如下: import org.apache.axis.client.Service; import org.…

循环神经网络(Recurrent Neural Network)

1. 为什么需要循环神经网络 RNN 上图是一幅全连接神经网络图,我们可以看到输入层-隐藏层-输出层,他们每一层之间是相互独立地,(框框里面代表同一层),每一次输入生成一个节点,同一层中每个节点之间又相互独立的话&#…

PKU 概率论+数理统计+建模 期中考复习总结

目录 计算条件概率计算概率(放回与不放回)生成随机数算法Linear Congruential Method判断是否是full period Uniformity (test of frequency)1.Chi-Square testmethodreminderexample 2.Kolmogorov-Sminov testmethodexample Independence (test of auto…

互联网Java工程师面试题·Spring篇·第一弹

目录 1、一般问题 1.1、不同版本的 Spring Framework 有哪些主要功能? 1.2、什么是 Spring Framework? 1.3、列举 Spring Framework 的优点。 1.4、Spring Framework 有哪些不同的功能? 1.5、Spring Framework 中有多少个模块&#xff…

JSX 模板精简原则

学习目标: 使模板中的逻辑跟简洁 实现: 复杂的多分枝的逻辑收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用 实例: // 有一个状态type有1,2,3三种 // 1 展示 h1 // 2 展示 h2…

webpack proxy如何解决跨域?

一、是什么 webpack proxy,即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制) 想要实现代理首先需要一个中间服务器,webpac…

C++左值引用与右值引用

0.类型和值类别的区别? 类型(type)和值类别(value category) 1.类型指的是数据类型,int,char这样的内置类型,类型主要是用来区别它们的字节大小。除了内置类型还有自定义类型&…

【ESP-BOX-LITE】:照片查看器

目录 项目场景: 项目需求描述: 项目技术: 项目成果: 项目总结: 项目视频: 芳香 项目场景: 使用ESP-BOX-LITE实现照片查看器功能,显示多级目录下的图片或文件夹,自…

二进制部署k8s

常见的K8S安装部署方式 ●Minikube Minikube是一个工具,可以在本地快速运行一个单节点微型K8S,仅用于学习、预览K8S的一些特性使用。 部署地址:https://kubernetes.io/docs/setup/minikube ●Kubeadm Kubeadm也是一个工具,提供…

vue3中使用vue3-pdf-app和使用浏览器内置的PDF插件浏览器PDF文件

文章目录 先准备一个PDF使用浏览器内置的PDF插件预览PDF在HTML中使用浏览器插件预览PDFVscode使用插件发布服务后直接通过URL地址访问PDF可使用的浏览器 在vue3项目中预览PDF文件vue3项目也是可以通过URL地址访问文件的vue3中使用浏览器内置的PDF插件预览PDF代码如下所示&#…

京东数据分析:2023厨房小电市场遇冷,空气炸锅等明星产品被抛弃

过去几年间,宅经济的爆发带火了酸奶机、煮蛋器、豆浆机、空气炸锅、养生壶等,一众外观小巧、功能丰富、价格相对便宜的厨房小家电。但随着年轻人走出家门回归工作岗位,厨房小家电们却步入了艰难时刻。 如今,厨房小家电们似乎正在经…

blender怎么在一个面上对半切割(不影响别的面)

1进入编辑模式 2.在面选择模式下,选中该物体需要切割成两半的面。 3.按K这个快捷键(切记,必须得用快捷键,不用的话没办法调出第一个绿色切割点),将切割点移动到需要切割的起始边,按住Shift键不放…

第六节:Word中对象的层次结构

《VBA之Word应用》(10178982),是我推出第八套教程,教程是专门讲解VBA在Word中的应用,围绕“面向对象编程”讲解,首先让大家认识Word中VBA的对象,以及对象的属性、方法,然后通过实例让…

[Linux 基础] make、Makefile自动化构建代码工具

文章目录 1、make与Makefile是什么2、为什么要有make与Makefile3、怎么实现一个Makefile文件3.1 如何编写Makefile文件3.1.1 依赖关系3.1.2 依赖方法 3.2 如何清理项目3.2.1 如何编写3.2.2 clean详解 3.3 make的使用3.4 原理3.4.1 查看文件修改时间 1、make与Makefile是什么 m…

为什么索引要用B+树来实现呢,而不是B树

首先,常规的数据库存储引擎,一般都是采用 B 树或者 B树来实现索引的存储。 B树 因为 B 树是一种多路平衡树,用这种存储结构来存储大量数据,它的整个高度会相比二叉树来说,会矮很多。 而对于数据库来说,所有…

Java日志系统之Logback

目录 Logback Logback的简单使用 Logback配置文件 log4j.peoperties转化为logback.xml Logback Logback的性能要比log4j要好。 Logback分为三个模块: logback-core:其他两个模块的基础模块logback-classic:它是log4j的一个改良版本&am…

小白也会的校园网宽带拨号自动重连设置

开始菜单搜索“任务计划程序”:我这个开始菜单和你们的不太一样,用了StartAllBack设置的,总之能找到这个程序就行了 提示:可以按下“Win R”,打开“运行”,输入taskschd.msc来打开任务计划程序 点击“任务…