在网页中以编程方式加载带有Traceur的ES6模块

Question

我一直在使用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’上调用一些东西，但我还没有找到一个很好的在线文档来源。

Answer 1

您可以使用ES6 import语句或用于动态依赖的TraceurLoader应用编程接口加载其他模块。

来自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');

Answer 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中标准化(可能使用不同的名称