Using ES6 Modules without a Transpiler/Bundler step

问题

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.

回答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.

回答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/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

来源：https://stackoverflow.com/questions/55868747/using-es6-modules-without-a-transpiler-bundler-step

标签

javascript

es6-modules