Webpack을 사용하여 ES6 클래스 묶음. 확장 수업을 호이스트하는 방법이 있습니까?

Question

Webpack 확장 클래스를 호이 스팅 할 수 있습니까?

나는 Webpack과 Babel을 사용하여 각각 별도의 파일에서 여러 묶음의 클래스를 묶어서 번역합니다.

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

내 웹팩 항목 파일은

하는 index.js 이름으로 정렬 된 모든 클래스의 import 문을 포함하는하는 index.js 파일입니다 내 문제는 클래스들이 이름순으로 정렬되도록 가져 오기 때문에, classA 후에 classD이 선언되고 javascript hoistin 때문에 프로그램이 중단됩니다. g/초기화 규칙.

Webpack이 클래스를 정렬하고 필요한 순서로 배치 할 수있는 방법이 있다면 제 질문은 무엇입니까? 아니면 수동으로 정렬 할 유일한 방법입니까?

Answer 1

Webpack은 단순히 모든 가져 오기를 하나의 파일로 묶는 것이 아니라 모듈로 유지합니다. 모든 모듈/파일은 의존하는 모든 것을 가져와야하기 때문에 노드에서 모듈을 실행하면 필요합니다. classD이 정의되어 있지 않으므로 a.js이 단독으로 작동하지 않습니다.

import ClassD from './d'; 

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

import x from './file'가 x로 기본 내보내기를 가져, 그래서 당신은 당신의 클래스에 대한 export default를 사용하려면 : 올바른 방법 a.js에 가져 오는 것입니다.

여러 위치에서 파일을 가져 오는 데 여러 번 포함될 수 있지만 걱정할 필요는 없습니다. 단 한 번만 포함되며 해당 모듈을 가져올 때마다 번들의 동일한 모듈을 참조하게됩니다.

참고 : JavaScript의 규칙은 PascalCase을 클래스로 사용하는 것입니다.