javascript - 使用 Webpack 捆绑 ES6 类。有没有办法提升扩展类(class)？

Question

Webpack 可以提升扩展类吗？

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

我的Webpack入口文件是一个index.js文件，其中包含按名称排序的每个类的导入语句，

index.js:

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

a.js:

export class classA extends classD {
    constructor(...) {
        super(...);
    }
}

我的问题是，类是按名称排序导入的，因此 classD 将在 classA 之后声明，并且会由于 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。

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

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