javascript - 运行从 ecmascript 6 模块加载的函数

Question

我第一次尝试使用 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>

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

Answer 1

通过将代码预编译为 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 标志编译代码。相反，如果您使用 --script 标志编译 init.js，它不会将 init 代码封装为模块，并且您不需要手动调用System.get。只是需要思考的事情。