ESM is the future. No bundling, no bullsh*t.
esimport is fast 🔥, simpel 🧃, secure 🏴☠️, and backwards compatible ☎️.
Comparison esimport vs esh.sh vs jsDelivr
| esimport | esm.sh | jsDelivr | |
|---|---|---|---|
| private package support | ✅ | ❌ | ❌ |
| offline development | ✅ | ❌ | |
| dependabot support | ✅ | ❌ | ❌ |
| integrity support | ✅ | ❌ | ❌ |
| supply chain attacks protection | ✅ | ❌ | ❌ |
| highly efficient client caching | ✅ | ✅ | ✅ |
# esimport <package-root> <output-dir> [--watch,--serve,--path-prefix,--verbose,--help]
npx esimport . ./public/static/ --serveThat's it!
Let's assume we have a project with Lit and a custom component
defined via imports. After running esimport we have the following output:
# the folder containing browser ready ESM files
$ tree -d out
out
├── src
└── node_modules
├── lit
│ ├── decorators
│ └── directives# a fully resolved importmap with sha256, sha384, and sha512 hashes
$ jq '.' out/importmap.json
{
"imports": {
"#js/components/myWidget": "src/js/components/myWidget-KWLRK5KY.js",
"lit": "node_modules/lit/index-W3JFEEGS.js",
"lit/async-directive.js": "node_modules/lit/async-directive-C4RAQ6VS.js",
"lit/decorators.js": "node_modules/lit/decorators-RLPUYE5L.js",
// …
},
"integrity": {
"src/js/components/myWidget-KWLRK5KY.js": "sha256-… sha384-… sha512-…",
"node_modules/lit/index-W3JFEEGS.js": "sha256-… sha384-… sha512-…",
"node_modules/lit/async-directive-C4RAQ6VS.js": "sha256-… sha384-… sha512-…",
"node_modules/lit/decorators-RLPUYE5L.js": "sha256-… sha384-… sha512-…",
// …
}
}