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标志编译代码。相反，如果您使用init.js标记编译--script，则不会将init代码封装为模块，并且您不需要调用System.get用手。只是想一想。

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

1 个答案: