Agrupar las clases de ES6 con Webpack. ¿Hay una manera de levantar clases extendidas?

¿Webpack puede levantar clases extendidas?

Estoy usando Webpack y Babel para agrupar y transstackr un montón de clases, cada una de un archivo separado.

Mi archivo de entrada de Webpack es un archivo index.js que contiene declaraciones de importación de cada clase ordenada por nombre,

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

Mi problema es que las clases se importan ordenadas por nombre, por lo que classD se declarará después de classA y romperá el progtwig debido a las reglas de elevación / inicialización de javascript.

Entonces, mi pregunta es si hay un modo para que Webpack ordene las clases y las ponga en el orden necesario. ¿O es mi única opción ordenarlas manualmente?

Webpack no solo pone todas las importaciones en un solo archivo, sino que las mantiene como módulos. Cada módulo / archivo necesita importar todo de lo que depende, por lo que funcionaría si solo ejecutara ese módulo en el Nodo (después de realizar la transposición si es necesario). Su a.js no funciona por sí mismo porque classD no está definido. La forma correcta es importarlo en a.js :

 import ClassD from './d'; export default class ClassA extends ClassD { constructor(...) { super(...); } } 

import x from './file' importa la exportación predeterminada como x , por lo que desea utilizar la export default para sus clases.

Es posible que le preocupe que importar un archivo desde varios lugares lo incluya varias veces, pero ese no es el caso, se incluye una vez y cada importación de ese módulo se referirá al mismo en el paquete.

Nota: la convención en JavaScript es usar PascalCase para las clases.