Using ES6 Modules without a Transpiler/Bundler step

Question

I'm interested in using a bunch of JS libraries without depending on npm-based tooling and additional bundling steps.

With ES6 modules support in the browser, i can use modules like this:

<script type="module">
    import Vue from 'https://unpkg.com/[email protected]/dist/vue.esm.browser.min.js';
    new Vue({...});
</script>

Which is fine when the required module doesn't have any transitive dependencies. But usually, those modules from the transpiled pre-ES6 world do it like this:

import Vue from 'vue'

Which doesn't seem to work in todays browsers. I'm missing some kind of option, to associate the module specifier with a certain URL, let's say as an attribute to a <script> tag.

A pragmatic solution would be to just go back to use the UMD builds of modules, which are installed into the global namespace and allows me to explictly list all dependencies in the main HTML file.

But I'm interested in the conceptual story. The bundler tools tell it as they will be obsolete in the future when there is native support, but as of now, the browser support is pretty useless, because the ecosystem is probably not consistently going to shift to importing modules by relative paths.

Answer 1

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.

Answer 2

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