第一個 NPM 套件: rollup-plugin-hotreload.js

rollup-plugin-hotreload.js 是一個 Rollup.JS 支援 HotReload 外掛(plugin)

TL;DR

為什麼想做這個 -> 中間遇到的困難 -> 後續的 Roadmap

---

為什麼想做這個?

原因有幾個:

1. 首先是在前端開發時，很常按 F5 刷新瀏覽器的畫面，但由於本人很懶得按，因此就想做一個類似的

等等，不是 Webpack 已經有 HotReload，就直接用它的啊

可是我用 Rollup.JS 啊

鑑於 Rollup.JS 不做 HotReload，我就來做吧!

1. 出於自己開發前端也用過不少套件，雖然 JS 功力不怎麼樣，那就來練功吧!!

2. 如果被人下載拿來用 應該會很開心 :)，成就感滿滿 ~

下載量: 1326次 (截止於2019/01/26)

中間如何解決遇到的困難

可以看看我開的 issues

1. 如何 server 發通知給 client 做更新?

   一開始直覺用 Socket.IO，但覺得檔案實在大，正覺得苦惱時，索性參考 webpack-hot-middleware，

   改用 SSE(Server Sent Event) 方式！

2. watch-file server 和 api-server 的 Port 其實不用重複

   這個問題卡了很久，一直發生了 Node.JS 的錯誤 “write after end” error，後來分開兩個 Port 就解決了!

   詳情可以參考該 PR

3. 支援多個 Bundles 並且 解決檔案路徑的問題

   這邊也把 __dirname 傳進去 Rollup.JS plugin 的接口裡面，避免找不到檔案

   參考 issue

後續的 Roadmap

1. 做出 可以 部分 Bundle 作 HotReload，而非一次全部 Bundle 作 HotReload

2. 能夠使用 node-glob 方式，指定 Bundle 路徑

3. 想一想跟 WebAssembly 作結合的地方(？！)

後記:

註1: 這個套件沒有寫得很棒，所以不會大力宣傳，就放在 NPM 上隨風飄揚吧

註2: 這個套件會補上測試...orz

註3: 其實都是我一個人開 issues...(邊緣)