Using ES6 Modules without a Transpiler/Bundler step

For ES module features without the use of a bundler in "most" browsers try es-module-shims:

  • https://github.com/guybedford/es-module-shims

This adds a -shim variant of the current import map specification. Which can be polyfilled onto browsers with baseline ES module support.


I found a pending extension that promises to fill this gap: https://github.com/WICG/import-maps

import maps allow to specify a mapping between short module specifiers and a URL:

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/[email protected]/dist/vue.esm.browser.js" 
  }
}
</script>

Only downside is, as of now, they're only support in most recent Chrome 74, and hidden behind an experimental flag: chrome://flags/#enable-built-in-module-infra