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/[email protected]'

Submodule

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

or import non-module(js) files:

import 'https://esm.sh/tailwindcss/dist/tailwind.min.css'

Specify ESM target

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

Avaiable target: es2015 - es2020, esnext, and deno

Development mode

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

Package CSS

import Daygrid from 'https://esm.sh/@fullcalendar/daygrid'

<link rel="styelsheet" href="https://esm.sh/@fullcalendar/daygrid?css">

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'

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

{
  "imports": {
    "react": "https://esm.sh/[react,react-dom,swr]/react",
    "react-dom": "https://esm.sh/[react,react-dom,swr]/react-dom",
    "swr": "https://esm.sh/[react,react-dom,swr]/swr",
    ...
  }
}

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

⚠️ 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 replace the node internal modules (fs, os, etc) with deno.land/std/node to support some packages working in Deno, like postcss:

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

console.log((await postcss([ autoprefixer ]).process(`
  backdrop-filter: blur(5px);
  user-select: none;
`).async()).css)

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

You can pass the no-check query to disable the X-TypeScript-Types header if 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.

As optional, you can split code manually with the external query:

import React from 'https://esm.sh/[email protected]'
import useSWR from 'https://esm.sh/[email protected]'

Network of esm.sh

• Main server in HK
• Global CDN by Cloudflare
• China CDN by Aliyun (using mmdb_china_ip_list to split traffic)

Self-Hosting

You will need Go 1.16+ to compile the server, and ensure supervisor installed on your host machine.
The server runtime will install the latest nodejs (14+ LTS) automatically.

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

Special Thanks

• wleonardo