opensourceprojects.dev

A broadsheet for software that doesn't ask for your email

A nobuild CDN for modern web development.
GitHub RepoImpressions100

Project Description

View on GitHub

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=es2022 or ?bundle to customize output.
  • Self-hostable: The GitHub repo lets you run your own instance if needed.

How to Try It

  1. 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>
    
  2. 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.

Back to Projects
Project ID: 1950837442711552361Last updated: July 31, 2025 at 08:34 AM