unpkg简介

前言

---

unpkg是一个前端常用的公共CDN，它通过URL语法完成了别人web界面内才能达到的效果，简洁而优雅，在流行的类库、框架文档中常常能看到它的身影。

unpkg 是什么

---

unpkg是一个内容源自npm的全球快速CDN。

它部署在cloudflare上，在大陆地区访问到的是香港节点。 它支持 h/2 和很多新特性，如果不考虑网络延迟的原因，性能优化较为出色。在国内一些互联网公司也有镜像，例如知乎和饿了么。

它能以快速而简单的方式提供任意包、任意文件，通过类似这样的URL：unpkg.com/:package@:version/:file

怎样使用 unpkg

---

使用固定的版本号：

unpkg.com/[email protected]/umd/react.production.min.js

unpkg.com/[email protected]/umd/react-dom.production.min.js

也可使用语义化版本范围，或标签来代替固定版本号，亦可忽略版本和标签，直接使用最新的版本。

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

unpkg.com/react/umd/react.production.min.js

如果忽略了文件的路径（例如，使用裸网址 “bare” URL），unpkg会提供 package.json里指定的文件，或降级到main。

unpkg.com/d3

unpkg.com/jquery

unpkg.com/three

这种方式会产生一次 302 到最新的文件URL。好处是自动使用最新版，坏处是多一次性跳转，降低了性能。

在网址最后添加斜线，可以查看一个包内的所有文件列表。

unpkg.com/react/

unpkg.com/lodash/

查询参数

---

?meta

以 JSON 格式返回包的元数据（metadata）

(例如： /any/file?meta)

?module

展开 javascript 模块里所有 “bare” import 为 unpkg 网址。

此功能为初步实验性质的。

unpkg上的发布流程

---

如果你是 npm 包作者，只要发布到 npm 仓库，unpkg 替你减轻了发布到CDN的麻烦。

仅需 npm 包中包含UMD构建即可（并非在代码仓库里包含，两者不同！）

简单来讲，通过以下步骤：

添加umd（或 dist） 目录到 .gitignore 文件中

添加umd目录到package.json文件数组(files)中

发布的时候，使用脚本构建 UMD打包文件到umd目录

就是这样了，当npm发布时，在unpkg上也会拥有一个有效的文件版本。

一旦发布到npm后即可被访问到，如果按以上说明操作，将具有更好的效果。建议参考 Vue 的 package.json 帮助理解。