객체에서 destructuring 반응 만들-응용 프로그램

Question

을 나는 다음과 같은 수출이 파일이라고하는 index.js에서 :

import { foo, bar } from './index' 

console.log(foo, bar) -> undefined, undefined 

: 파일 home.js에서

export default { 
    foo: true, 
    bar: false 
} 

나중에 내가 다음과 같은 일을 해요을

내가 다음과 같은 모든 것을 가져 오는 경우 :

import index from './index' 

console.log(index) -> { foo: true, bar: false } 

왜 이런 일이 일어 났는지 설명 할 수 있습니까? 내가 뭔가 잘못하고있는거야?

내가 사용하고 있습니다 :

> 생성 - 반응 - 응용 프로그램 당신이 무엇 -V 1.0.3

Answer 1

는 named exports이있다, 없다 destructuring.

당신은하지로, 등을 수출 가지고 default export :

// this will export all of the defined properties as individual 
// named exports, which you can pick-and-choose when importing 
// using a similar syntax to destructuring 
const foo = true, bar = false; 
export { 
    foo, 
    bar 
} 

// imported exports named 'foo' and 'bar' 
import { foo, bar } from './my-file'. 

당신은 default 수출을 지정하는 경우, 당신은 중괄호없이 가져올 때 default를 내보낼 키워드 다음 어떤 :

을

// this exports an object containing { foo, bar } as the default export 
export default { 
    foo: true, 
    bar: false 
} 

// imported without {} 
import objectContainingFooBar from './my-file';