0

我第一次尝试使用 ecmascript 6 模块系统。我使用 traceur 编译器。给定两个 es6 文件：

// app.js 
export function row() {
    alert('row');
}

// init.js
import { row } from 'public_js/app';
row();

Traceur（我使用 grunt-traceur 任务）将它们编译为：

// app.js
System.register("public_js/app", [], function() {
  "use strict";
  var __moduleName = "public_js/app";
  function row() {
    alert('row');
  }
  return {get row() {
      return row;
    }};
});

// init.js
System.register("public_js/init", [], function() {
  "use strict";
  var __moduleName = "public_js/init";
  var row = System.get("public_js/app").row;
  row();
  return {};
});

我通过简单的脚本标记将编译后的版本包含init.js到我的 HTML 中：

<script src="/path/to/compiled/init.js" type="module"></script>

什么也没有发生。我没有看到我的警报。我究竟做错了什么？

4

1 回答 1

2

通过将代码预编译为 ES5 的模块，您现在将其从 ES6 中自动导入/模块加载系统的世界中移除，您需要使用 ES5 机制来加载它。因此，您需要包含不带type=module属性的编译代码，然后get()包含启动世界其他地方的模块。

所以，以下对我有用：

<script src="/path/to/compiled/app.js"></script>
<script src="/path/to/compiled/init.js"></script>
<script>
  System.get('public_js/init');
</script>

由于您正在预编译代码，因此我建议您将所有已编译的代码连接到一个 JS 文件中，以避免将它们全部包含在内。

如果您使用 Traceur 而不先编译您的代码，那么您可以使用 ES6 结构。这包括type="module"和/或import 'module-name'。

编辑 进一步考虑这一点，app.js正确编译为模块。 init.js但是，不需要将其编译为模块。您正在使用--module标志编译代码。相反，如果您init.js使用--script标志进行编译，它不会将init代码封装为模块，并且您不需要System.get手动调用。只是想一想。

于 2014-10-20T15:17:11.030 回答