Skip the Build Step: esm.sh Delivers npm Packages as Native ES Modules
Modern web development is all about speed—both in performance and workflow. But even with native ES modules now supported everywhere, we still often reach for build tools to handle npm packages. What if you could skip that step entirely?
Enter esm.sh, a "nobuild CDN" that transforms npm packages into browser-friendly ES modules on the fly. No more waiting for npm install or fiddling with bundler configs just to use lodash in a quick prototype.
What It Does
esm.sh acts like a CDN, but with a superpower: it automatically converts CommonJS/UMD npm packages into ES modules that browsers can import directly. Just drop this in your HTML:
<script type="module">
import _ from 'https://esm.sh/lodash';
// Use lodash without a build step
</script>
Behind the scenes, it handles version resolution, dependency trees, and even TypeScript types (via ?dts flag).
Why It’s Cool
- Zero-config prototyping: Perfect for CodePens, quick demos, or when you just need to test an idea without setting up a whole project.
- Built-in optimization: Automatically serves minified versions and supports import maps for version pinning.
- Runtime flexibility: Append query flags like
?target=es2022or?bundleto customize output. - Self-hostable: The GitHub repo lets you run your own instance if needed.
How to Try It
-
Use it directly in browsers:
<script type="module"> import { html } from 'https://esm.sh/[email protected]'; import { signal } from 'https://esm.sh/@preact/[email protected]'; </script> -
For Node.js (ESM mode), prefix imports:
import axios from 'esm:axios';
Final Thoughts
esm.sh isn’t meant to replace bundlers for production apps, but it’s a game-changer for experimentation and rapid iteration. I’ve used it to test libraries before adding them to a project, and the instant feedback is liberating. For devs tired of waiting for npm install just to try one package, this feels like the future.
Got a cool use case? Let us know @githubprojects.