免費 CDN 玩法 —— 文件一鍵上傳到 NPM

前言

unpkg、jsdelivr 等站點可加速 NPM 包文件，適合作為個人網站或演示案例的免費 CDN。

雖然上傳文件到 NPM 很簡單，創建 package.json 然後 npm publish 即可，但之後更新卻很麻煩 —— 即使只更新一個文件，也要發一個新版本的包。由於 URL 包含版本號，因此所有文件的 URL 都會變化，導致無法利用快取。

當然也可以增量發布，每次只發布變化的文件，從而充分利用已有的文件。但這需記錄每個文件的狀態，實現起來較為麻煩。

這裡講解一種更巧妙的方案 —— 使用文件 Hash 作為版本號。

雖然版本號必須是 1.0.0 這種格式，但 semver 規範允許設置 pre-release 後綴，例如 1.0.0-alpha。

因此可以將文件 Hash 作為後綴，並且每個包只有一個文件。文件名固定，例如都使用 index，擴展名保留原始值。例如：

這樣就不用單獨維護每個文件的版本了，所有文件都是 0.0.0 版本！

根據上述思路，編寫相應的腳本 npm-upload.sh。

使用前登陸 NPM。通過 NPM_PKG 環境變數指定包名：

export NPM_PKG=package_name

例如上傳 hello.txt：

echo "Hello World" > hello.txt

~/npm-upload.sh hello.txt

得到結果：

可同時上傳多個文件。例如上傳當前目錄下所有文件：

~/npm-upload.sh $(find * -type f)

得益於 Hash 的優勢，上傳前腳本可檢查該文件是否存在，所以內容相同的文件不會重複上傳。

如何將網站所有 URL 都映射到 unpkg 或 jsdelivr？一個簡單的辦法是用 <base> 重置根路徑。但這隻適用於相對路徑，並且一次只能選擇一個 CDN。

有沒有辦法自動選擇最快的那個 CDN，並且出現問題後無縫切換到另一個？事實上可通過 Service Worker 實現。案例參考：//github.com/EtherDream/freecdn/tree/master/examples/free-host