[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか？

質問

当たり前のようですが、ES6で1つのモジュールをインポートする際に中括弧を使用するタイミングについて少し混乱していることに気づきました。例えば、私が取り組んでいるReact-Nativeプロジェクトでは、以下のファイルとそのコンテンツがあります。

ファイル名 初期状態.js

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

TodoReducer.jsでは、中括弧を付けずにインポートする必要がありますね。

import initialState from './todoInitialState';

を囲むと initialState を中括弧で囲むと、次の行のコードで次のようなエラーが発生します。

未定義のプロパティtodoを読み取ることができません。

ファイル TodoReducer.js :

export default function todos(state = initialState.todo, action) {
    // ...
}

同様のエラーは、中括弧のある私のコンポーネントにも起こります。複数のコンポーネント/モジュールをインポートする場合は、明らかに中括弧で囲む必要があるので、1つのインポートに中括弧を使用する場合はどうすればいいのか悩んでいました。

のスタックオーバーフローの投稿は こちら は私の質問には答えてくれません。 いつ をインポートする際に中括弧を使うべきかどうか。 シングル あるいは、ES6では単一のモジュールのインポートに中括弧を使うべきではない（中括弧が必要な単一のインポートを見たことがあるので、これは明らかに違う）。

どうすればいいですか？

これは デフォルトインポート :

// B.js
import A from './A'

の場合のみ動作します。 A には デフォルトのエクスポート :

// A.js
export default 42

この場合、インポート時にどのような名前を付けても問題ありません。

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

なぜなら、それは常に デフォルトの輸出 の A .

これは という名前のインポート A :

import { A } from './A'

の場合のみ動作します。 A が含まれています。 という名前のエクスポート A :

export const A = 42

この場合、名前は重要です。 特定のものをその輸出名で :

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

これらを動作させるためには export という名前の対応する に A :

// A.js
export const A = 42
export const myA = 43
export const Something = 44

モジュールが持つことができるのは 1つのデフォルトエクスポート が、しかし 好きなだけ名前付きエクスポートができる (0、1、2、または多数)。それらをまとめてインポートすることができます。

// B.js
import A, { myA, Something } from './A'

ここでは、デフォルトのエクスポートを A という名前付きエクスポート、および myA と Something それぞれ

// A.js
export default 42
export const myA = 43
export const Something = 44

また、インポート時にすべて異なる名前を割り当てることも可能です。

// B.js
import X, { myA as myX, Something as XSomething } from './A'

デフォルトのエクスポートは、通常モジュールから得られると期待されるものに使用される傾向があります。名前付きエクスポートは、便利かもしれませんが、必ずしも必要ではないユーティリティに使用される傾向があります。しかし、どのようにエクスポートするかはあなた次第です。例えば、あるモジュールはデフォルトのエクスポートを全く持たないかもしれません。

これは、ESモジュールの素晴らしいガイドで、デフォルトと名前付きエクスポートの違いを説明しています。