What does HackerNews think of es-module-shims?
Shims for new ES modules features on top of the basic modules support in browsers
I completely gave up on bundling and all forms of optimization beyond that. Turns out it doesn't matter as long as the total amount of source for your site is less than what twitter or Facebook use (it will be).
I recently had to take a dep on three.js and a few others items for a side project, and instead of reaching for one of the various toolchains, I grabbed the raw JS/module source and wrote my own import map by hand:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sc...
Note that you will need an ES module shim for iOS/Safari if you go this path: https://github.com/guybedford/es-module-shims
(But it is fairly large: 53KB raw, 15KB gzipped, 32KB minified, 11KB minified+gzipped. It’s providing a lot of likely-unnecessary functionality. I’d prefer a stripped-down and reworked polyfill that can also be lazily-loaded, controlled by a snippet of at most a few hundred bytes that you can drop into the document, only loading the polyfill in the uncommon case that it’s needed—like how five years ago as part of modernising some of the code of Fastmail’s webmail, I had it fetch and execute core-js before loading the rest iff !Object.values (choosing that as a convenient baseline—see https://www.fastmail.com/blog/using-the-modern-web-platform/... for more details), so that the cost to new browsers of supporting old browsers was a single trivial branch, and maybe fifty bytes in added payload. I dislike polyfills slowing down browsers that don’t need them, by adding undue weight or extra requests.)
<p>import Pkg from '<a href="https://site.com/pkg.js" rel="nofollow">https://site.com/pkg.js</a>'<p>import sheet from '<a href="https://site.com/sheet.css" rel="nofollow">https://site.com/sheet.css</a>' assert { type: 'css' };<p>
It’s tricky to recommend them because I’m using web components at work and find the transition from React especially rocky. But they are native and standard, and other frameworks are slowly moving in that direction... I expect React will be the last to adopt them, or they’ll push for spec changes before they do...
open-wc is also worth a mention: https://dev.to/thepassle/announcing-open-web-components-5h7 - their guide and setup for using web components is over here: https://open-wc.org/guide/#quickstart
You can also technically start using native es modules in browsers, either localhost in Chrome 74+ or via origin whitelist with Google. Or use a polyfill such as Guy Bedford’s https://github.com/systemjs/systemjs/blob/master/docs/import... or https://github.com/guybedford/es-module-shims — but you’ll have to consider solutions for custom syntax, scss or non-es module dependencies. I personally think there’s a gap in the npm ecosystem which is building “source packages” that are native single-file es modules you can easily import or compile from with a native JS module system...