通过 import 语句加载 ECMA-Script 2015（及更高版本）模块实际上是如何在幕后工作的？

Question

因为我们大部分时间都在使用模块和 import 声明 transpiling 他们使用像 Babel 这样的工具，我很好奇关于本机 Web 浏览器的实现如何使用所谓的 import 语句加载外部文件。

是否会在后台使用 XmlHttpRequest/XmlHttpRequest2 加载模块？

AFAIK，整个标准将程序化 API 定义为 System 全局变量，其中有像 System.define 这样的方法来评估 JavaScript 源代码并注册它作为命名模块。

这是否意味着实际的模块系统实现不会涵盖外部文件模块加载（意味着 library/framework 或您自己的原始 JavaScript 代码应该使用 XmlHttpRequest?)

Answer 1

WHATWG 正在积极开发 loader 标准，它将处理浏览器中的加载：http://whatwg.github.io/loader/

由于这项工作仍在进行中，因此情况可能仍会发生变化。据我所知，未指定浏览器加载文件的确切方式，但它是 probable that it will use the Fetch API（XmlHttpRequest2 的基于 Promise 的替代品）。

最后，您应该能够使用带有脚本标签的模块语法，并且浏览器（或任何您的 JS 环境）将处理加载：

<script type="module">
  import x from 'y';
  import a from 'b';

  ...
</script>

或

<script type="module" src="y.js"></script>

目前，浏览器处于不同的实现点：

请随时纠正我或扩展此答案。

How actually ECMA-Script 2015 (and above) module loading through import statement works behind the scenes?