前言

unpkg是一個(gè)前端常用的公共CDN，它通過URL語(yǔ)法完成了別人web界面內(nèi)才能達(dá)到的效果，簡(jiǎn)潔而優(yōu)雅，在流行的類庫(kù)、框架文檔中常常能看到它的身影。

unpkg 是什么

unpkg是一個(gè)內(nèi)容源自npm的全球快速CDN。

它部署在cloudflare上，在大陸地區(qū)訪問到的是香港節(jié)點(diǎn)。 它支持 h/2 和很多新特性，如果不考慮網(wǎng)絡(luò)延遲的原因，性能優(yōu)化較為出色。在國(guó)內(nèi)一些互聯(lián)網(wǎng)公司也有鏡像，例如知乎和餓了么。

它能以快速而簡(jiǎn)單的方式提供任意包、任意文件，通過類似這樣的URL：unpkg.com/:package@:version/:file

怎樣使用 unpkg

使用固定的版本號(hào)：

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

unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js

也可使用語(yǔ)義化版本范圍，或標(biāo)簽來代替固定版本號(hào)，亦可忽略版本和標(biāo)簽，直接使用最新的版本。

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

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

如果忽略了文件的路徑（例如，使用裸網(wǎng)址 “bare” URL），unpkg會(huì)提供 package.json里指定的文件，或降級(jí)到main。

unpkg.com/d3

unpkg.com/jquery

unpkg.com/three

這種方式會(huì)產(chǎn)生一次 302 到最新的文件URL。好處是自動(dòng)使用最新版，壞處是多一次性跳轉(zhuǎn)，降低了性能。

在網(wǎng)址最后添加斜線，可以查看一個(gè)包內(nèi)的所有文件列表。

unpkg.com/react/

unpkg.com/lodash/

查詢參數(shù)

?meta

以 JSON 格式返回包的元數(shù)據(jù)（metadata）

(例如： /any/file?meta)

?module

展開 javascript 模塊里所有?“bare” import?為 unpkg 網(wǎng)址。

此功能為初步實(shí)驗(yàn)性質(zhì)的。

unpkg上的發(fā)布流程

如果你是 npm 包作者，只要發(fā)布到 npm 倉(cāng)庫(kù)，unpkg 替你減輕了發(fā)布到CDN的麻煩。

僅需 npm 包中包含UMD構(gòu)建即可（并非在代碼倉(cāng)庫(kù)里包含，兩者不同?。?/p>

簡(jiǎn)單來講，通過以下步驟：

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

添加umd目錄到package.json文件數(shù)組(files)中

發(fā)布的時(shí)候，使用腳本構(gòu)建 UMD打包文件到umd目錄

就是這樣了，當(dāng)npm發(fā)布時(shí)，在unpkg上也會(huì)擁有一個(gè)有效的文件版本。

一旦發(fā)布到npm后即可被訪問到，如果按以上說明操作，將具有更好的效果。建議參考 Vue 的?package.json?幫助理解。