import 대상 해체 실패 문제

문제.


es6 문법의 해체 값에 익숙해져서 import에 도입된 대상에 대해 해체 값을 할 때 대상이 undefined로 변한 것을 발견했다.

오류 예

// static.js
let foo =  "foo"
let bar = "bar"
let obj = {foo, bar}
export default obj

// main.js
import { foo, bar } from "./static"
console.log(foo) // undefined
console.log(bar) // undefined

import obj from "./static"
console.log(obj.foo) // foo
console.log(obj.bar) // bar

까닭


export default 문법은 bebebel의 뜻을 바꾼 후 작용역을 잃어버립니다. 코드는 다음과 같습니다.
export default {
  host: 'localhost',
  port: 80
}

babel 번역 후
module.exports.default = {
  host: 'localhost',
  port: 80
}

솔루션

// main.js
import { foo, bar } from "./static"

// static.js
let foo =  "foo"
let bar = "bar"
export { foo, bar }

END

좋은 웹페이지 즐겨찾기