ES6メンバーのインポートが機能していないが、デフォルトのインポートは予想通り

Question

次のコードは動作します動作します。

// ./mwe/index.js 
let foo =() => 'foo'; 

const Bar = { 
    foo 
}; 

export default Bar; 

// ./index.js 
import Bar from './mwe'; 

console.log(Bar); // logs an object with a member foo that is a function 

しかし、これは動作しません：

// ./index.js 
import {foo} from './mwe'; 

console.log(foo); // logs undefined 

なぜ第2の変形解決はしていませんメンバーfoo正しく？

---

私はthe documentation

の次の文を解釈するには、モジュールの単一のメンバーをインポートします。 myMemberを現在のスコープに挿入します。モジュールはBarのようなオブジェクトをエクスポートする場合は、その後、私はその構文を使用してBarの個々のメンバーをインポートできるという意味として

import {myMember} from 'my-module'; 

。これはうまくいかないが、どうして？私は何の部分を誤解していますか？

Answer 1

インポートステートメントはオブジェクトを破棄しません。彼らはオブジェクトの破壊と非常によく似ていますが、それらは異なっています。

名前付きインポート "レベル1"深さ一部のモジュールexportsモジュール全体を表すオブジェクト。従ってimport {foo} from 'bar'はconst { foo } = require('bar')ではなく、const { foo } = require('bar').defaultを意味します。 Supported statements.

しかし、ここでもまた、オブジェクトの構造化ではない特殊な構文です。例えば

あなたはない行うことができます

import { foo: { bar } } from 'baz' // syntax error 

だからあなたはどちらか別の名前のエクスポートなどの輸出fooまたは

import Bar from './mwe' 

const { foo} = Bar 

を構造化代入のために別のステートメントを使用する必要が

import { foo: bar } from 'baz' // syntax error 

またはネストされた構造化代入

Answer 2

fooをエクスポートしていないので、export let foo =() => 'foo';に変更すると動作します。

Answer 3

export defaultを使用しました。つまり、バーのみがエクスポートされます。

エクスポートのデフォルトでは、彼の後に来る変数のみがエクスポートされます。