Hot module replacement for native ES Modules (browser or Node.js) *without* Webpack? No build tools

Question

I'm looking to add HMR to plain Node.js code or browser code written with native ES Modules.

There's no Babel, no Webpack, no transpilation, just plain JS files and ES Module import and export calls.

Can we do HMR in plain Node or browser?

Retral

Do you mean hot reload on the client js files or for the node server? For the nodeJS server code you could use nodmon: nodemon.io – Loritalorn

@Loritalorn Thanks for the suggestion. I literally mean hot module replacement (HMR) for Node.js modules running in Node (so basically the server if that what Node is being used for, but doesn't have to be a server). I know I can restart the whole Node.js process on each file change, that is easy. But I'm wondering about hot module replacement (HMR), to replace only modified modules (it would be similar to HMR in Webpack, for client code, but in this case for Node.js code). Get what I mean? – Retral

Yeah sorry. I understand now :) – Loritalorn

Answer 1

Here's a pure node HMR module from a developer/entrepreneur who i work with personally: https://github.com/huan/hot-import

Hope this helps.

Outdoors

Answer 2

Snowpack is a tool which uses native ES modules to get rid of bundling and in each save changes will be reflected faster compared to setups using bundlers like Webpack.

From Snowpack website:

No More Bundling During Development: Snowpack installs your npm dependencies so that they can be imported directly in the browser without an application bundler.

Instant Dev Startup: Snowpack’s dev server starts up in less than 20ms on most machines. Files are only built on-demand, as requested by the browser.

Instant Dev Rebuilding: Never wait more than a few milliseconds when you hit save. Since there’s no large app chunks to rebuild, changes are reflected in the browser instantly.

Connect your Favorite Build Tools: Manage your build using a simple, familiar “scripts” interface that replaces traditionally complex plugin ecosystems.

Bundle for Production: It’s the best of both worlds: fast bundle-free development + optimized bundling in production. Choose between bundled (optimized) or unbundled build output without any additional config needed.

Desrosiers

Answer 3

Another one is es-dev-server.

Retral

Answer 4

Here's a library that very much resembles the Webpack API, but for native ES Modules in the browser:

https://github.com/SevInf/heiss (also at https://www.npmjs.com/package/heiss)

And here's an article on it: https://itnext.io/hot-reloading-native-es2015-modules-dc54cd8cca01

Retral

Answer 5

You can also use ViteJs.

If you want use it for node server, just use the node plugin https://github.com/axe-me/vite-plugin-node with it

Windshield