es6 模块加载是如何工作的答案

【问题标题】：How does es6 module loading workes6 模块加载是如何工作的
【发布时间】：2014-07-03 00:14:50
【问题描述】：

我一直是reading about es6 module loaders，我只是不太明白它是如何工作的，希望有人能启发我。

在上面的实际工作流链接中，他们有一个这样的例子

System.import('app/app').then(function(app) {
  // app is now the Module object with exports as getters
});

没问题 - 我明白了。但后来我看到这样的东西

var $ = require('jquery');

然后真的很困惑。如果在此调用时 jquery 尚未传输到浏览器，会发生什么情况？线程只是旋转吗？浏览器是否会像 RequireJs 那样在后台解析您的脚本并将其改造成回调？它的功能是可配置的吗？有具体限制吗？

谁能给我一个纲要？

【问题讨论】：

您看到的第二件事是“CommonJS 模块加载”，而不是 ES6 afaik。确实是doesn't work (well) within require.js
@Bergi 它在 require.js 中运行良好，虽然我不喜欢它，但我当前项目中的某些页面使用带有 commonjs 样式的 requirejs。 Requirejs 扫描您的脚本以查找 commonjs 表达式并将其重写为 amd 格式，因此它仍在使用回调。但是，除非我弄错了，否则 es6 提案不使用回调 - 因此我很困惑。
是的，除了最简单的情况外，扫描脚本并不适用于所有情况。你能链接你所指的 ES6 提案的部分吗？ System.import 显然使用回调。
@Bergi 我找不到模块加载器提案期（尽管我一直在读到有一个并且接近完成）。但是 the es6 module loader 例如使用 import 语句在模块内部执行这种类型的操作。 The require statement above is from them systemjs README。我希望你能明白我为什么感到困惑。
您在寻找[1]、[2] 或[3]？ module 代码中出现的import 语句不是“同步的”，它们只是声明，它们的引用在模块加载期间被解析。要真正从脚本加载模块，您可以使用带有回调的System.import 之类的模块加载器。 System.js 的require 仅用于向后兼容 Commonjs。

【解决方案1】：

ES6 模块加载器将获取源代码，确定依赖项，并等待这些依赖项加载完毕后再执行模块。因此，当 require 执行时，依赖项已经坐在那里等待执行。

当通过 ES6 模块加载器加载 CommonJS 时，我们依赖于静态解析源代码中的 require 语句，并且只有在这些需求加载后才执行源代码。

这样我们就可以在浏览器中支持动态加载的CommonJS了。循环引用的处理方式与它们在 Node 中的处理方式相同。

解析 require 的正则表达式实际上非常可靠和快速，同时考虑了 cmets 和周围的标记。 SystemJS 使用的请参见https://github.com/systemjs/systemjs/blob/master/lib/extension-cjs.js#L10。

这种方法还有一个限制，那就是动态和有条件的 CommonJS 要求，例如 if (condition) require('some' + 'name') 没有被正确检测到。这是一个必要的成本，但要使 CommonJS 在浏览器中表现为完全异步的模块格式。

【讨论】：

在我写完这个问题后不久，我们收到了this awesome article on es6 modules。它直接与您所说的某些内容相矛盾（即正则表达式解析、循环依赖的工作方式以及动态要求的可用性）。似乎我的一些困惑至少是模块和模块加载器是单独的规范，只有前者是完整的。
ES6 模块加载器有两种解释模块的方式： 1. ES6 模块 2. 遗留模块格式我们可以通过称为“实例化”的钩子将遗留模块格式构建到 ES6 模块加载器中。你是对的 - ES6 模块加载确实有自己的循环引用样式，这与 CommonJS 不同。将 CommonJS 支持写入加载器时，可以允许完整的 CommonJS 样式的循环引用支持。在规范方面，模块加载器类行为本身在 ES6 规范中，单独的规范是确切的环境挂钩。