DEV Community 👩‍💻👨‍💻

Cover image for Introducing: ESM CDN for NPM + Deno
X.
X.

Posted on

Introducing: ESM CDN for NPM + Deno

Hi, let me introduce you to esm.sh, a fast, global content delivery network for ES Modules. All modules are transformed to ESM by esbuild in npm.

Different with Skypack and jspm, esm.sh will bundle all dependencies(exclude peerDependencies) for each package, that gives more better loading speed.

esm.sh uses cloudflare as the gloabl CDN.

Import from URL

import React from 'https://esm.sh/react'
Enter fullscreen mode Exit fullscreen mode

Specify version

import React from 'https://esm.sh/react@17.0.1'
Enter fullscreen mode Exit fullscreen mode

Submodule

import { renderToString } from 'https://esm.sh/react-dom/server'
Enter fullscreen mode Exit fullscreen mode

or import regular files:

import 'https://esm.sh/tailwindcss/dist/tailwind.min.css'
Enter fullscreen mode Exit fullscreen mode

Development mode

import React from 'https://esm.sh/react?dev'
Enter fullscreen mode Exit fullscreen mode

Bundle mode

import React from 'https://esm.sh/[react,react-dom,swr]/react'
import ReactDom from 'https://esm.sh/[react,react-dom,swr]/react-dom'
Enter fullscreen mode Exit fullscreen mode

or your can define the bundle list in import-map.json (import-maps proposal)

{
    "imports": {
        "https://esm.sh/": "https://esm.sh/[react,react-dom,swr]/",
        ...
    }
}
Enter fullscreen mode Exit fullscreen mode
import React from 'https://esm.sh/react' // actual from 'https://esm.sh/[react,react-dom,swr]/react'
Enter fullscreen mode Exit fullscreen mode

⚠️ The bundling packages in URL are litmited up to 10, to bundle more packages, please use the esm client(WIP).

Deno compatibility

esm.sh will polyfill the node internal modules(fs,os,etc) with https://deno.land/std/node to support some modules to work in Deno, like postcss:

import postcss from 'https://esm.sh/postcss'
import autoprefixer from 'https://esm.sh/autoprefixer'

const css = (await postcss([ autoprefixer]).process(`
    backdrop-filter: blur(5px);
    user-select: none;
`).async()).content
Enter fullscreen mode Exit fullscreen mode

X-Typescript-Types

By default, esm.sh will response a custom HTTP header of X-TypeScript-Types when the types(dts) defined, that is useful for deno types check (link).

Alt Text

You can pass the no-check query to disable the types header since some types are incorrect:

import unescape from 'https://esm.sh/lodash/unescape?no-check'
Enter fullscreen mode Exit fullscreen mode

More usages

please check https://esm.sh

Open source

esm.sh is licensed under the MIT License.

https://github.com/postui/esm.sh

Top comments (0)

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs