npm、yarn、pnpm

一、简介

CommonJS 的出现,使 node 环境下的 JS 代码可以用模块更加细粒度的划分。一个类、一个函数、一个对象、一个配置等等均可以作为模块,这种细粒度的划分,是开发大型应用的基石。

为了解决在开发过程中遇到的常见问题,比如加密、提供常见的工具方法、模拟数据等等,一时间,在前端社区涌现了大量的第三方库。这些库使用 CommonJS 标准书写而成,非常容易使用。

这些库通常以NPM包的形式提供依赖,而且在使用时需要进行版本管理。因此需要一个包管理库来统一管理这些依赖库,来避免版本冲突和管理繁琐。

模块(module):通常以单个文件形式存在的功能片段,入口文件通常称之为入口模块或主模块。

库(library,简称lib):以一个或多个模块组成的完整功能块,为开发中某一方面的问题提供完整的解决方案

包(package):包含元数据的库,这些元数据包括:名称、描述、git主页、许可证协议、作者、依赖等等

常用的包管理工具包括:

NPM:NPM(Node Package Manager)是Node.js自带的包管理工具,也是最常用的包管理工具之一。可以方便地安装、升级、卸载依赖包,还可以发布自己的包到NPM仓库。

Yarn:Yarn是Facebook推出的包管理工具,具有速度快、缓存机制好等优点。与NPM相比,Yarn可以更快地下载依赖包,并且支持离线模式。

PNPM:PNPM(Permissive NPM)是一款新兴的包管理工具,采用了类似于软连接的方式,将依赖包安装到每个项目的 node_modules 目录下,从而避免了大量的重复安装。

二、NPM

目前所有的包管理器都是基于 npm 的,npm本身就是一个包管理器。

运行在 node 环境中,让开发者可以用简单的方式完成包的查找、安装、更新、卸载、上传等操作。

npm 由三部分组成:

registry:入口

可以把它想象成一个庞大的数据库

第三方库的开发者,将自己的库按照 npm 的规范,打包上传到数据库中

使用者通过统一的地址下载第三方包

官网:https://www.npmjs.com/

查询包

注册、登录、管理个人信息

CLI:command-line interface 命令行接口

安装好 npm 后,通过 CLI 来使用 npm 的各种功能

  1. 本地安装:使用命令npm install 包名或npm i 包名即可完成本地安装,本地安装的包出现在当前目录下的node_modules目录中。

4.包配置:

(1)配置文件:npm将每个使用npm的工程本身都看作是一个包,包的信息通过一个名称固定的配置文件来描述。

该文件为:package.json。

配置文件中可以描述大量的信息,包括:

name:包的名称,该名称必须是英文单词字符,支持连接符

version:版本

版本规范:主版本号.次版本号.补丁版本号

主版本号:仅当程序发生了重大变化时才会增长,如新增了重要功能、新增了大量的API、技术架构发生了重大变化

次版本号:仅当程序发生了一些小变化时才会增长,如新增了一些小功能、新增了一些辅助型的API

补丁版本号:仅当解决了一些 bug 或 进行了一些局部优化时更新,如修复了某个函数的 bug、提升了某个函数的运行效率

description:包的描述

homepage:官网地址

author:包的作者,必须是有效的 npm 账户名,书写规范是 account ,例如:zhangsan zhangsan@gmail.com,不正确的账号和邮箱可能导致发布包时失败

repository:包的仓储地址,通常指 git 或 svn 的地址,它是一个对象

type:仓储类型,git 或 svn

url:地址

main:包的入口文件,使用包的人默认从该入口文件导入包的内容

keywords: 搜索关键字,发布包后,可以通过该数组中的关键字搜索到包

(2)保存依赖关系

package.json文件最重要的作用,是记录当前工程的依赖

dependencies:生产环境的依赖包

devDependencies:仅开发环境的依赖包

通过这样的方式,移植代码时,只需要移植源代码和package.json文件,不用移植node_modules目录,然后在移植之后通过命令即可重新恢复安装

5.语义版本:

当x.y.z的情况下:表示是一个明确的版本号当^x.y.z的情况下:表示是x版本保持不变,y和z永远是最新的当~x.y.z的情况下:表示的是x和y是保持不变的,z永远是最新的

当希望使用包的人使用指定包和版本时,需要在配置文件中描述具体的依赖规则,通过语义版本来实现,规则如下。

符号 描述 示例 示例描述

大于某个版本 >1.2.1 大于1.2.1版本

= 大于等于某个版本 >=1.2.1 大于等于1.2.1版本

< 小于某个版本 <1.2.1 小于1.2.1版本

<= 小于等于某个版本 <=1.2.1 小于等于1.2.1版本

  • 介于两个版本之间 1.2.1 - 1.4.5 介于1.2.1和1.4.5之间
x 不固定的版本号 1.3.x 只要保证主版本号是1,次版本号是3即可
补丁版本号可增 ~1.3.4 保证主版本号是1,次版本号是3,补丁版本号大于等于4

^ 此版本和补丁版本可增 ^1.3.4 保证主版本号是1,次版本号可以大于等于3,补丁版本号可以大于等于4

  • 最新版本 * 始终安装最新版本

三、Yarn

1.npm存在的问题:

(1)依赖目录嵌套层次深

(2)串行下载,无法完全利用带宽资源,多个相同版本的包被重复下载

(3)控制台输出大量的信息

(4)存在工程移植问题,版本依赖可以是模糊的,可能会导致工程移植后,依赖的确切版本不一致

2.如何解决上述问题:

(1)使用扁平的目录结构

(2)并行下载,使用本地缓存

(3)控制台仅输出关键信息

(4)使用yarn-lock文件记录确切依赖

3.优化:

增加了某些功能强大的命令

让既有的命令更加语义化

本地安装的CLI工具可以使用 yarn 直接启动

将全局安装的目录当作一个普通的工程,生成package.json文件,便于全局安装移植

4.新增了 yarn.lock 文件。

它是 yarn 在安装依赖包时,自动生成的一个文件,作用是记录 yarn 安装的每个 package 的版本,保证"package.json"依赖安装的版本和实际的版本是一致。后来 npm 也新增了作用相同的 package-lock.json

五、pnpm

1.pnpm全称:performant npm ,意味“高性能的npm”

优势:

目前,安装效率高于npm和yarn的最新版

极其简洁的node_modules目录

避免了开发时使用间接依赖的问题

能极大的降低磁盘空间的占用

2.原理

(1)使用缓存来保存已经安装过的包,以及使用 pnpm-lock.yaml 来记录详细的依赖版本

(2)使用符号链接和硬链接(类似于快捷方式)的做法来放置依赖,从而规避了从缓存中拷贝文件的时间,使得安装和卸载的速度更快

(3)由于使用了符号链接和硬链接,pnpm可以规避windows操作系统路径过长的问题,因此,它选择使用树形的依赖结果,有着几乎完美的依赖管理。也因为如此,项目中只能使用直接依赖,而不能使用间接依赖

3.硬链接: 硬连接指通过索引节点来进行连接。

软链接:另外一种连接称之为符号连接(Symbolic Link),也叫软连接。软链接文件有类似于Windows的快捷方式。它实际上是一个特殊的文件。在符号连接中,文件实际上是一个文本文件,其中包含的有另一文件的位置信息。

参考:

https://zhuanlan.zhihu.com/p/542738352

https://blog.csdn.net/qq_43750501/article/details/107523394

https://blog.csdn.net/weixin_42575028/article/details/127349060

http://www.xbhp.cn/news/63448.html

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

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

相关文章

Xcode,swift:Error Domain=kCLErrorDomain Code=1 (null)问题解决

问题描述: iOS开发时,当使用用户的位置权限时,获取用户经纬度报错:Error DomainkCLErrorDomain Code1 "(null)",错误域kCLError域代码1“(null)” 解决方法: 打开模拟机的设置-通用-语言与地区 将地区设置为中国(如果你的开发位置在中国的话) 点击左上方Features,选择…

发光太阳聚光器的蒙特卡洛光线追踪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【大数据】Flink 详解(七):源码篇 Ⅱ

本系列包含&#xff1a; 【大数据】Flink 详解&#xff08;一&#xff09;&#xff1a;基础篇【大数据】Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅰ【大数据】Flink 详解&#xff08;三&#xff09;&#xff1a;核心篇 Ⅱ【大数据】Flink 详解&#xff08;四…

css-pseudo-class锚伪类

CSS 伪类用于向某些选择器添加特殊的效果。 属性描述:active向被激活的元素添加样式。:focus向拥有键盘输入焦点的元素添加样式。:hover当鼠标悬浮在元素上方时&#xff0c;向元素添加样式。:link向未被访问的链接添加样式。:visited向已被访问的链接添加样式。:first-child向…

redis配制redis-static-server

安装Redis,Redis Stack sudo apt install redis-serverhttps://redis.io/docs/getting-started/install-stack/linux/配制远程访问&#xff1a; 1.打开redis的配置文件“redis.conf”。 2.将“bind 127.0.0.1”注释掉。 3.将“protected-mode yes”改成“protected-mode no…

完成Centos上使用SSH公钥进行免密上传文件到gitee的步骤后,测试免密推送到gitee的时候还是需要输入邮箱和密码

如果你已经按照正确的步骤设置了SSH公钥并进行了免密测试&#xff0c;但仍然需要输入邮箱地址和密码才能推送到gitee&#xff0c;那么可能有以下几种原因&#xff1a; 您可能没有使用SSH URL来推送代码。请确保您使用的是SSH URL而不是HTTPS URL来推送代码。您可以使用命令 gi…

安卓手机安装Linux然后在其中安装(jdk,MySQL,git)

安卓手机安装Linux然后在其中安装(jdk&#xff0c;MySQL&#xff0c;git) 一.安卓手机安装Linux 安装termux最新教程_哔哩哔哩_bilibili Linux入门教程__阿伟_的博客-CSDN博客 二.安装jdk Termux手机终端运行java。jdk环境的搭建_哔哩哔哩_bilibili java后端__阿伟_的博客-CSD…

Opencv快速入门教程,Python计算机视觉基础

快速入门 OpenCV 是 Intel 开源计算机视觉库。它由一系列 C 函数和少量 C 类构成&#xff0c; 实现了图像处理和计算机视觉方面的很多通用算法。 OpenCV 拥有包括 300 多个 C 函数的跨平台的中、高层 API。它不依赖于其它的外部库——尽管也 可以使用某些外部库。 OpenCV 对非…

弹窗、抽屉、页面跳转区别 | web交互入门

当用户点击或触发浏览页面的某个操作&#xff0c;有很多web交互方式&#xff0c;可以大致分为弹窗、抽屉、跳转新页面三种web交互方式。虽然这三种web交互方式看起来没什么不同&#xff0c;但实际上弹窗、抽屉、跳转新页面对交互体验有蛮大的影响。 这需要UI\UX设计师针对不同…

Liquid Studio 2023.2 Crack

Liquid Studio 提供了用于XML和JSON开发 的高级工具包以及Web 服务测试、数据映射和数据转换工具。 开发环境包含一整套用于设计 XML 和 JSON 数据结构和模式的工具。这些工具提供编辑、验证和高级转换功能。对于新手或专家来说&#xff0c;直观的界面和全面的功能将帮助您节省…

Nginx全家桶配置详解

源码包安装NGINX A&#xff0c;搭建Web Server&#xff0c;任意HTML页面&#xff0c;其8080端口提供Web访问服务&#xff0c;截图成功访问http(s)&#xff1a;//[Server1]:8080并且回显Web页面。保留Server1&#xff0c;但是不允许直接访问Server 1&#xff0c;再部署1套NGINX …

安卓10创建文件夹失败

最近在做拍照录像功能&#xff0c;已经有了文件读写权限&#xff0c;却发现在9.0手机上正常使用&#xff0c;但是在安卓12系统上根本没有创建文件夹。经过研究发现&#xff0c;创建名称为“DCIM”的文件夹可以&#xff0c;别的又都不行。而且是getExternalStorageDirectory和ge…

学习笔记|计数器|Keil软件中 0xFD问题|I/O口配置|STC32G单片机视频开发教程(冲哥)|第十二集:计数器的作用和意义

文章目录 1.计数器的用途2.计数器的配置官方例程开始Tips&#xff1a;编译时提示错误FILE DOES NOT EXIST&#xff1a; 3.计数器的应用本例完整代码&#xff1a;总结课后练习&#xff1a; 1.计数器的用途 直流有刷的电机,后面两个一正一负的电接上,电机就可以转 到底是转子个…

基于生成对抗网络(GAN)实现时尚图像生成功能--详细教程

介绍 本文将探讨生成对抗网络(GAN)及其时尚图像生成的卓越能力。GAN 彻底改变了生成建模领域,提供了一种通过对抗性学习创建新内容的创新方法。 在本指南中,我们将带您踏上一段迷人的旅程,从 GAN 的基本概念开始,逐步深入研究时尚图像生成的复杂性。通过实践项目和分步…

Mysql高级(进阶)SQL语句

目录 常用查询 按关键字排序 区间判断及查询不重复记录 对结果进行分组 限制结果条目 设置别名&#xff08;alias —— as&#xff09; 通配符 子查询 MySQL视图 NULL 值 连接查询 常用查询 &#xff08;增、删、改、查&#xff09; 对 MySQL 数据库的查询&#xf…

第16节——ref

一、概念 1、出现的原因 在react典型的数据流中&#xff0c;props传递是父子组件交互的唯一方式&#xff1b;通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然&#xff0c;就像react官网所描述的一样&#xff0c;在react典型的数据流之外&#xf…

UNIX网络编程卷一 学习笔记 第三十一章 流

在大多数源自SVR 4的内核中&#xff0c;X/Open传输接口&#xff08;X/Open Transport Interface&#xff0c;XTI&#xff0c;是独立于套接字API的另一个网络编程API&#xff09;和网络协议通常就像终端IO系统那样也使用流系统&#xff08;STREAMS system&#xff09;实现。 我…

Nginx__基础入门篇

目录: Nginx的优势 HTTP协议详解 Nginx部署-Yum Nginx配置文件 Nginx编译参数 Nginx基本配置 Nginx日志Log Nginx WEB模块 Nginx 访问限制 Nginx 访问控制 Nginx的优势 Nginx (engine x) 是一个高性能的HTTP(解决C10k的问题)和反向代理服务器&#xff0c;也是一个IM…

剑指 Offer 17. 打印从1到最大的n位数

剑指 Offer 17. 打印从1到最大的n位数 dfs函数只输出n位数的情况&#xff0c;相比于让一个函数输出1到最大的n位数可以大大简化。 小技巧&#xff1a;控制循环开始的起点。 class Solution {List<Integer> res new ArrayList<>();public int[] printNumbers(in…

leetcode 205. 同构字符串

2023.9.6 本题维护两个映射表map&#xff0c;若发现无法对应则返回false。 代码如下&#xff1a; class Solution { public:bool isIsomorphic(string s, string t) {unordered_map<char,char> m1;unordered_map<char,char> m2;for(int i0; i<s.size(); i){//相…