使用没有 Transpiler/Bundler 步骤的 ES6 模块

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

我找到了一个有望填补这一空白的待定扩展：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

Answer 2

对于在 "most" 浏览器中不使用捆绑器的 ES 模块功能，请尝试 es-module-shims:

这添加了当前导入地图规范的 -shim 变体。可以将其填充到具有基线 ES 模块支持的浏览器上。

Using ES6 Modules without a Transpiler/Bundler step