DEV Community

loading...

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

tingwei628 profile image Tingwei ・1 min read

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

meme

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...(邊緣)

Discussion

pic
Editor guide