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/vue@2.6.0/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.

I'll be interested to see if you get a good quality answer. package managers do a lot, as you know, including handling dependencies, etc - so doing this without one sounds like a lot of work :) — random_user_name, Apr 26 '19 at 13:48
"The bundler tools tell it as they will be obsolete in the future when there is native support" Can you expand on this? What specifically are you basing this on? — Hamms, Apr 27 '19 at 00:00
@Hamms Citing from https://rollupjs.org/ : `ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today.` — strfry, Apr 27 '19 at 01:04

score 5 · Answer 1 · answered Apr 27 '19 at 09:37

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/vue@2.6.10/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

score 3 · Accepted Answer · answered May 18 '19 at 17:05

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.

Using ES6 Modules without a Transpiler/Bundler step

2 Answers2

Linked