CODEWITHSUNDEEP
javascriptnode.jswebpack-hmrhot-module-replacement
trusktr
trusktr

Reputation: 45504

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

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?

Upvotes: 10

Views: 3313

Answers (5)

AXE
AXE

Reputation: 865

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

Upvotes: 0

trusktr
trusktr

Reputation: 45504

Another one is es-dev-server.

Upvotes: 1

Rajika Imal
Rajika Imal

Reputation: 655

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.

Upvotes: 1

trusktr
trusktr

Reputation: 45504

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

Upvotes: 0

Bryan Huang
Bryan Huang

Reputation: 5342

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.

Upvotes: 1

Related Questions