Babel 6의 수정된 기본 내보내기 동작: 편의성에서 의미론적 일관성으로의 전환

획기적인 변화로 Babel 6은 기본값 내보내기, 이전 CommonJS에서 영감을 받은 동작에서 엄격한 ES6 원칙으로의 전환을 도입합니다. 이러한 변화는 개발자에게 기회와 과제를 동시에 가져왔습니다.

이전에 Babel은 기본 내보내기 선언에 "module.exports =exports['default']" 행을 추가하여 개발자가 "require( './foo')"를 직접적으로 사용합니다. 그러나 Babel 6에서는 이러한 관행이 중단되었습니다. 이제 기본 내보내기에 액세스하려면 "require('./foo').default"라는 명시적인 명명 규칙이 필요합니다.

의미 및 해결 방법

이 변경으로 인해 이전 동작에 의존하는 프로젝트에서 코드 수정이 필요합니다. ES6 가져오기/내보내기 구문을 채택하는 것이 많은 경우에 바람직하지만 일부 레거시 코드에는 대체 솔루션이 필요할 수 있습니다.

수동 수정 없이 이전 기능을 유지하려면 "babel-plugin-add-module- 내보내기' 플러그인. 이 플러그인은 "module.exports =exports['default']" 행을 다시 삽입하여 Babel 6 이전 내보내기 메커니즘을 에뮬레이트합니다.

또는 ES6에서 다르게 동작하는 명명된 내보내기 문제가 발생하는 개발자는 다음을 수행할 수 있습니다. 모듈 객체 재정의를 방지하기 위해 기본이 아닌 내보내기를 명시적으로 내보냅니다.

예:

입력:

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(및 es2015 플러그인)으로 출력:

"use strict";

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

결론

Babel 6의 수정된 기본 내보내기 동작은 ES6 의미를 준수하고 일관성을 촉진하며 혼란을 방지합니다. 일부 코드 조정이 필요하지만 궁극적으로 최신 JavaScript 표준 및 관행을 채택하는 데 기여합니다.