My first NPM package: rollup-plugin-hotreload.js

npm package link

---

Why did I do this

There're several reasons:

First, when it came to front end development, I pressed F5 button to refresh the window to see what happend in the browser. Because of this meaningless behavior, I wanted to come up with the alternative way to fix this inconvenience( which was similar to the concept of automatic refreshing).
Wait?! Webpack has already the feature of hotreload. Why not did I just use it directly? But, I used Rollup.JS and at that time, it seemed it didn't have similar one. Alright, I was going to work on this.

Secondly, this is an opportunity to build up my skills in developing a JavaScript App.

Last, I would achieve the goal which my npm package was downloaded for many times. That's awesome!

What difficulties did I face

If you're interested in issues on GitHub

First, how did I send the notification to the client from the server? I intuitively wanted to use Socket.IO, but its size was way too large compared with my project. Therefore, I checked the webpack-hot-middleware and decided to use SSE(Server Sent Event)！

Secondly, I found the port used by watch-file server was conflicted with the port used by api-server because Node showed me error logs like this "write after end". After browsing pages on the StackOverflow, I separated two ports to fix the problem. You could check this Pull request

Thirdly, I found __dirname was needed to pass to avoid the error "No found file" and you could check this issue

Random ideas

1. How about doing partial bundle to hot reload instead of all bundles hot reloading (?
2. How about using node-glob to assign Bundle path (?
3. How about to plugin with WebAssembly (?

Update

2021-07-17: This project is no longer maintained. :)