Skip to main content

ESM

A fast, global content delivery network for ES Modules. All modules are transformed to ESM by esbuild in npm.

Import from URL

import React from 'https://esm.sh/react'

Specify version

import React from 'https://esm.sh/react@17.0.1'

Submodule

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

Specify ESM target

import React from 'https://esm.sh/react?target=es2020'

Avaiable target: es2015 - es2020, esnext

Development mode

import React from 'https://esm.sh/react?dev'

Fix external

import React from 'https://esm.sh/postcss-flexbugs-fixes?external=postcss'

Bundle mode

import React from 'https://esm.sh/[react,react-dom]/react'
import ReactDom from 'https://esm.sh/[react,react-dom]/react-dom'

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

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

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

Proxy mode

import * from 'https://esm.sh/${provider}/name@version/path/to/file'

Avaiable provider: deno.land, nest.land, x.nest.land, denopkg.com
Simply proxy all the providers in the import-map.json:

{
    "imports": {
        "https://deno.land/":   "https://esm.sh/deno.land/",
        "https://nest.land/":   "https://esm.sh/nest.land/",
        "https://x.nest.land/": "https://esm.sh/x.nest.land/",
        "https://denopkg.com/": "https://esm.sh/denopkg.com/",
        ...
    }
}

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

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).

figure #1

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'

Caveats

Different with Skypack and jspm, esm.sh will bundle all dependencies(exclude peerDependencies) for each package, that means there may be redundant contents transmitted when you are importing multiple packages.
This should be improved when the http/3(quic) is ready. For now the best practice is using the bundle mode.

Network of esm.sh

Self-Hosting

You will need Go 1.14+ to compile the server, and ensure supervisor installed on your host machine.
The server runtime will check the nodejs installation (12+) exists or install the latest LTS version automatically.

$ git clone https://github.com/postui/esm.sh
$ cd esm.sh
$ sh ./scripts/deploy.sh