在网页中以编程方式使用 Traceur 加载 ES6 模块答案

【问题标题】：Programmatically loading a ES6 module with Traceur in web page在网页中以编程方式使用 Traceur 加载 ES6 模块
【发布时间】：2016-04-05 11:12:19
【问题描述】：

我一直在使用 Traceur 在 ES6 中开发一些项目。在我的 HTML 页面中，我包含了本地 Traceur 资源：

<script src="traceur.js"></script>
<script src="bootstrap.js"></script>

如果之后我在 HTML 中有一个模块，例如：

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

然后 Traceur 加载该模块，编译它，一切正常。

我现在想从另一个 ES6 模块中以编程方式将 ES6 模块添加到页面（原因有些复杂）。这是我的第一次尝试：

var module = document.createElement('script');
module.setAttribute('type', 'module');
module.textContent = `
    console.log('Inside the module now!');
`;
document.body.appendChild(module);

不幸的是，这不起作用，因为我猜 Traceur 不会监控添加的每个脚本标签的页面。

如何让 Traceur 编译和执行脚本？我想我需要在“traceur”或“$traceurRuntime”上调用一些东西，但我还没有找到一个好的在线文档来源。

【问题讨论】：

标签： ecmascript-6 traceur

【解决方案1】：

您可以使用 ES6 import 语句或 TraceurLoader API 加载其他模块以实现动态依赖。

来自Traceur Documentation的示例

function getLoader() {
  var LoaderHooks = traceur.runtime.LoaderHooks;
  var loaderHooks = new LoaderHooks(new traceur.util.ErrorReporter(), './');
  return new traceur.runtime.TraceurLoader(loaderHooks);
}
getLoader().import('../src/traceur.js',
    function(mod) {
      console.log('DONE');
    },
    function(error) {
      console.error(error);
    }
);

另外，似乎也支持 System.js 加载器

window.System = new traceur.runtime.BrowserTraceurLoader();
System.import('./Greeter.js');

【讨论】：

不应该import 返回一个承诺而不是接受回调吗？
这些示例引用了 JS 文件/URL。我想以编程方式构建一个模块（在 JS 中）并加载并执行它。
@Bergi 你是对的。但是我从文档中获取了这段代码，所以它似乎不再是实际的
@codedread 为什么需要以编程方式生成的模块？通常，它可以与eval() 结尾包含// @sourceMap 注释
正如我所说，原因很复杂:) - 我不认为 eval() 会工作，因为我需要它通过 Traceur 编译器（解析和加载这个导入的其他模块)

【解决方案2】：

动态模块加载是System 的（尚未标准化的）功能：

System.import('./repl-module.js').catch(function(ex) {
  console.error('Internal Error ', ex.stack || ex);
});

要完成这项工作，您需要 npm test 然后包含 BrowserSystem

<script src="../bin/BrowserSystem.js"></script>

您可能还想查看https://github.com/systemjs/systemjs，因为它对浏览器加载有很好的支持。

顺便说一句，System 对象最终可能会在 WHATWG 中标准化（可能使用不同的名称）：http://whatwg.github.io/loader/#system-loader-instance

【讨论】：

感谢 John - 在我构建 traceur-compiler 之后，我似乎没有 bin/BrowserSystem.js。
npm test 将构建它。