How Hot Module Replacement REALLY Works | JS Toolchain From Scratch
HTML-код
- Опубликовано: 1 апр 2024
- 🎉 NEW book on tooling (build your own tools!) Coming 2024, register for updates): lachlan-miller.ck.page/92dfa0...
⚠️ NOTE: I refer to HMR as Hot Module RELOAD - it's actually "Replacement", I had been saying in wrong for years.
🐦 My Twitter: / lachlan19900
✏️ Diagram/notes from video: app.eraser.io/workspace/W1ZOW...
🔨 I am building an entire JS toolchain from (mostly) scratch. In this video, we lay the foundations and build out a naive but simple and functional hot module replacement (HMR) implementation.
Source: github.com/lmiller1990/build-... - Наука
The R in HMR is for "replacement" - I say "reload" in this video (and have done so for years). Sorry about that 🤦♂ Enjoy!
great video! please keep this tooling series going 👏
Will do!
I was today years old that it is Replacement and not Reload 🙈
Thanks for the video Lachlan 🙌🏻
Thanks! Been tuning in to you & Michael's podcast, great stuff! SSR / hydration isn't something I know well, might have to hit you up for some help when I get to making a video about how that works under the hood...
@@LachlanMiller Glad you enjoy the podcast ☺
Oh yes, absolutely! My DMs are always open 🙌🏻
This is something I've been wanting to look into for a while, so great timing on the video.
Hope you find it useful!
This is amazing! Learned a lot, thanks so much!! 😃
Great video! Nice to know how things we take for granted actually work
Great series! It can be hard to understand how these tools work at a basic level but you made it very digestable!
Thank you - I am glad you are enjoying it!
This is great, thanks!
This was awesome. Loving the series.
Thanks, glad you are enjoying it! Not sure what to focus on next, any recommendations?
@@LachlanMiller I have always been curious about source maps and how the browser uses them. I would also love to see a basic bundler & transpiler built with something like esbuild and what to keep in mind when working with them.
@@sravansuresh7460 Source maps for sure, to show this off I think we need a bundler / transpiler first, that might be next 🔥
Awesome content, when can we expect your book ?
Hopefully later this year, this kind of content takes a ton of time! I will send out email updates as they come.
im confused in the hotmodule class you have an accept method that takes in a callback. but then the accept method is not called anywhere so where is the callback coming from?
Confusing right... it is called in the `child,.js`, it is `import.meta.hot.accept(...)`. It is called as soon at the module is loaded. See here: github.com/lmiller1990/build-your-own-vite/blob/371c6a991615f881ac1562ebcbb2ffdf02fe9c6e/dev-server/src/child.js#L3