将ES6类与Webpack捆绑在一起。有没有办法提升扩展类？

Question

Webpack可以提升扩展类吗？

我正在使用Webpack和Babel来捆绑和转换一堆类，每个类都来自一个单独的文件。

我的Webpack条目文件是一个index.js文件，其中包含按名称

排序的每个类的import语句

index.js：

x 120 x

a.js：

import classA from './a';
import classB from './b';
import classC from './c';
import classD from './d';
...

我的问题是类按名称排序导入，因此export class classA extends classD { constructor(...) { super(...); } } 将在classD之后声明，并且会因为javascript提升/初始化规则而中断程序。

所以我的问题是，Webpack是否有办法对类进行排序并按顺序排列？或者是我手动对它们进行排序的唯一选择？

Answer 1

Webpack不是简单地将所有导入放在一个文件中，而是将它们作为模块保存。每个模块/文件都需要导入它所依赖的所有东西，所以如果你只是在Node中运行那个模块（如果需要的话，在进行转换后）就可以了。您的a.js不能自行运行，因为未定义classD。正确的方法是在a.js中导入它：

import ClassD from './d';

export default class ClassA extends ClassD {
  constructor(...) {
    super(...);
  }
}

import x from './file'将默认导出导入为x，因此您希望将export default用于您的课程。

您可能会担心从多个位置导入文件会多次包含它，但事实并非如此，它包含一次，并且该模块的每次导入都将引用捆绑中的相同文件。

注意：JavaScript中的约定是对类使用 PascalCase 。