横向对比 npm、pnpm、tnpm、yarn 优缺点

前端工程化是现代Web开发中不可或缺的一环,它的出现极大地提升了前端开发的效率和质量。

在过去,前端开发依赖于手动管理文件和依赖,这导致了许多问题,如版本冲突依赖混乱构建繁琐等。而今,随着众多前端工程化工具的出现,前端开发的效率得到了大大的提高。

随着前端工程化工具生态的日益繁荣,如何选择这些工具成为作为初学者的我们面对的第一个难题,究竟是应该使用 npm 还是 yarn, 或者说什么场景更适合使用 yarn, 什么场景适合使用 pnpm, 让本就一头雾水的我们更加难以抉择。

本文将介绍四种常见的前端包管理工具,并对比这四种工具的优劣,希望能对你的前端之旅有点小小的启发~

npm

npm (node package manager) 是 Node.js 的官方包管理工具,同时也是 JavaScript 生态系统中最常用的包管理工具之一。

作为 node 的孪生兄弟, 在 node 安装之时,npm 也会一并安装。

与此同时,得益于 npm 繁荣的生态,npm 的功能也非常强大,例如我们熟知的 vue、react、axios 等等,都是以 npm 包的形式在前端工程化项目中引入使用的。

那 npm 这种包管理工具显著的优缺点有哪些呢:

优点

1、默认集成
前文说到,在 node 安装之时,npm 也会一并安装。因此相比于其他 npm 工具来说,npm 作为 Node.js 的默认包管理工具,不需要额外安装和配置,即可直接使用。

2、成熟稳定
作为包管理工具的鼻祖,pnpm、tnpm、yarn 本质是对 npm 的二次封装,它们在底层仍然使用 npm 的包管理机制。

并且随着近年来 npm 的多次升级,之前广受大家吐槽的安装速度慢、安全性不高、性能一般的问题也得到了很大的改善。

缺点

1、安装速度慢
相对于一些竞对工具,如 pnpm 和 yarn ,npm 在下载和安装依赖包时速度较慢,这也是大家早期吐槽最多的点。

但是随着 npm 近年来的不断优化,在 npm 5.x 版本中,“package-lock.json” 的引入使得 npm 在安装依赖时通过生成一个锁定文件,记录了精确的依赖版本和依赖树结构,从而更有效地处理依赖解析和版本管理,减少了重复下载和解析依赖的次数。

2、幽灵依赖
在 npm3.x 版本之前,npm 使用的是嵌套依赖管理方式,即每个包都有其自己的依赖树。这种方式可能导致依赖冗余版本冲突的问题,使得项目变得复杂且难以维护。

为了解决 npm 包依赖冗余版本冲突的问题,从 npm 3.x 版本开始,npm 采用了扁平化的包管理方式。扁平化的管理方式将所有依赖项直接安装在项目的根目录下,避免了嵌套的依赖树。

这样一来,可以更好地处理版本冲突依赖冗余的问题,提高了包的安装速度和可靠性,但随之也带来了幽灵依赖的问题。

所谓幽灵依赖,指的是项目的依赖树中存在一些没有在package.json中明确声明的依赖。这些依赖通常是由其他依赖项间接引入的,而不是直接在项目中声明的,后续文章为大家详细讲解~

yarn

Yarn 是在2016年由 Facebook、Google、Exponent 和 Tilde 联合推出的一个包管理工具。

它的出现主要是为了解决当时 npm 安装速度慢依赖冗余的问题。

优点

为了解决 npm 安装速度慢的问题,yarn 引入了并行下载本地缓存机制,通过同时下载多个包和利用本地缓存,显著提高了安装速度。

其次,通过引入锁定文件 yarn.lock,确保项目依赖版本一致性,避免版本冲突问题。

此外,yarn还增加了安全性的功能,通过引入校验和机制来确保下载的包的完整性和安全性。

yarn的出现弥补了当时 npm 在一些性能和安全方面的缺点,提供了更好的用户体验和性能优化,逐渐赢得了开发者的青睐,并成为JavaScript生态系统中流行的包管理工具之一,尤其在国外,使用 yarn 作为包管理工具的程序员和公司非常多。

缺点

1、幽灵依赖
和 npm 一样的是,yarn 也存在幽灵依赖的问题。这是因为 yarn 在依赖管理方式上采用的也是扁平化的方式。

这种扁平化的方式可以减少依赖冗余版本冲突的问题,提高了安装速度和可靠性,但也带来了幽灵依赖的问题。

pnpm

pnpm 的第一个稳定版本(1.0.0)发布于 2017 年 5 月。

相比于 pnpm 和 yarn 来说,pnpm 的存在可以说是完全避免了幽灵依赖的问题,因此近年来受到了很多前端工程师的追捧。

优点

1、有效的磁盘使用
pnpm 使用了共享的存储策略,来存储所有项目的所有包版本以及每个项目所需的符号链接。

这意味着,如果多个项目依赖于同一个包的同一个版本,pnpm 只会在磁盘上存储一次。

对于 npm 和 yarn ,它们将为每个项目的 node_modules 文件夹分别存储每个依赖包的副本。

1f2ce0d85aeb699efdd85a92a886149.jpg

2、更严格的依赖关系解析
pnpm 不会让包访问那些没有被明确列为其依赖的包。 这使得依赖关系更清晰,也帮助避免了一些难以追踪的问题。

缺点

1、兼容性问题
由于 pnpm 的依赖关系解析方式更严格,某些包可能会在 pnpm 下运行不正常,尽管在 npm 或 yarn 下可以正常运行。

2、手动维护依赖
pnpm 为了避免幽灵依赖的存在,要求所有的依赖都需要在 pakeage.json 文件中显式声明,随着依赖项的增多,package.json 文件的维护难度也会增加。

tnpm

tnpm 是一款由淘宝团队开发和维护的包管理工具,它是针对 npm 的一种替代方案。tnpm 的出现,旨在解决 npm 在中国开发者中的使用体验问题,特别是在网络访问速度和包安装速度方面。

优点

1、更快的下载速度
tnpm 默认使用淘宝镜像源,它是在国内搭建的一个 npm 镜像源。由于连接国内服务器的速度更快,使用淘宝镜像可以加快包的下载速度。

2、并行安装
tnpm 通过并行安装依赖项来提高安装速度。相比 npm 的串行安装,tnpm 可以同时下载和安装多个包,提高了安装的效率。

缺点

1、幽灵依赖
与 npm 类似的是,tnpm 也存在幽灵依赖的问题。

幽灵依赖最大的弊端在于它会使得项目中的依赖项变得不可控,一旦幽灵依赖被删除或更新,可能会影响到项目中功能的正常使用,并且随着依赖项的增多,幽灵依赖出现的概率也会更大。

总结

总的来说,npm、tnpm、pnpm、yarn 这四种包管理器各有优缺点,相比于 pnpm 来说,幽灵依赖确实是 npm、tnpm、yarn 最明显的短板。

但近年来,很多大佬们自己封装的幽灵依赖检测工具一定程度上也能避免幽灵依赖带来的困扰。

就我个人而言,对npm、tnpm、pnpm、yarn没有明显的倾向,只要保证在同一个项目中从始至终使用一种包管理工具就可以啦~

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

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

相关文章

[PyTorch][chapter 54][Variational Auto-Encoder 实战]

前言: 这里主要实现: Variational Autoencoders (VAEs) 变分自动编码器 其训练效果如下 训练的过程中要注意调节forward 中的kle ,调参。 整个工程两个文件: vae.py main.py 目录: vae main 一 vae 文件名: vae…

Java-API简析_java.net.Inet4Address类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/132643590 出自【进步*于辰的博客】 因为我发现目前,我对Java-API的学习意识比较薄弱…

百度百科词条怎么更新?怎么能顺利更新百科词条?

企业和个人百度百科词条的更新对于他们来说都具有重要的意义,具体如下: 对企业来说: 塑造品牌形象:百度百科是一个常被用户信任并参考的知识平台,通过更新企业词条可以提供准确、全面的企业信息,帮助企业塑…

SQL-basics

SQL 一些常用的查询语句用法 SQL 中的聚合函数 SQL 中的子查询 SQL 使用实例 SELECT F_NAME , L_NAME FROM EMPLOYEES WHERE ADDRESS LIKE ‘%Elgin,IL%’; SELECT F_NAME , L_NAME FROM EMPLOYEES WHERE B_DATE LIKE ‘197%’; SELECT * FROM EMPLOYEES WHERE (SALARY BET…

C#获取屏幕缩放比例

现在1920x1080以上分辨率的高分屏电脑渐渐普及了。我们会在Windows的显示设置里看到缩放比例的设置。在Windows桌面客户端的开发中,有时会想要精确计算窗口的面积或位置。然而在默认情况下,无论WinForms的Screen.Bounds.Width属性还是WPF中SystemParamet…

QTday4

实现闹钟功能 1》 头文件 #ifndef BURGER_H #define BURGER_H#include <QWidget> #include <QLabel> #include <QLineEdit> #include <QPushButton> #include <QTextEdit> #include <QTimerEvent> //定时器事件类 #include <QDateTim…

JavaScript基础语法01——初识JavaScript

哈喽&#xff0c;大家好&#xff0c;我是雷工&#xff01; 最近有项目用到KingFusion软件&#xff0c;由于KingFusion是B/S架构的客户端组态软件&#xff0c;因此在学习KingFusion产品时会涉及许多前端的知识。 像JavaScript语言就是需要用的&#xff0c;俗话说&#xff1a;活到…

合宙Air724UG LuatOS-Air LVGL API控件--下拉框 (Dropdown)

下拉框 (Dropdown) 在显示选项过多时&#xff0c;可以通过下拉框收起多余选项。只为用户展示列表中的一项。 示例代码 -- 回调函数 event_handler function(obj, event)if (event lvgl.EVENT_VALUE_CHANGED) thenprint("Option:", lvgl.dropdown_get_symbol(obj)…

类ChatGPT大模型LLaMA及其微调模型

1.LLaMA LLaMA的模型架构:RMSNorm/SwiGLU/RoPE/Transfor mer/1-1.4T tokens 1.1对transformer子层的输入归一化 对每个transformer子层的输入使用RMSNorm进行归一化&#xff0c;计算如下&#xff1a; 1.2使用SwiGLU替换ReLU 【Relu激活函数】Relu(x) max(0,x) 。 【GLU激…

项目:智慧教室(cubemx+webserver)

第一章&#xff1a;需求与配置 一。项目需求 二。实现外设控制 注意&#xff1a; 先配置引脚&#xff0c;再配置外设。否则会出现一些不可预料的问题 1.时钟&#xff0c;串口&#xff0c;灯&#xff0c;蜂鸣器配置 &#xff08;1&#xff09;RCC配置为外部时钟&#xff0c;修…

性能可靠it监控系统,性能监控软件的获得来源有哪些

性能可靠的IT监控系统是企业IT运维的重要保障之一。以下是一个性能可靠的IT监控系统应该具备的特点&#xff1a; 高可用性 高可用性是IT监控系统的一个重要特点&#xff0c;它可以保证系统在24小时不间断监控的同时&#xff0c;保证系统服务的可用性和稳定性。为了实现高可用性…

JVM ZGC垃圾收集器

ZGC垃圾收集器 ZGC&#xff08;“Z”并非什么专业名词的缩写&#xff0c;这款收集器的名字就叫作Z Garbage Collector&#xff09;是一款在JDK 11中新加入的具有实验性质[1]的低延迟垃圾收集器&#xff0c;是由Oracle公司研发的。 ZGC收集器是一款基于Region内存布局的&#…

时间语义与窗口

时间语义 在Flink中&#xff0c;时间语义分为两种 &#xff1a; 处理时间和事件时间。时间语义与窗口函数是密不可分的。以窗口为单位进行某一段时间内指标统计&#xff0c;例如想要统计8点-9点的某个页面的访问量&#xff0c;此时就需要用到了窗口函数&#xff0c;这里的关键…

多目标应用:基于多目标向日葵优化算法(MOSFO)的微电网多目标优化调度MATLAB

一、微网系统运行优化模型 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、多目标向日葵优化算法 多目标向日葵优化算法&#xff08;Multi-objective sunflower optimization&#xff0c;MOS…

kubesphere中部署grafana实现dashboard以PDF方式导出

1&#xff0c;部署grafana-image-renderer 2&#xff0c;部署grafana GF_RENDERING_SERVER_URL http://ip:30323/render #grafana-image-renderer地址 GF_RENDERING_CALLBACK_URL http://ip:32403/ #grafana地址 GF_LOG_FILTERS rend…

【CSS】简记CSS效果:通过transition(动画过渡属性)实现侧边栏目滑入滑出

需求 在资金明细的页面中&#xff0c;点击按钮时筛选区域从左侧滑出&#xff0c;完成筛选点击确认后调用接口完成数据查询&#xff0c;筛选区域滑入左侧&#xff1b; 基于微信小程序页面实现 wxml代码 <view><!-- 操作按钮 --><button type"primary&qu…

docker笔记8:Docker网络

1.是什么 1.1 docker不启动&#xff0c;默认网络情况 ens33 lo virbr0 在CentOS7的安装过程中如果有选择相关虚拟化的的服务安装系统后&#xff0c;启动网卡时会发现有一个以网桥连接的私网地址的virbr0网卡(virbr0网卡&#xff1a;它还有一个固定的默认IP地址192.168.122…

Thymeleaf常见属性

参考文档 thymeleaf 语法——th:text默认值、字符串连接、th:attr、th:href 传参、th:include传参、th:inline 内联、th:each循环、th:with、th:if_猎人在吃肉的博客-CSDN博客 代码演示 Controller public class TestController {AutowiredMenuService menuService;GetMapp…

【洛谷】P3853 路标设置

原题链接&#xff1a;https://www.luogu.com.cn/problem/P3853 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 整体思路&#xff1a;二分答案 由题意知&#xff0c;公路上相邻路标的最大距离定义为该公路的“空旷指数”。在公路上增设一些路标&…

MySQL的备份与恢复以及日志管理

目录 一、数据备份的重要性 二、数据库备份的分类 1、物理备份 2、逻辑备份 &#xff08;1&#xff09;完全备份&#xff1a;每次对数据进行完整的备份 &#xff08;2&#xff09;差异备份&#xff1a;备份自从上次完全备份之后被修改的过文件 &#xff08;3&#xff09…