ES6 模块与 HTML 导入答案

【问题标题】：ES6 Modules vs. HTML ImportsES6 模块与 HTML 导入
【发布时间】：2014-02-06 06:34:30
【问题描述】：

HTML Imports 是Web Components 规范的一部分，并提供了一种处理网络依赖关系的方法。 ES6 模块也做同样的事情，但只针对 Javascript 代码。

是否有明确说明这两者将如何协同工作？

编辑：一个例子： 在我最近的一个项目中，我有两个 Javascript 组件（文件），其中一个依赖于另一个，但任何 HTML 代码（这是另一个组件）都可以使用的任何一方。因此，当我在 HTML 中包含依赖脚本时，我也不想包含父脚本（避免手动依赖处理）。除了将 ES6 模块与脚本包含混合之外，似乎没有明确定义的方法可以做到这一点。我看到的唯一选择是为每个组件维护一个单独的文件，并指定所需的文件和依赖项，例如 component.io。

【问题讨论】：

好问题！我想知道如果你在一个页面中为同一个脚本两次添加<script>标签会发生类似的情况，但我希望不会。
我对主要问题没有完整的答案，但值得注意的是，HTML 导入中的相同
此问题的一个用例是当您在使用 ES6 模块的 Angular 2.0 组件指令中使用使用 HTML 导入的 Polymer Elements 时

标签： ecmascript-harmony web-component

【解决方案1】：

这是最新的：Chrome 原生支持所有 4 个 Web 组件规范，而 Mozilla announced 他们不会发布 HTML 导入的实现，正是因为 this pending reconciliation 带有 ES6 模块，这不会很快就会得到解决，特别是因为这是 Mozilla 必须说的：

我们期望一旦 JavaScript 模块——从由开发者社区编写的 JavaScript 库——已发布，我们看待这个问题的方式将会改变。我们也有从 Gaia 和其他人那里了解到，缺少 HTML Imports 并不是问题，因为功能可以很容易地提供如果需要，可以使用 polyfill。

【讨论】：

【解决方案2】：

Web 组件如何与 ES6 模块交互尚未最终确定，但至少有两种选择。

ES6 有realms 的概念。如果两个 iFrame 中有 JavaScript，那么这两个 iFrame 可以相互通信并来回传递数据。但他们在不同的领域。这意味着您可以在一个对象中修改Array.prototype 对象，而不会影响另一个对象。每个 Web 组件很可能都有自己的领域，因此它们不会相互干扰。

每个领域都有一堆全局对象，其中包括（很可能，规范尚未最终确定）Loader 对象。您可以创建 Loader 的新实例并使用它来加载模块。领域中已经存在一个，这是默认的。每个Loader 实例都有它自己的已定义模块列表，因此每个Web 组件都可以被赋予它自己的Loader 实例。

我不确定 web 组件是否会被赋予不同的 Realms 或不同的 Loader 对象，但不同的 web 组件很可能不会相互干扰。

【讨论】：

这个链接在 2 年前讨论了同样的问题，但我到现在还没有看到任何更新：esdiscuss.org/topic/…。
这是一个很好的答案，并且已经有指向它的链接。我们可以用 2017 年的现实更新它吗？ :)
在 2019 年初，此处的更新将更加相关。