聊一聊一些关于npm、pnpm、yarn的事

前言

整理了最近的闲聊,话题是前端各个包管理器,如果分享的不对或者有异议的地方,麻烦请及时告诉我~

耐心看完,也许你会有所收获~

概述

本文阅读时间:10-15分钟左右

难度:初级,最好对Node有一个基础认知

通过本文,你能大致知道

  • npm,pnpm,yarn这些包管理工具的介绍及一些常用命令;
  • nrm;

包管理器

再说npm之前,相信你一定知道node了吧~npm是node自带的包管理器,也就是说如果安装了node,那么你本地就一定会被一起安装npm,接下来我们再来聊聊npm;

npm是node的一个 包管理器,这里就出现了一个名词“包管理器”,管理器我们能理解,那么包是什么?直接看一个图吧,以Vue为例:

现代化脚手架搭建的项目往往在根目录存在这么一个文件夹,node_modules,这个文件夹就是我们存储包的地方,当我们的项目从npm上下载了一些插件、组件,工具库等,最终都会以包的形式存在于这个node_modules里,举个例子吧,比如,我们通过安装命令:

npm install typescript

安装了typescript,那么在node_modules里,一定会存在和typescript相关的包,如下图:

到这里,相信你对“包管理工器”这个名词有一定的了解了,那么接下来我们聊聊这几个不同的包管理工具

npm和cnpm

好了,知道了“包管理器”我们就好聊这几款不同的包管理工具了,首先是绝对的元老,npm,即 node package manager,npm是node自带的,也是最初的包管理器,当然,由于是node自带的,因此对node的兼容性毫无疑问是最好的;

npm在通过命令安装包的时候,会将包单独的下载进项目的node_modules,假如有两个项目都用到了typescript的1.0.0版本,那么这两个项目下都会各自有完整的typescript@1.0.0包,好处是互不影响,坏处是当项目多了之后浪费存储空间;

当然,国内由于众所周知的原因,npm在国内使用很麻烦,安装包的时候,能不能安装,安装速度完全看网络环境和天意,为此,阿里巴巴为国内的开发者推出了“淘宝镜像”,也就是cnpm。

cnpm本质上就是npm,cnpm是一个完整 npmjs.org 镜像,同步频率目前为 10分钟;

值得注意的是,很多npm的缺点都是指的以前的npm,但随着时间的流程,npm也在更新迭代,比如2015年发布的v3版本,在这个版本中引入了扁平化依赖和并行安装的能力,这使得npm和yarn等工具的差异性进一步缩小,更不用说后面的V5版本了,V5版本修改了几乎所有的常见问题,显著的从架构上改善了其性能,使其更稳定,更好的容错性

常用命令

// 初始化npm
npm init

这个命令会在当前目录下初始化一个package.json的文件,这个文件是记录所有包的地方,想项目被别的用户/成员进行下载安装的时候,npm就是根据这个文件记录的包进行逐一下载的;

// 正常下载
npm install 包名	// 比如 npm install typescript

// 简写
npm i 包名
// 安装指定版本1.0.0
npm i 包名@1.0.0

// 安装到正式环境
npm i 包名 -S
// 等同于
npm i 包名 --save

// 安装到开发环境
npm i 包名 -D
// 等同于
npm i 包名 --save-dev

// 卸载
npm uninstall 包名

// 查看npm版本
npm -v

安装包的过程就是把包以及包相关的代码,从npm库里下载到本地的过程,下载安装的位置就是node_modules;卸载后,包相关文件会被删除,并且该记录会被从package.json中移除;

yarn

yarn是facebook发布的一款包管理工具,其目的是为了解决一些npm上存在的问题,比如,最开始的时候npm没有package-lock.json这个锁版本的功能,这个是由yarn推出的,后续被npm借鉴吸纳;

和npm相比,yarn在以下几个地方有了明显的改进:

  1. 执行效率,npm是按包顺序执行下载,而yarn则是多任务同时进行,这就带来了一个质变,在没有任何包缓存的情况下,yarn的速度是远远超过npm的,虽然npm在V3版本之后引入了并行能力,但还是yarn更快一点;
  2. 安装版本统一,具有确定性,由于lock文件的存在,不同机器安装项目的时候可以确定下载的包是同一个,当然现在npm也具有这个功能了;
  3. 安装机制更合理一些,如遇到网络等问题,单个包的安装请求失败并不会导致整个项目的安装失败;

其实发展到今天随着npm v5的发布,个人体感yarn和npm有差异,但差异没那么明显;

常用命令

// 查看版本
yarn -v

// 安装包
yarn add 包名
// 安装指定版本1.0.0
yarn add 包名@1.0.0

// 安装到测试环境
yarn add 包名 --dev

// 卸载包
yarn remove 包名

pnpm

pnpm和npm/yarn就有点不同了,官网的意思是:比npm,更快,更省空间的包管理工具,原文如下:

使用 npm 时,依赖每次被不同的项目使用,都会重复安装一次。 而在使用 pnpm 时,依赖会被存储在内容可寻址的存储中,所以:

  1. 如果你用到了某依赖项的不同版本,只会将不同版本间有差异的文件添加到仓库。 例如,如果某个包有100个文件,而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件,而不会因为仅仅一个文件的改变复制整新版本包的内容。
  2. 所有文件都会存储在硬盘上的某一位置。 当软件包被被安装时,包里的文件会硬链接到这一位置,而不会占用额外的磁盘空间。 这允许你跨项目地共享同一版本的依赖。

因此,您在磁盘上节省了大量空间,这与项目和依赖项的数量成正比,并且安装速度要快得多!

并且不止如此,pnpm安装创建的node_modules并非npm那种扁平化的目录结构,而是嵌套的

这有什么好处?最明显的好处就是 非扁平化的结构极大的减少了包冲突以及包被覆盖的风险

常用命令

// 安装pnpm
npm install -g pnpm

// 正常下载
pnpm install 包名	// 比如 npm install typescript

// 简写
pnpm i 包名
// 安装指定版本1.0.0
pnpm i 包名@1.0.0

// 安装到正式环境
pnpm i 包名 -S
// 等同于
pnpm i 包名 --save

// 安装到开发环境
pnpm i 包名 -D
// 等同于
pnpm i 包名 --save-dev

// 卸载
pnpm uninstall 包名

// 查看npm版本
pnpm -v

nrm

nrm是一块源管理工具,通过nrm可以快速的管理各个包管理工具的源,如下图

安装nrm

npm i -g nrm // 全局安装

使用nrm修改源为淘宝源

nrm use taobao

扩展知识-版本号说明

通常我们在package.json中看到的包的记录是这个样子的

"dependencies": {
    "lodash": "^4.17.21",
    "pinia": "^2.0.36",
    "uview-plus": "^3.1.36",
    "vue": "^3.2.45",
    "vue-i18n": "^9.1.9",
  },

以lodash为例

"lodash": "^4.17.21"

可以看到这是一组键值对,其中

  • lodash,代表着包的名字,这个包就叫做lodash;
  • ^4.17.21,这个串代表着lodash的版本号,我们通过版本号来区分不同的版本,版本号不是随便起的,我们通常约定如下:主版本号 . 子版本号 [. 修正版本号[ build- 编译版本号 ]]

如果有兴趣的小伙伴可以看我的这两篇博文,有详细解释:

package.json版本说明及各类版本符号详解(一)

package.json必须掌握的字段知识(二)

小结

其实发展到今天,个人体感没有说哪个包管理工具就一定好,再好也只是一个协助我们开发的工具,哪个用的顺手,哪个对你而言用的方便就用哪个,没必要纠结到底哪个好,哪个不好!

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

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

相关文章

django celery 异步任务 异步存储

环境:win11、python 3.9.2、django 4.2.11、celery 4.4.7、MySQL 8.1、redis 3.0 背景:基于django框架的大量任务实现,并且需要保存数据库 时间:20240409 说明:异步爬取小说,并将其保存到数据库 1、创建…

MAC(M1芯片)编译Java项目慢且发热严重问题解决方案

目录 一、背景二、排查三、解决四、效果以及结果展示五、总结 一、背景 使用idea编译项目等操作,经常性发热严重,并且时间慢。直到昨天编译一个项目用时30分钟,电脑温度很高,并且有烧灼的味道,于是有了此篇文章。 二、…

【网站项目】新冠疫苗预约小程序

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

AI实时换天解决方案:重塑汽车与旅行拍摄新视界

在汽车拍摄与旅行摄影领域,天空作为画面中的重要元素,往往决定着整体视觉效果的成败。美摄科技作为业界领先的AI视觉技术提供商,近日推出了全新的AI实时换天解决方案,为用户带来了前所未有的创意空间与效率提升。 传统的换天技术…

libVLC 提取视频帧使用QGraphicsView渲染

在前面章节中,我们讲解了如何使用QWidget渲染每一帧视频数据,这种方法对 CPU 负荷较高。 libVLC 提取视频帧使用QWidget渲染-CSDN博客 后面又讲解了使用OpenGL渲染每一帧视频数据,使用 OpenGL去绘制,利用 GPU 减轻 CPU 计算负荷…

骑砍2霸主MOD开发(2)-基础开发环境搭建

一.骑砍2霸主程序架构 二.骑砍2霸主C#接口层代码查看 1.C#反编译工具dnspy下载: 2.骑砍2霸主游戏引擎接口查看: 例如IMBAgent interface接口: #调用TaleWorlds.Native.dll中的函数 [EngineMethod("get_movement_flags", false)] uint GetMovementFlags(UIntPtr agen…

【面试精讲】MyBatis设计模式及源码分析,MyBatis设计模式实现原理

【面试精讲】MyBatis设计模式及源码分析,MyBatis设计模式实现原理 目录 本文导读 一、MyBatis中运用的设计模式详解 1. 工厂模式(Factory Pattern) 2. 单例模式(Singleton Pattern) 3. 建造者模式(Bu…

Java常见算法_常见的查找算法和排序算法——简介及代码演示

在本文中我将介绍Java中的常见算法,查找算法包括基本查找、二分查找、插值查找和分块查找。排序算法包括冒泡排序、选择排序、插入排序和快速排序 查找算法: 1.基本查找: 代码: public class BasicSearchDemo {public static …

电商技术揭秘十五:数据挖掘与用户行为分析

相关系列文章 电商技术揭秘一:电商架构设计与核心技术 电商技术揭秘二:电商平台推荐系统的实现与优化 电商技术揭秘三:电商平台的支付与结算系统 电商技术揭秘四:电商平台的物流管理系统 电商技术揭秘五:电商平台…

Harmony鸿蒙南向驱动开发-ADC

ADC(Analog to Digital Converter),即模拟-数字转换器,可将模拟信号转换成对应的数字信号,便于存储与计算等操作。除电源线和地线之外,ADC只需要1根线与被测量的设备进行连接,其物理连线如图1所…

《前端面试题》- JS基础 - call()、apply()、bind() 的区别

call 、bind 、 apply 这三个函数的功能都是改变this的指向问题,但是也存在一定的区别。 call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,apply 的所有参数都必须放在一个数组里面传进去bind 除了返回是函数以外,它 的参数和…

Idea中 maven 下载jar出现证书问题

目录 1: 具体错误: 2: 忽略证书代码: 3: 关闭所有idea, 清除缓存, 在下面添加如上忽略证书代码 4:执行 maven clean 然后刷刷新依赖 完成,撒花!&#x…

DRF的认证、权限、限流、序列化、反序列化

DRF的认证、权限、限流、序列化、反序列化 一、认证 1、直接用,用户授权 实现方法 编写 ->认证组件 应用组件 编写 ->认证组件 from rest_framework.authentication import BaseAuthentication from rest_framework.exceptions import AuthenticationF…

基于遗传模拟退火混合优化算法的车间作业最优调度matlab仿真,输出甘特图

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1遗传算法与模拟退火算法简介 4.2 GSAHO算法应用于JSSP 5.完整程序 1.程序功能描述 车间作业调度问题(Job Shop Scheduling Problem, JSSP)是一种典型的生产调度问…

数据仓库的概念和作用?如何搭建数据仓库?

随着企业规模的扩大和数据量的爆炸性增长,有效管理和分析海量数据成为企业数字化转型的关键。而在互联网的普及过程中,信息技术已深入渗透各行业,逐渐融入企业的日常运营。然而,企业在信息化建设中面临了一系列困境和挑战&#xf…

登录压力测试

目录 一、准备测试数据 1.1数据库存储过程添加数据 1.2导出为csv作为测试数据(账号、密码) 二、使用fiddler抓包查看接口 2.1.抓到相关接口信息 2.2添加线程组和http请求 2.3将前面接口需要的参数去json格式化 ​2.4填写相关信息 ​ 2.5添加http…

gpt科普1 GPT与搜索引擎的对比

GPT(Generative Pre-trained Transformer)是一种基于Transformer架构的自然语言处理模型。它通过大规模的无监督学习来预训练模型,在完成这个阶段后,可以用于各种NLP任务,如文本生成、机器翻译、文本分类等。 以下是关…

【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原

前言 webpack是一个JavaScript应用程序的静态资源打包器。它构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。大部分Vue等项目应用会使用webpack进行打包,使用webpack打包应用程序会在网站js…

集成 LlamaIndex 和 Qdrant 相似性搜索以进行患者记录检索

介绍 由于医疗技术、数字健康记录(EHR)和可穿戴健康设备的进步,医疗领域目前正在经历数据的显着激增。有效管理和分析这些复杂多样的数据的能力对于提供定制医疗保健、推进医学研究和改善患者健康结果至关重要。矢量数据库是专门为高效处理和存储多维数据而定制的,作为一系…

image with CV

""" 视觉:基本API应用(OPENCV) """ import cv2 import numpy as np"""图像读取方式3. 1.cv2.imread(filename or path, flags)flags0:灰度图像;flags1表示RGB图像;fl…