本文主要介绍的内容是:国外一个比较常用的静态资源库,叫做unpkg。但是这个库在国内的访问速度还是不够快的,所以苏南大叔也并不建议国人使用unpkg。本文仅仅是对unpkg做个介绍说明,并不会深入探讨unpkg深层次的信息。

苏南大叔:国外公共静态资源库 unpkg 如何使用? - unpkg-howto
国外公共静态资源库 unpkg 如何使用?(图3-1)

关于unpkg静态资源库的描述,苏南大叔共列出了下面三个维度,分别是:

unpkg支持的静态资源库都有那些?

常见的静态资源库都是支持的,估计一般来说,大家也不会想出什么新的花样。具体的支持列表,可以点击下面查看:

当然上述位置的列表,并不是完整列表。

苏南大叔:国外公共静态资源库 unpkg 如何使用? - unpkg-stats
国外公共静态资源库 unpkg 如何使用?(图3-2)

unpkg的某个资源某版本下有什么文件?

其实,unpkg除了会自动跳转路由外,还会自动列出所有文件。大家可以查看下面这两个链接感受一下。

苏南大叔:国外公共静态资源库 unpkg 如何使用? - unpkg-list
国外公共静态资源库 unpkg 如何使用?(图3-3)

unpkgurl格式是什么样的?

基本上来说,unpkgurl都是下面的格式的。

http://unpkg.com/<package>@<version>/umd/<file>

但是,unpkg和别的cdn最大的区别就是,其url里面支持个智能路由的概念。大家可以打开f12,看一下下面这个url的跳转过程,可以发现^16的变化路径情况。

http://unpkg.com/react@^16/umd/react.production.min.js

对于国内的相关unpkg镜像,知乎的unpkg也是支持跳转的,但是饿了么的unpkg就似乎很不智能了。但是,这两家也没有开放给大家使用,所以就不用纠结这事儿了。哈哈。

当然,unpkg也支持直接带上包名的情况,例如下面的这个链接地址:

http://unpkg.com/react

如何下载unpkg上的资源

如果你知道具体的链接地址,那么就直接下载好了。不过一般这些项目,都是由很多个文件在一起的。所以,也许,您直接使用bower或者npm下载到你本地文件目录里面,才是更好的选择。

unpkg上的资源,出现了新的umd的概念在里面。这是一个前端模块化的概念,类似以前大家所熟知的amdcmd。不过,鉴于大家也不是各种包文件的作者,目前也不用太理会这些概念。大家可以到下面这个链接,查看下更详细的相关说明:

umd是目前最智能的js打包规范,可以智能适合于各种环境(比如浏览器或者服务器端node)。本文就不对这些打包规范进行叙述,只要记得umd是目前为止,最兼容的js打包格式就可以了。

总结

unpkgcdn静态资源库功能,能做的这么灵活强大,也是没谁了。谁说简单的东西就做不大?unpkg至少是做到了,其官方维护人员仅仅一个人,不得不佩服其成功之处。如果想知道这个unpkg到底是怎么加载的,可以多观察观察相关文件的301跳转情况即可。

后续,苏南大叔也许会再对unpkg做文章描述,请参考下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   unpkg

本站的忠实读者小伙伴,正在阅读下面这些文章: