javascript - Using ES6 Modules without a TranspilerBundler step - Stack Overflow

admin管理员组

文章数量:1353186

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 '/[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.

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./[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.

• javascript
• es6-modules

Share Improve this question Follow edited Apr 26, 2019 at 23:46 strfry asked Apr 26, 2019 at 13:31 strfrystrfry 30322 silver badges99 bronze badges 3

• 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 Commented Apr 26, 2019 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 Commented Apr 27, 2019 at 0:00
• @Hamms Citing from rollupjs : ES modules let you freely and seamlessly bine the most useful individual functions from your favorite libraries. This will eventually be possible natively everywhere, but Rollup lets you do it today. – strfry Commented Apr 27, 2019 at 1:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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

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

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg./[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

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

• https://github./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.

本文标签： javascriptUsing ES6 Modules without a TranspilerBundler stepStack Overflow