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輸出了一系列循環依賴關系，我們可以在接下來的幾個月中手動重構這些依賴關系。