Question

我对使用一堆JS库感兴趣，而不必依赖于基于npm的工具和其他捆绑步骤。

在浏览器中支持ES6模块后，我可以使用以下模块：

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

当所需的模块没有任何传递依赖项时，哪一种很好。但是通常，来自转译的ES6之前版本的模块都是这样做的：

import Vue from 'vue'

在当今的浏览器中似乎无法使用。我缺少某种将模块说明符与某个URL关联的选项，比如说<script>标签的属性。

一个务实的解决方案是回到使用UMD构建的模块，这些模块安装在全局名称空间中，并允许我在主HTML文件中明确列出所有依赖项。

但是我对概念故事很感兴趣。捆绑工具告诉我们，将来在获得本机支持时它们将被淘汰，但是到目前为止，浏览器的支持已经毫无用处，因为生态系统可能不会始终如一地转向通过相对路径导入模块。

Answer 1

对于“大多数”浏览器中未使用捆绑器的ES模块功能，请尝试es-module-shims：

这将添加当前导入映射规范的-shim变体。可以使用基线ES模块支持将其填充到浏览器中。

Answer 2

我发现了一个等待中的扩展程序，有望弥补这一空白：https://github.com/WICG/import-maps

导入映射允许指定短模块说明符和URL之间的映射：

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js" 
  }
}
</script>

到目前为止，唯一的缺点是它们仅在最新的Chrome 74中受支持，并且隐藏在实验性标志的后面：chrome：// flags /＃enable-built-in-module-infra