- v135_7Latest
- v135_6
- v136_6
- v135_5
- v135_4
- v135_3
- v135_2
- v135_1
- v135
- v134
- v133
- v132
- v131
- v130
- v129
- v128
- v127
- v126
- v125
- v124
- v123
- v122
- v121
- v120
- v119
- v118
- v117
- v116
- v115
- v114
- v113
- v112
- v111
- v110
- v109
- v108
- v107
- v106
- v105
- v104
- v103
- v102
- v101
- v100
- v99
- v98
- v97
- v96
- v95
- v94
- v93
- v92
- v91
- v90
- v89
- v88
- v87
- v86
- v85
- v84
- v83
- v82
- v81
- v80
- v79
- v78
- v77
- v76
- v75
- v74
- v73
- v72
- v71
- v70
- v69
- v68
- v67
- v66
- v65
- v64
- v63
- v62
- v61
- v60
- v59
- v56
- v57
- v55
- v53
- v52
- v51
- v50
- v49
- v48
- v47
- v46
- v45
- v44
- v43
- v41
- v40
- v39
- v38
- v37
- v35
- v34
- v0.1.0
- v0.0.1
ESM
A fast, global content delivery network for NPM packages with ES Module format.
Import from URL
import React from "https://esm.sh/react" // 18.2.0
Specify version
import React from "https://esm.sh/react@17.0.2"
You may also use a semver or a dist-tag instead of a fixed version number, or omit the version/tag entirely to use the latest
tag:
import React from "https://esm.sh/react@17" // 17.0.2
import React from "https://esm.sh/react@next" // 18.3.0-next-3de926449-20220927
Submodule
import { renderToString } from "https://esm.sh/react-dom@18.2.0/server"
or import non-module(js) files:
import "https://esm.sh/react@18.2.0/package.json" assert { type: "json" }
Specify dependencies
By default, esm.sh will rewrite import specifier based on the package’s dependency statement. To specify version of dependencies, you can use the ?deps=PACKAGE@VERSION
query. You can separate multiple dependencies with commas: ?deps=react@17.0.2,react-dom@17.0.2
.
import React from "https://esm.sh/react@17.0.2"
import useSWR from "https://esm.sh/swr?deps=react@17.0.2"
Specify external dependencies
You can use the ?external=PACKAGE
query to specify external dependencies.
These dependencies will not be resolved within the code. You need to use import maps to specify the url for these dependencies. If you are using Deno, you can use the CLI Script to generate and update the import map that will resolve the dependencies automatically.
{
"imports": {
"preact": "https://esm.sh/preact@10.7.2",
"preact-render-to-string": "https://esm.sh/preact-render-to-string@5.2.0?external=preact",
}
}
Or you can mark all dependencies as external by adding *
prefix before the package name:
{
"imports": {
"preact": "https://esm.sh/preact@10.7.2",
"preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.0",
"swr": "https://esm.sh/*swr@1.3.0",
"react": "https://esm.sh/preact@10.7.2/compat",
}
}
Aliasing dependencies
import useSWR from "https://esm.sh/swr?alias=react:preact/compat"
in combination with ?deps
:
import useSWR from "https://esm.sh/swr?alias=react:preact/compat&deps=preact@10.5.14"
The origin idea was coming from @lucacasonato.
Tree Shaking
By default esm.sh will export all members of the module, you can specify the exports
by adding ?exports=foo,bar
query:
import { __await, __rest } from "https://esm.sh/tslib" // 7.3KB
import { __await, __rest } from "https://esm.sh/tslib?exports=__await,__rest" // 489B
Bundle mode
import { Button } from "https://esm.sh/antd?bundle"
In bundle mode, all dependencies will be bundled into a single JS file.
Development mode
import React from "https://esm.sh/react?dev"
The ?dev
query builds modules with process.env.NODE_ENV
equals to development
, that is useful to build modules like React to allow you to get more development warn/error details.
ESBuild options
By default, esm.sh will check the User-Agent
header to get the build target automatically. You can specify it with the ?target
query. Available targets: es2015 - es2022, esnext, node, and deno.
import React from "https://esm.sh/react?target=es2020"
Other supported options of esbuild:
-
import React from "https://esm.sh/react?keep-names"
-
import React from "https://esm.sh/react?ignore-annotations"
-
import React from "https://esm.sh/react?sourcemap"
This only supports the
inline
mode.
Web Worker
esm.sh supports ?worker
query to load module as web worker:
import editorWorker from "https://esm.sh/monaco-editor/esm/vs/editor/editor.worker?worker"
const worker = editorWorker()
Package CSS
<link rel="stylesheet" href="https://esm.sh/monaco-editor?css">
This only works when the NPM package imports CSS files in JS directly.
Deno compatibility
esm.sh will resolve the node internal modules (fs, child_process, etc.) with deno.land/std/node
to support Deno.
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()
By default esm.sh will use a fixed version of deno.land/std/node
. You can use the ?deno-std=$VER
query to specify a different version:
import postcss from "https://esm.sh/postcss?deno-std=0.128.0"
Use CLI Script
esm.sh provides a CLI script to manage the imports with import maps in Deno, it will resolve dependencies automatically and always pin the build version. To use the CLI script, you need to run the init
command in your project root directory:
deno run -A -r https://esm.sh init
After initializing, you can use the deno task esm:[add/update/remove]
commands to manage imports of NPM in the import maps.
deno task esm:add react react-dom # add packages
deno task esm:add react@17 # add packages with specified version
deno task esm:add react:preact/compat # add packages with alias
deno task esm:update react react-dom # upgrade packages
deno task esm:update # update all packages
deno task esm:remove react react-dom # remove packages
X-Typescript-Types
By default, esm.sh will respond with a custom X-TypeScript-Types
HTTP header when the types (.d.ts
) is defined. This is useful for deno type checks (link).
You can pass the ?no-dts
query to disable the X-TypeScript-Types
header if some types are incorrect:
import unescape from "https://esm.sh/lodash/unescape?no-dts"
Pin the build version
Since we update esm.sh server frequently, sometime we may break packages that work fine previously by mistake, the server will rebuild all modules when the patch pushed. To avoid this, you can pin the build version by the ?pin=BUILD_VERSON
query. This will give you an immutable cached module.
import React from "https://esm.sh/react@17.0.2?pin=v106"
Global CDN
The Global CDN of esm.sh is provided by Cloudflare, one of the world’s largest and fastest cloud network platforms.
Self-Hosting
To host esm.sh by yourself, check the hosting documentation.