ecmascript-6 - 在声明使它们未定义之前导出对象和类

Question

我尝试重复 Mozilla Hacks 中的示例( 导出列表 副标题):

//export.js
export {detectCats, Kittydar};
function detectCats() {}
class Kittydar {}

//import.js
import {detectCats, Kittydar} from "./export.js";
console.log(detectCats); // function detectCats() {}
console.log(Kittydar); // undefined

糟糕:Kittydar 未定义(顺便说一句，问题与简单的 Object 相同)。

但是如果我把 export在 Kittydar 之后声明没关系:

//export.js
class Kittydar {}
export {Kittydar};

//import.js
import {Kittydar} from "./export.js";
console.log(Kittydar); // function Kittydar() {_classCallCheck(this, Kittydar);}

这是文章中的错字吗？

我用 babel 转译这个并与 browserify 捆绑.然后我将输出包包含在通常的 .html 中文件(带有 <script> 标签)。

Answer 1

这个标准很难遵循，但是文章正确 .此代码适用于 es6draft在 SpiderMonkey shell 中:函数和类都在 console.log 时初始化。调用运行。

这是它应该如何工作的细节:

JS 引擎解析 import.js。它看到 import声明，然后它会加载 export.js 并解析它。

在实际运行任何代码之前，系统会创建两个模块范围并使用每个模块中声明的所有顶级绑定(bind)来填充它们。 (规范称之为 ModuleDeclarationInstantiation 。) A Kittydar绑定(bind)是在 export.js 中创建的，但目前尚未初始化。

在 import.js 中，一个 Kittydar导入绑定(bind)已创建。它是 Kittydar 的别名export.js 中的绑定(bind)。

export.js 运行。类已创建。 Kittydar被初始化。

import.js 运行。两个console.log()通话工作正常。

Babel 对 ES6 模块的实现是非标准的。

我认为这是故意的。 Babel 旨在将 ES6 模块编译为与您选择的现有模块系统一起使用的 ES5 代码:您可以让它输出 AMD 模块、UMD、CommonJS 等。因此，如果您要求 AMD 输出，您的代码可能是 ES6 模块，但是 ES5 输出是一个 AMD 模块，它的行为就像一个 AMD 模块。

Babel 可能更符合标准，同时仍能很好地与各种模块系统集成，但需要权衡取舍。