Javascript：使用未定义的类扩展类

考虑以下两个文件：

/* file A.js */
class A extends B {

}

/* file B.js */
class B {

}

如果我意外地以相反的顺序将这两个文件加载到浏览器中（

A.js

，然后

B.js

），javascript将抛出一个错误，即我正在尝试访问未定义的

B

我的问题是，我必须处理Javascript中定义的大约30-40个类，而现在，为了让所有类都正常工作，我必须记住我希望在页面中包含它们的顺序，否则Javascript将抛出一个错误，即我正在使用未定义的东西

---

我如何解决这个问题，这样我就不必一直记住这些类加载到网页中的顺序了？

我会使用模块来解决这个问题。模块明确声明它们的依赖关系，您只需引用页面中的顶级模块；其余的将根据依赖关系树加载。例如，

B.js

将是：

export class B {
    // ...
}

import { B } from "./B.js";
export class A extends B {
    // ...
}

那么

A.js

将是：

export class B {
    // ...
}

import { B } from "./B.js";
export class A extends B {
    // ...
}

也许您的主要入口点（

main.js

或其他什么）会有：

import { A } from "./A.js";
// ...

那么你的页面已经

<script type="module" src="./main.js"></script>

…并根据需要加载其他依赖项

---

这与浏览器中的本地模块支持一起工作，和/或如果使用像Rollup.js、Webpack、……/P>这样的集束器，我必须处理大约30-40个类，因为它们太乱了，而不是像样的代码IMO，而是考虑建立一个模块系统，比如Webpack@CertainPerformance当我们要进行生产时，我会将这些文件合并在一起，但即使使用Webpack，我也需要知道捆绑所有文件的顺序，不是吗？@AdamBaranyai-不是，如果您使用的是模块，则不需要。：-）您只需在模块中表示模块的依赖关系。然后Webpack（或类似的）为您构建依赖关系树。我考虑了模块，但基于

caniuse.com

数据，全球使用的浏览器中只有约85%支持模块。我认为失去15%的潜在客户是一个大问题。我开始阅读关于

Webpack

的内容，基于之前对我的问题的评论，我是否正确地假设Webpack将从文件中删除这些

模块

，并创建一个标准的javascript文件，该文件没有模块，因此我可以保持我的浏览器支持？@AdamBaranyai-对。Webpack和其他捆绑包可以创建不依赖浏览器中本机模块支持的捆绑包。这就是我所说的“本机模块支持..和/或如果您使用bundler”的意思。也许您可以就我的后续问题给我一个提示