Automatically create an importmap script
npm install data-importsSocial Media Photo by Chris Lawton on Unsplash
An easy way to use modules without needing tools, published on npm to make it even simpler without needing copy & paste.
html
data-imports="uhtml, html-escaper"
src="https://esm.run/data-imports"
>
`The
data-imports field accepts comma, spaces, new lines or semicolon separated entries that represent the module name.By default the generated
importmap will use the lovely esm.run service but if you need to directly serve some file it is possible to use a specialized syntax that will point directly to cdn.jsdelivr.net/npm instead:`html
imports="@pyscript/core!/dist/core.js"
src="https://esm.run/data-imports"
>
`Any item with a
! char will explicitly point at the specified path after such !, lovely handled by jsdelivr CDN.Production
There's nothing bad in using this module in production too but if that's the case every
https://esm.run/data-imports as script source should rather point explicitly at https://cdn.jsdelivr.net/npm/data-imports/index.js` to be sure no extra bytes are ever added to the original script, in here created ad-hoc as "semantically minified" code.