JavaScript Modules 101 – Still need to bundle your browser code?

In this episode, we'll explore JavaScript (ECMAScript) modules that are built into the browser that doesn't use bundling. You'll learn how they compare to the alternatives and how to use them in modern browser code. You'll also learn about the tradeoffs of bundling your modules vs. allowing the browser to access them directly, and how HTTP 2 affects the need for bundling.

🔗 Resources:
-------------------------------------------

📚 Chapters
-------------------------------------------
00:00 : Introduction
00:28 : What is a JavaScript module and why do they exist?
07:00 : Code sample: Lewis Carroll in JavaScript
15:04 : To bundle or not to bundle
18:33 : The impact of HTTP 2.0

🔖 My on-demand & free email courses
-------------------------------------------
📺 Mastering the SharePoint Framework
📺  Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions
✉️  Explore & evaluate the SharePoint Framework
✉️  Understand the SharePoint Framework toolchain

🔗 Links
-------------------------------------------

#BrowserNative #JavaScript

[patricknelson]

What a great explainer. Methodical. Simple. Approachable. What I love most of all: Explaining the history of the core problem to show context and how we got to where we are today, which is especially useful for web dev dinosaurs like me who have watched it unfold in real time but also just want to understand this piece a little bit deeper in an introductory fashion.

p.s. at 15:30: Modern bundlers do have tree shaking capabilities to avoid including unused modules (far more feasible now with modern ESM since imports declare specifically what you need). Also: Efficient caching can be accomplished with code splitting. Even better: HMR (hot module replacement) can be used _during development_ to swap out _just_ what you’re working on without having to rebuild the entire site _nor_ reload. I’ve tried it, it’s pretty awesome.

[BrianHallmanac]

I've started using native ES Modules for some "non-spa" javascript for web pages. The main challenge I have is that I will occasionally need an NPM package reference. With browsers, you have to include the ".js" extension when you reference an imported file. This means you'll still need to copy the JS file out of your node_modules folder and into some kind of distribution folder. How else could this be handled?