ES6-Klassen mit Webpack bündeln. Gibt es eine Möglichkeit, erweiterte Klassen zu hissen?

Question

Kann Webpack erweiterte Klassen hissen?

Ich benutze Webpack und Babel, um eine Reihe von Klassen zu bündeln und zu transpilieren, jeweils aus einer separaten Datei.

Meine Webpack Eintrag Datei ist eine Datei index.js Import-Anweisungen jeder Klasse enthält nach Namen geordnet,

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

Mein Problem ist, dass die Klassen nach Namen geordnet importiert werden, so dass classD nach classA deklariert wird und das Programm wegen Javascript hoistin brechen wird g/Initialisierungsregeln.

Also meine Frage ist, ob es eine Möglichkeit für Webpack gibt, die Klassen zu sortieren und sie in die notwendige Reihenfolge zu bringen? Oder ist meine einzige Wahl, sie manuell zu sortieren?

Answer 1

Webpack fasst nicht einfach alle Importe in einer Datei zusammen, sondern speichert sie als Module. Jedes Modul/jede Datei muss alles importieren, von dem es abhängt, also würde es funktionieren, wenn Sie nur dieses Modul in Node ausführen (nach dem Transpilieren, falls erforderlich). Ihr a.js funktioniert nicht von selbst, weil classD nicht definiert ist. Der richtige Weg ist es in a.js zu importieren:

import ClassD from './d'; 

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

import x from './file' den Standard-Export als x importiert, so dass Sie wollen export default für Ihre Klassen verwenden.

Sie könnten besorgt sein, dass das Importieren einer Datei von mehreren Orten es mehrmals enthält, aber das ist nicht der Fall, es ist einmal enthalten und jeder Import dieses Moduls wird sich auf das gleiche im Bundle beziehen.

Hinweis: Die Konvention in JavaScript besteht darin, PascalCase für Klassen zu verwenden.