使用unpkg來讀取我們的私有庫的包
unpkg 是什麼
unpkg 是一個前端常用的公共 CDN，它通過 URL 語法完成了別人 web 界面內才能達到的效果，簡潔而優雅，在流行的類庫、框架文檔中常常能看到它的身影。
它部署在 cloudflare上，在大陸地區訪問到的是香港節點。 它支持 h/2 和很多新特性，如果不考慮網絡延遲的原因，性能優化較爲出色。在國內一些互聯網公司也有鏡像，例如知乎和餓了麼。
它能以快速而簡單的方式提供任意包、任意文件，通過類似這樣的 URL ：
unpkg.com/:package@:version/:file
怎樣使用 unpkg
unpkg.com/react@^16/umd/react.production.min.js
unpkg.com/d3
例如，我在npm發佈了一個組件react-signature-phone，我可以這樣訪問：
unpkg.com/react-signature-phone：
也可以使用@latest訪問最新版本：
unpkg.com/react-signature-phone@latest
在網址最後添加斜線，可以查看一個包內的所有文件列表:
unpkg.com/react-signature-phone/：
最重要的是我們可以訪問npm上包裏面的html頁面：
以飛冰的區塊@icedesign/empty-content-block爲例；
訪問https://unpkg.com/browse/@icedesign/empty-content-block/,可以看到發佈到npm後的目錄如下：
打開package.json文件，可以發現該區塊發佈的時候會包含如下內容：
"files": [
"src/",
"build/",
"screenshot.png"
],- screenshot.png是該區塊的預覽圖，用於飛冰平臺的圖片預覽
- src是源碼位置
- build是區塊打包之後的靜態頁面和資源
打開build，可以看到打包之後的靜態資源文件列表：
這裏就包含了該頁面的靜態資源，我們就可以通過unpkg來直接運行這個頁面：
- 直接點擊
index.html，unpkg會直接打開文件讀取源碼，然後瀏覽器的路徑是這樣的：https://unpkg.com/browse/@icedesign/[email protected]/build/index.html,刪除路徑中的browse/，就可以直接訪問頁面了。 https://unpkg.com/@icedesign/empty-content-block/build/index.html
unpkg是不能直接讀取私庫的包的，所以我們需要本地架設unpkg服務器；
搭建本地unpkg服務
拉取unpkg源碼
從github上的unpkg中拉取源碼
$ git clone https://github.com/mjackson/unpkg.git# 安裝依賴
$ npm i
or
$ yarn在package.json的script添加start命令：
"scripts": {
"build": "rollup -c",
...
"watch": "rollup -c -w",
"start":"set NODE_ENV=production&&node server.js"
},執行編譯命令：
$ npm run build命令運行完後會在根目錄生成server.js文件；
啓動服務：
$ npm run start可以看到服務啓動了：
測試一下是否有效：
打開http://localhost:8080/可以看到我們的自己搭建的unpkg：
訪問@icedesign/empty-content-block測試一下：
http://localhost:8080/browse/@icedesign/[email protected]/：
我們自己搭建的unpkg已經可以正常的使用了，但是目前我們私庫的npm包還是不能訪問，記下來就是添加私庫支持了；
unpkg添加私庫支持
根目錄新建npmConfig.js來存放私庫包的命名空間：
//存放私庫包的命名空間
export const scopes = [
'@xianzou','@lijq'
];
/****
* 私庫地址，代理端口會解析url的端口號
* const privateNpmRegistryURLArr = privateNpmRegistryURL.split(":");
* const privateNpmPort = privateNpmRegistryURLArr[privateNpmRegistryURLArr.length - 1]
* 拉取一些npm的包會返回302的情況，unpkg暫時沒有處理，會不會和本地的npm源有關？
***/
export const privateNpmRegistryURL = 'http://192.168.0.77:7788';
//互聯網npm地址
export const publicNpmRegistryURL = 'http://registry.npmjs.org';
export default scopes;接下來就是修改修改modules/utils/npm.js文件了，思路大概如下：
- 私庫地址爲http，需要修改https爲http；
- 設置我們私庫的端口；
- 根據npmConfig.js中的scopes去匹配unpkg請求的包，如果是私庫的包，就走內網的npm源，如果沒有匹配到，就走互聯網npm地址；
預覽npm.js源碼
修改npm.js完畢之後，執行npm run build重新生成server.js文件，然後啓動服務：npm run start；
測試讀取我們的私庫包：
http://localhost:8080/私庫包
私庫包讀取正常，再來測試一下npm包：
http://localhost:8080/@icedesign/[email protected]/build/index.html
現在私庫和公網npm都可以正常預覽了；
存在問題：
- 解析包出現302問題；
npm.js中的fetchPackageInfo方法只處理了200和404的情況，沒有處理302，有的時候拉取某些公網的資源會出現302的情況，這種情況相對較少，目前還不清楚什麼原因導致的，暫時還沒有處理，也沒有做解決處理，如果要處理大概的思路是返回320,獲取重定向的路徑再次請求拉取包的數據； -
getPackage方法解析包路徑可能會出現問題；
npm.js中getPackage方法裏拼接私庫包的url可能會有問題，如果私庫的包拉取不到，可以變量tarballURL調試一下該方法的代碼獲取的路徑是不是正確的； - 內網如果是HTTPS暫時還沒有測試，目前是HTTP；
有哪些應用場景呢？
- 公司有npm私庫，發佈了很多組件，但是查找困難，如果有一個預覽平臺，可以直接顯示縮略圖，直接訪問預覽頁面，是不是很方便；
- 搭建自己的靜態資源加速器；