import and friends.
Browsers support it these days. There is plenty of nuance, but as long as you’ve dropped IE, the door is fairly open.
- We’ve got packages we need to use from npm.
- We’ll install them from npm ahead of time with our
npm installand whatnot.
- We’ll write
importstatements that are invalid ESM for some reason (developer convenience, I guess) and assume we’re importing packages from a local
- Our bundler will know what to do with those invalid imports.
- This is all OK, because word on the street is that bundling is still required for performance, and it does other stuff we want anyway, like run Babel and friends.
Now that we can count on ESM more, the story is shifting somewhat, and all of those things are being questioned.
- What if we didn’t have to
- What if we don’t need a bundler?
- What if performance is fine, between HTTP/2+, global CDNs, browsers doing fancy things, etc.?
- What if maybe we shouldn’t be compiling code so much because we’re down-compiling too much?
We’re seeing next-generation tooling that leans into all that. Snowpack 3 was just released and look at this:
That React (with JSX), being written just as it normally is, and there was no
npm install, no
node_modules directory, and no build step. But, still a dev server and reloading. So light. Very refreshing.
I just listened to a recent Toolsday episode where Una and Chris chatted with Jason Miller about WMR, which I hadn’t heard of until then. It feels very spiritually similar to Snowpack/Skypack. With WMR, you get to use npm packages without having to install them, or write with things like JSX, TypeScript or CSS Modules, and get a bunch of dev conveniences, like a server, hot reloading, etc.
Something is clearly in the water here, and I think that something is a leaning into ESM.
Even on the Node.js side, ESM is happening. Here’s Sindre Sorhus, who has over 1,000 npm packages(!):
He’s planning to move almost all of those 1,000 packages to ESM in 2021. Not a “dual” setup where you output multiple different formats… just ESM, and he’s encouraging everyone to do the same. I would think this momentum toward direct ESM usage in the browser builds heavily when the npm ecosystem is doing the exact same thing.
And when you do need to bundle because, say, something on npm isn’t yet ready for ESM, then next-gen bundlers are getting smoking fast.
You can support CSS-Tricks by being an MVP Supporter.