0

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

4

2 回答 2

1

您可以使用 ES6import语句或TraceurLoaderAPI 加载其他模块以实现动态依赖。

Traceur 文档中的示例

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');
于 2016-04-05T13:06:55.517 回答
0

动态模块加载是一个（尚未标准化的）特性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

于 2016-04-08T14:52:23.453 回答