JavaScript模块(ES6)中的循环依赖性

Question

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

在我打算现代化的大型遗产JS Web应用中，我有循环依赖性，我没有找到解决问题的解决方案。我知道应该尽可能避免循环依赖性，而迁移后的下一步将是尽可能清楚的。

我的测试案例如下：

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";
    }
}

从上面，我本质上只有2件事正在进行：

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-corlove-cirvell-dementency-dymanic-loading-sissues-sissues-sissues-sissues-sissues-sissues-sissues-sissues-sissues-sissues-issues-siss-IN-ES6-2 FEF0244540FA-不确定为什么我在以前的Google搜索中没有遇到它。

它与我合作的代码中的代码安排非常相似，而且似乎运行良好。我可以预见，摇摇欲坠会有一些未来的问题，但是我有babel来输出未来几个月我们可以手动重构的循环依赖性列表。