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 网址。 此功能为初步实验性质的。

具体的实现和更多介绍可参考此仓库：babel-plugin-unpkg

UNPKG 上的发布流程

如果你是 npm 包作者，只要发布到 npm 仓库，unpkg 替你减轻了发布到 CDN 的麻烦。 仅需 npm 包中包含 UMD 构建即可（并非在代码仓库里包含，两者不同！）

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

1. 添加 umd（或 dist） 目录到 .gitignore 文件中
2. 添加 umd 目录到 package.json 文件数组(files)中
3. 发布的时候，使用脚本构建 UMD 打包文件到 umd 目录

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

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