unpkg 与 npm 的基本介绍

news2024/11/26 0:23:47

目录

定义

特点

原理

使用

npm安装流程

npm install

npm update

registry

区别

总结


定义

UNPKG是一个基于npm registry 的静态资源 CDN 服务,它可以快速获取和使用任何JavaScript包,无需安装任何软件或包。UNPKG可以从NPM仓库中获取任何包,支持直接在浏览器中使用和在Node.js中使用。

特点

  1. 快速:UNPKG使用CDN加速,可以提供更快的包下载速度,尤其是对于全球用户来说。

  2. 零配置:UNPKG不需要任何配置,可以直接在浏览器中使用,非常方便。

  3. 支持npm仓库:UNPKG可以快速从npm仓库获取JavaScript包。

  4. 可以直接在HTML文件中使用:UNPKG可以直接在HTML文件中使用,不需要经过打包处理。

  5. 版本自由:UNPKG支持通过URL查询参数来控制包的版本、文件和格式等。

原理

访问 upkg 地址时,在回源服务里面根据 URL 参数,去 npm registry 下载对应的 npm 包,解压后响应对应的文件内容。

使用

UNPKG的使用非常简单,只需在浏览器中打开UNPKG网站,搜索要使用的包,并复制其链接地址,然后将链接地址添加到项目的HTML文件中即可。例如,对于jQuery 3.6.0,链接地址为:https://unpkg.com/jquery@3.6.0/dist/jquery.min.js。

npm安装流程

NPM(Node Package Manager)——node包管理器。因为有NPM,只需执行一行npm install命令,就能安装别人写好的模块 。

npm install

安装之前npm install会先检查node_modules目录之中是否已经存在指定模块。如果存在,就不再重新安装,即使远程仓库已经有了一个新版本也是如此。如果 npm 要强制重新安装,可以使用 -f 或 --force 参数。

npm install <packageName> --force

npm update

如果想更新已安装模块,就要用到npm update命令。

npm update <packageName>

它会先到远程仓库查询最新版本,然后查询本地版本。如果本地版本不存在,或者远程版本较新,就会安装。

registry

npm update命令怎么知道每个模块的最新版本呢?答案是 npm 模块仓库提供了一个查询服务,叫做 registry。以 npmjs.org 为例,它的查询服务网址是 registry.npmjs.org/ 。这个网址后面跟上模块名,就会得到一个 JSON 对象,里面是该模块所有版本的信息。比如,访问 registry.npmjs.org/react,就会看到 react 模块所有版本的信息。因npm view还有一些别名,所以下面几个命令的效果是一样的。

npm view react
npm info react
npm show react
npm v react

registry 网址的模块名后面,还可以跟上版本号或者标签,用来查询某个具体版本的信息。比如访问 registry.npmjs.org/react/v0.17… ,就可以看到 React 的 0.17.6 版。返回的 JSON 对象里面,有一个dist.tarball 属性,是该版本压缩包的网址。到这个网址下载压缩包,在本地解压,就得到了模块的源码。npm install 和 npm update命令,都是通过这种方式安装模块的。

{
    dist: { 
        shasum: '2a57c2cf8747b483759ad8de0fa47fb0c5cf5c6a', 
        tarball: 'http://registry.npmjs.org/react/-/react-0.17.6.tgz' 
    }
}

将第三方包安装到node_modules后,每个包的package.json文件中通过main字段或moudule字段告知了该包的入口文件。在我们使用import x from xxx语句调用第三方库的方法时,就通过入口文件找到了相应的功能。

区别

【使用时】

  • NPM是安装第三方包到本地使用
  • CDN是通过链接访问,让用户的访问从距离他们最近的站点去获取到这些资源,缩短传输的距离,达到一个轻量、轻快的体验效果,当然网络不好的时候,资源请求会挂掉。

【打包时】

  • 会把NPM依赖的包打到本项目中,占用包的体积
  • CDN通过链接访问,不打到本地,能减少一些包带来巨大的体积

总结

UNPKG的优点是快速、简单和易用,特别适合于快速开发和测试。但是,由于UNPKG不支持版本锁定,可能会出现版本问题,此外,由于UNPKG是一个公共CDN服务,可能存在安全问题。

开发过程中,要根据实际情况有选择的使用两种资源的引入方式,既能使用NPM按需引入的优势,又可以享受CDN的优势。

如果只是按需引入了很少的依赖包也是没有必要用CDN引入的,因为根本问题是依赖包太大才需要用CDN的高带宽去解决。使用NPM安装第三方包,打包项目时会把相应的文件打包到本项目中,理论上使用本地文件肯定比从网络上去请求一个文件要更快一些。如果没有多少资源文件的话,强行并发下载,会产生多线程小文件的I/O瓶颈。

参考文章:

如何看待 unpkg cdn?

使用第三方库时CDN引入和NPM安装有什么区别?

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

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

相关文章

不受环境干扰,这套声学全息方案实现了虚实交互

一谈到全息显示&#xff0c;大家默认想到的就是光学全息方案&#xff0c;比如需要将光投射到某样东西上&#xff0c;比如视网膜&#xff0c;或是烟雾等介质上&#xff0c;才能成像。市面上一些常见的2D、3D全息方案&#xff0c;如全息风扇、Voxon全息系统等等&#xff0c;分别采…

【STM32MP135】修复10.1寸屏显示异色问题,添加极性配置

文件路径&#xff1a;u-boot-stm32mp-v2021.10-stm32mp1-r1/drivers/video/stm32/stm32_ltdc.c

代码随想录算法训练营第17期第14天 | 理论基础 、递归遍历、迭代遍历、统一迭代

理论基础 种类 满二叉树、完全二叉树、二叉搜索树 满二叉树 如果一颗二叉树只有度为0的节点和度为2的节点&#xff0c;并且度为0的节点都在同一层 完全二叉树 在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并…

Android Java代码与JNI交互 引用类型转换(五)

🔥 Android Studio 版本 🔥 🔥 Java中基础数据类型对应Native的数据类型 🔥 * Java中基础数据类型对应Native中的数据类型* |Java |Native |* |boolean |jboolean |* |byte |jbyte |* |short |jshort |* |int |jint |* |long…

c++编写消消乐游戏

#include <SFML/Graphics.hpp> #include <SFML/Audio.hpp> #include <time.h> using namespace sf;#define GAME_ROWS_COUNT 8 #define GAME_COLS_COUNT 8int ts 57; // 每一个游戏小方块区域的大小bool isMoving false; bool isSwap false;// 相邻位置…

springboot基于协同过滤算法商品推荐系统

开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器&…

MybatisPlus中的save方法和insert方法区别

insert方法时直接插入一条数据&#xff0c;需要手动设置每个字段的值&#xff0c;例如&#xff1a; save方法首先会先判断该数据是否已经存在于数据库中&#xff0c;如果存在则更新数据&#xff0c;如果不存在则插入数据。使用save方法时&#xff0c;需要先设置主键值&#xff…

41.RocketMQ之高频面试题大全

消息重复消费 影响消息正常发送和消费的重要原因是网络的不确定性。 引起重复消费的原因 ACK 正常情况下在consumer真正消费完消息后应该发送ack&#xff0c;通知broker该消息已正常消费&#xff0c;从queue中剔除。当ack因为网络原因无法发送到broker&#xff0c;broker会认为…

【单片机】msp430f5529 万年历,数字时钟,矩阵键盘修改时间,7针OLED显示,内部温度读取

文章目录 功能实物图原理图一些程序片段矩阵键盘内部温度读取将年月日转为星期 功能 1 显示万年历&#xff0c;利用内部RTC模块 2 按键修改时间 3 显示芯片内部的温度数值 实物图 原理图 一些程序片段 矩阵键盘 https://qq742971636.blog.csdn.net/article/details/1316505…

Vue3 + TS + Element-Plus 封装Tree组件 《亲测可用》

前期回顾 Vite Vue3 Ts 《企业级项目》二次封装 el-table、el-pagination、el-tooltip、el-dialog_vue后台管理系统需要二次封装的组件有哪些_彩色之外的博客-CSDN博客封装的功能有哪些&#xff1f;分页、表格排序、文字居中、溢出隐藏、操作列、开关、宽、最小宽、type类型…

【Vue H5项目实战】从0到1的自助点餐系统—— 搭建脚手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)

前言 H5 项目基于 Web 技术&#xff0c;可以在智能手机、平板电脑等移动设备上的浏览器中运行&#xff0c;无需下载和安装任何应用程序&#xff0c;且H5 项目的代码和资源可以集中在服务器端进行管理&#xff0c;只需更新服务器上的代码&#xff0c;即可让所有顾客访问到最新的…

6.2Java EE——Spring的入门程序

下面通过一个简单的入门程序演示Spring框架的使用&#xff0c;要求在控制台打印“张三&#xff0c;欢迎来到Spring”&#xff0c;实现步骤具体如下。 1、在IDEA中创建名称为chapter06的Maven项目&#xff0c;然后在pom.xml文件中加载需使用到的Spring四个基础包以及Spring依赖…

【域渗透篇】渗透域环境下的windows7与2008-r2

目录 前言 域环境搭建测试 主机发现&&端口服务扫描&&漏洞脚本扫描 主机发现 全端口扫描 漏洞脚本扫描 永恒之蓝获取shell 主机信息收集 查看当前所在域及当前域用户 找到域控制器 收集域成员的IP msf后渗透阶段 Hashdump获取本地密码信息 破解ha…

cesium学习文档

文章目录 1. 简易的cesium安装依赖修改 vite.config.js申请token创建简单的cesium 2. 修改查看器3. 修改摄像头4. 设置纽约城市模型5. 划分城市区域并且着色6. 地图标记显示7. 实现无人机巡城 1. 简易的cesium 安装依赖 yarn add -D cesium vite vite-plugin-cesium修改 vite…

Openlayers实战:小物块运动轨迹动画

Openlayers地图在做轨迹的时候,除了标注各个位置点,连线,还经常会用到轨迹动画。 本实战就是这样示例,一个物块在轨迹上移动。其实质是用setInterval,每个一小段时间,重新计算定位一下小物块位置,整体串起来就是在移动。 效果图 源代码 /* * @Author: 大剑师兰特(xia…

TextMining Day3 基于信息抽取的文本挖掘

TextMining Day3 基于信息抽取的文本挖掘 1. 简介2. 背景:文本挖掘与信息提取3. 数据挖掘与信息提取相结合3.1 DISCOTEX系统3.2 评价 4. 使用挖掘规则改进IE4.1 算法4.2 评价 7. 结论 1. 简介 图1:基于IE&#xff08;信息抽取&#xff09;的文本挖掘框架概述 本文报告了计算机…

stm32 使用CubeIDE 移植RTX5

STM32 使用st的官方开发环境 cubeide &#xff08;eclipse gcc&#xff09;移植 cmsis rtos2 RTX5 实时操作系统 这套环境的主要优势是免费。cubeide免费使用。RTX5 免商业版税&#xff08;已从原keil中剥离出来&#xff0c;现在完全开源免费&#xff09;。 一&#xff0c;环…

微软开源社区上线,能够给微软Win95等“上古系统”打补丁

日前一个基于社区的项目“Windows Update Restored”上线&#xff0c;据了解该项目的目的是为老系统重新提供对Windows Update的支持&#xff0c;可为 Windows 95 / NT 4.0/98(包括 SE)/ME/ 2000 SP2 等“上古时期”的微软操作系统提供升级补丁、修复 bug 或安全漏洞。 据悉&a…

Python+Requests+Excel接口测试实战

1、EXCEL文件接口保存方式&#xff0c;如图。 2、然后就是读取EXCEL文件中的数据方法&#xff0c;如下&#xff1a; 1 import xlrd2 3 4 class readExcel(object):5 def __init__(self, path):6 self.path path7 8 property9 def getSheet(self): 10 …

设计模式【创建型】-- 原型模式

原型模式&#xff08;Prototype&#xff09; 原型模式是指原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。调用者不需要知道任何创建细节&#xff0c;不调用构造函数 主要应用&#xff1a; 浅拷贝深拷贝 原型模式&#xff1a; 抽象原型类&#xf…