개요

여기에는 두 개의 JavaScript 파일이 있습니다.

magica.js

const magica = {
  madoka: '鹿目 まどか',
  sayaka: '美樹 さやか',
  mami: '巴 マミ',
  kyoko: '佐倉 杏子',
  homura: '暁美 ほむら'
};

export default magica;

kyubey.js

import { mami, sayaka } from './magica.js';

console.log(mami); // 巴 マミ
console.log(sayaka); // 美樹 さやか

$ babel-node --version
5.8.23

$ babel-node kyubey.js
巴 マミ
美樹 さやか

이 kyubey.js 의 import 문입니다만, 오브젝트를 분할 대입 하는 때와 같이 1 , 오브젝트로부터 임의의 값만을 꺼낼 수 있으므로, 편리하고 자주(잘) 사용하고 있었습니다. 다음과 같은 이미지입니다.

const magica = {
  madoka: '鹿目 まどか',
  sayaka: '美樹 さやか',
  mami: '巴 マミ',
  kyoko: '佐倉 杏子',
  homura: '暁美 ほむら'
};

({ mami, sayaka } = magica);

console.log(mami); // 巴 マミ
console.log(sayaka); // 美樹 さやか

그런데 Babel 6으로 업데이트하면 kyubey.js가 구문 오류로 작동하지 않습니다.

$ babel-node --version
6.22.2

$ babel-node kyubey.js
undefined
undefined

undefined …이런 건 너무 있어

원인

처음에는 버전 업을 잘못해서 Babel 환경이 이상하게 되어 버렸는지 생각했습니다만, 그렇지 않았습니다. 아무래도, 앞서 소개한 import 문장의 작성 방법이 ECMASCript 의 사양에 등을 쓴 쓰기 방법이었던 것 같습니다.

Babel 6 에서 이 쓰는 방법이 제거될 때까지의 경위는 아래의 공식 issue 에 있었습니다.

babel/babel > Issues > #2212 Kill CommonJS default export behaviour

해결책

default export를 사용하는 경우

magica.js

const magica = {
  madoka: '鹿目 まどか',
  sayaka: '美樹 さやか',
  mami: '巴 マミ',
  kyoko: '佐倉 杏子',
  homura: '暁美 ほむら'
};

export default magica;

kyubey.js

import magica from './magica.js';

const { mami, sayaka } = magica;

console.log(mami);
console.log(sayaka);

$ babel-node --version
6.22.2

$ babel-node kyubey.js
巴 マミ
美樹 さやか

일단 객체에 import 그런 다음 변수에 분할 할당합니다.

named export를 사용하는 경우

magica.js

const madoka = '鹿目 まどか';
const sayaka = '美樹 さやか';
const mami = '巴 マミ';
const kyoko = '佐倉 杏子';
const homura = '暁美 ほむら';

export { madoka, sayaka, mami, kyoko, homura };

kyubey.js

import { mami, sayaka } from './magica.js';

console.log(mami);
console.log(sayaka);

$ babel-node --version
6.22.2

$ babel-node kyubey.js
巴 マミ
美樹 さやか

또는 export 모든 것을 읽는 경우,

kyubey.js

import * as magica from './magica.js';

const { mami, sayaka } = magica;

console.log(mami);
console.log(sayaka);

$ babel-node --version
6.22.2

$ babel-node kyubey.js
巴 マミ
美樹 さやか

요약

Babel 5 에서 export default 한 객체를 분할 대입의 기법으로 import 하고 있는 코드를 쓰고 있으면 Babel 6 에서 거동이 바뀌므로, 만약 낡은 버젼의 Babel 를 사용하고 있는 경우는 재작성합시다.

참고

Misunderstanding ES6 Modules, Upgrading Babel, Tears, and a Solution – Medium

babel/babel > Issues > #2212 Kill CommonJS default export behaviour

babel/babel > Issues > #3049 에서 "That's not destructuring, it just has similar syntax. It's an ImportsList."라고 언급되었습니다. ↩