unpkg 是什么

我们在查询 npm 包的时候，经常看见它上面附带一个 unpkg 的地址。

unpkg 是一个具有 npm 所有内容的 CDN 系统，如果我们需要直接在网页引入包，或者要快速查找、下载某个包的代码，都可以在 unpkg 里下载。

比如 https://unpkg.com/react@16.7.0/umd/react.production.min.js

查看某个包的所有版本

unpkg 还有一个非常好用的场景，可以用来查看某个包的所有版本。

通过 https://unpkg.com/react/ 即可查看 react 的所有版本，它会自动跳到最新版的 https://unpkg.com/browse/react@18.2.0/ 地址， browse 就是这个地址正在浏览的意思。

可以直接在 cdn 的 url 加上 /browse/ 路径查看这个库的其他版本。

一个应用场景

最近帮人看了一个 video.js 的问题，有一个 hls 视频，无法通过默认的设置播放，需要引入插件。而示例的 html 文件能够播放，但是在 webpack 项目中始终播不了。

• 引用的地址为： https://unpkg.com/videojs-contrib-hls.js@3.2.0/dist/videojs-contrib-hlsjs.min.js
• webpack 项目中的引用方式为：videojs-contrib-hls

我查了一下 videojs-contrib-hls 这个包，最新版本已经到 5.15.0 了，而通过示例 html 引入的文件， 加上 /browse/ 路径一看，最新版本也就是 3.2.0，才发现原来 videojs-contrib-hls.js 和 videojs-contrib-hls 不是同一个包。