JavaScript模块中的循环依赖项（ES6）

Question

我最近一直在阅读和测试ES6模块，并使用了2ality和MDN的组合作为我的理解来源。

在我计划进行现代化的大型遗留JS网络应用程序中，我有循环依赖关系，但我找不到解决问题的方法。 我知道应尽可能避免循环依赖，迁移后的下一步将尽可能清理。

我的测试用例如下：

test.html：

<script type="module">
    import B from './B.js';

    console.log(B.moo());
</script>

B.js：

// B.js
import A from './A.js';

export default class B {
    static moo() {
        return A.boo();
    }
}

A.js：

// A.js
import B from './B.js';

export default class A extends B {
    static boo() {
        return "Boo";
    }
}

从上面开始，我基本上只有两件事情在继续：

1. B.moo()调用静态方法A.boo()
2. A扩展B

但是，上面的代码会导致错误： Uncaught ReferenceError: B is not defined at A.js:3

我认为ES6模块是静态解析的，错误是有道理的。但他们也（假设？）支持循环依赖。

经过多次搞乱后，我找到了一个有效的解决方案。但我想知道是否有更好的方式？

到目前为止，这是我的工作解决方案：

的test.html：

<script type="module">
    import A from './A.js';
    import B from './B.js';

    console.log(B.moo());
</script>

B.js：

import A from './A.js';

export const B = class B {
    static moo() {
        return A.boo();
    }
}

export {B as default};

A.js：

import B from './B.js';

export const A = class A extends B {
    static boo() {
        return "Boo";
    }
}

export {A as default};

Answer 1

经过一些搜索后，我发现了这篇文章：https://medium.com/@rohanjamin/using-scope-to-resolve-circular-dependency-dynamic-loading-issues-in-es6-2ef0244540fa - 我不确定为什么我之前的Google搜索没有遇到过它。

它与我正在使用的代码中的代码排列非常相似，似乎运行良好。我可以预见，树震动会有一些未来的问题，但我已经让Babel输出了一个循环依赖列表，我们可以在接下来的几个月内手动重构。