Implementing Inline Import for ES Modules Using Blob and ImportMap

Modern browsers support native ES Modules, which are useful for development and learning, but they cannot import modules defined inside HTML <script type="module"> tags. To enable inline imports, the article proposes using the Blob API to turn script content into a Blob URL and caching these URLs in a map.

First, a helper function function getBlobURL(module) { const jsCode = module.innerHTML; const blob = new Blob([jsCode], {type: 'text/javascript'}); const blobURL = URL.createObjectURL(blob); return blobURL; } creates a Blob URL from a script element. Then an inlineImport function dynamically imports the Blob URL, storing it in a global map.imports object for reuse.

To achieve static imports, the article leverages the browser's importmap feature. By generating an import map that maps module IDs (e.g., #foo ) to the corresponding Blob URLs, static import foo from '#foo' statements become possible.

The setup function scans all <script type="inline-module"> elements, builds the import map, and inserts it into the document as a <script type="importmap"> element. It also supports merging an external import map provided via a <script type="inline-module-importmap"> tag.

Usage examples show how to declare inline modules, load the helper library with a setup attribute, and then import modules either dynamically with await inlineImport('#foo') or statically with import foo from '#foo' . The article notes constraints such as only one importmap per page and its required placement before any type="module" scripts.

Finally, the author points readers to the open‑source repository github.com/xitu/inline-module for the full implementation and encourages feedback.