用Webpack捆绑ES6类。有没有办法提升扩展类？

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 hoistin而中断程序g /初始化规则。

所以我的问题是，如果有一种方法让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。