运行从 ecmascript 6 模块加载的函数答案

【问题标题】：Run function loaded from ecmascript 6 module运行从 ecmascript 6 模块加载的函数
【发布时间】：2014-10-19 19:34:45
【问题描述】：

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

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

【问题讨论】：

您只是声明它们，而不是要求它们。
尝试将 type="module" 添加到您的脚本标签？
@BrianGenisio 这是一个错字，在我的代码中我有类型模块，没有它脚本会抛出系统未定义的错误。
@Bergi 我怎样才能要求他们？

标签： javascript module amd ecmascript-6 traceur

【解决方案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。只是想一想。

【讨论】：