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

Question

Webpack 可以提升扩展 classes 吗？

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

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

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(...);
    }
}

我的问题是 classes 是按名称顺序导入的，因此 classD 将在 classA 之后声明，并且会因为 javascript 而中断程序 hoisting/initialization规则。

所以我的问题是 Webpack 是否有办法对 classes 进行排序并将它们按必要的顺序排列？还是我唯一的选择是手动对它们进行排序？

Answer 1

Webpack 不会简单地将所有导入放在一个文件中，而是将它们作为模块保存。每个 module/file 都需要导入它所依赖的所有东西，所以如果你只是运行 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 用于类。

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

Bundling ES6 classes with Webpack. Is there a way to hoist extended classes?

javascript

class

webpack

babeljs

hoisting

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

Bundling ES6 classes with Webpack. Is there a way to hoist extended classes?

javascript

class

webpack

babeljs

hoisting

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