用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。