Webpack 가져 오기는 가져 오기 순서에 따라 정의되지 않은 것을 반환합니다.

나는 webpack + babel을 사용하고 있습니다. 다음과 같은 세 개의 모듈이 있습니다.

// A.js

// some other imports here
console.log('A');
export default 'some-const';

// B.js

import someConst from './A';
console.log('B', someConst);
export default 'something-else';

// main.js

import someConst from './A';
import somethingElse from './B';
console.log('main', someConst);

main.js가 실행 되면 다음이 표시됩니다.

B undefined
A
main some-const

나는에서 수입 바꿀 경우 main.js, B첫 번째가되기를, 내가 얻을 :

A
B some-const
main some-const

어떻게 올 B.js얻을 undefined대신 첫 번째 버전의 모듈로? 뭐가 문제 야?

거의 하루 종일 문제를 좁히고 (일명 머리카락 잡아 당기기), 마침내 순환 의존성이 있다는 것을 깨달았습니다.

그것이 말하는 곳에 // some other imports here, A다른 모듈을 가져오고 C, 차례로 가져옵니다 B. A에서 처음으로 수입됩니다 main.js, 그래서 B은 "원"의 마지막 연결되는 끝, 그리고 웹팩 (또는 CommonJS 같은 환경, 노드와 같은 그 문제에 대해) 반환하여 단지 단락을 A의 module.exports, 아직도이다 undefined. 결국는 같게 some-const되지만의 동기 코드는 결국 대신 B처리하게 undefined됩니다.

코드 밖으로 이동함으로써, 순환 종속성을 제거 C받음에 따라이 B문제를 해결하고있다. Wish Webpack은 어떻게 든 나에게 이것에 대해 경고합니다.

편집 : 마지막 메모에서 @cookie가 지적했듯이 순환 종속성 감지를위한 플러그인 이 있습니다.이 문제를 [다시] 피하고 싶다면.