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

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

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

2 个答案: