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?

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.

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.