주요 변경 사항: Babel 6 내보내기 기본 동작

Babel 6이 출시되면서 기본 내보내기 처리 방법에 중요한 변경 사항이 구현되었습니다. . Babel은 이전에 module.exports =exports["default"] 행을 추가했지만 이 기능은 제거되었습니다.

이 수정으로 인해 모듈 가져오기 구문이 변경되어야 합니다. 이전에는 레거시 구문을 사용하여 코드를 작성했습니다.

var foo = require('./foo');
// use foo

이제 다음 구문을 사용해야 합니다:

var foo = require('./foo').default;
// use foo

이 조정은 사소해 보일 수 있지만 이전 내보내기 메커니즘에 상당한 코드 종속성이 있는 프로젝트에 문제가 될 수 있습니다.

해결 방법

레거시 내보내기 동작이 필요한 경우 CommonJS를 직접 사용하는 것이 좋습니다. 또는 사용자 정의 플러그인을 사용하여 원하는 호환성을 제공할 수 있습니다. 이 플러그인의 기능은 Babel 6에서 제거된 동작을 미러링하여 변환된 출력에 module.exports =exports["default"] 행을 추가합니다.

이름이 지정된 내보내기의 영향

자동 module.exports 할당을 제거하면 ES6 의미 체계가 개선되고 잠재적인 혼란이 방지된다는 점은 주목할 가치가 있습니다. 명명된 내보내기는 이제 실수로 기본 내보내기에 할당되지 않고 예상대로 작동합니다.

예

다음 코드는 Babel 5와 Babel 6 내보내기 동작의 차이점을 보여줍니다.

// Input
const foo = {}
export default foo

Babel 5 출력

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

Babel 6 출력

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

볼 수 있듯이 출력의 유일한 차이점은 Babel 6에 module.exports =exports["default"]가 없다는 것입니다.