3 ms·

I thought this might be interesting to people because it's no longer necessary to use a transpiler or bundler. Instead, just use es6 modules loaded from skypac

I thought this might be interesting to people because it's no longer necessary to use a transpiler or bundler. Instead, just use es6 modules loaded from skypack. Save the above code to index.html and load it in a browser.

tehbeard 5y ago
You literally import a transpiler on the page.... What the hell do you think Babel is? All you've done is shift the work from once at build time to every. Single. Time anyone loads the page on their phone/tablet/pc...
- andrewstuart 5y ago
  You miss the point - note the dynamic module loading of imports.
  - nsonha 5y ago
    using a nonstandard script type (babel, data-type bla bla), mind blowing!
  - tehbeard 5y ago
    How do I miss the point? You said no transpiling! And I pointed out how you have in be. > Dynamic module loading ...a feature of browsers since 2017/2018? Of which numerous blog posts have discussed the merits of tree shaking and bundling post-ESM to strike a balance of minimal file size / network requests and cache thrashing on updates, Vs. One copypasta text dump with zero depth... You copy pasted junk, ironically with no transformative process on your part..
brundolf 5y ago
Charitably, it could be nice for prototyping I'm going to assume you already know this shouldn't be done in production If you wanted something like this in production, then yes you could probably use modules and skip bundling these days, but skipping bundling != skipping transpiling. Instead, transpile your separate source modules into separate ES modules and ship those.
- tehbeard 5y ago
  With HTTP/2 server push faltering in production and the real world... it's still best to bundle, but just down to your direct dependencies and with tree shaking (i.e. react and it's deps become one file, react-dom another, and any common deps between the two become a third "common-vendor.js" file). and while you're at it, it's not much more effort to take the ESM "evergreen" version, and dump a SystemJS IE11 / "legacy" bundle if needed for a project.

tehbeard 5y ago

You literally import a transpiler on the page.... What the hell do you think Babel is? All you've done is shift the work from once at build time to every. Single. Time anyone loads the page on their phone/tablet/pc...

andrewstuart 5y ago
You miss the point - note the dynamic module loading of imports.
- nsonha 5y ago
  using a nonstandard script type (babel, data-type bla bla), mind blowing!
- tehbeard 5y ago
  How do I miss the point? You said no transpiling! And I pointed out how you have in be. > Dynamic module loading ...a feature of browsers since 2017/2018? Of which numerous blog posts have discussed the merits of tree shaking and bundling post-ESM to strike a balance of minimal file size / network requests and cache thrashing on updates, Vs. One copypasta text dump with zero depth... You copy pasted junk, ironically with no transformative process on your part..

brundolf 5y ago

Charitably, it could be nice for prototyping I'm going to assume you already know this shouldn't be done in production If you wanted something like this in production, then yes you could probably use modules and skip bundling these days, but skipping bundling != skipping transpiling. Instead, transpile your separate source modules into separate ES modules and ship those.

tehbeard 5y ago
With HTTP/2 server push faltering in production and the real world... it's still best to bundle, but just down to your direct dependencies and with tree shaking (i.e. react and it's deps become one file, react-dom another, and any common deps between the two become a third "common-vendor.js" file). and while you're at it, it's not much more effort to take the ESM "evergreen" version, and dump a SystemJS IE11 / "legacy" bundle if needed for a project.