本文介绍: UNPKG是一个基于npm registry静态资源 CDN 服务,它可以快速获取使用任何JavaScript包,无需安装任何软件或包。UNPKG可以从NPM仓库获取任何包,支持直接在浏览器使用和在Node.js使用。UNPKG的优点是快速简单和易用,特别适合于快速开发测试。但是,由于UNPKG不支持版本锁定可能会出现版本问题,此外,由于UNPKG是一个公共CDN服务可能存在安全问题

目录

定义

特点

原理

使用


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(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语句调用第三方库的方法时,就通过入口文件找到了相应的功能

【使用时】

【打包时】

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

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

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

参考文章

如何看待 unpkg cdn?

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注