ES 6モジュールでの名前対デフォルトのエクスポート

ES 6構文を使用するJavaScriptモジュールには、2つの異なるタイプのエクスポートがあります.
彼らがどのようにインポートされるかと同様に彼らが宣言される方法の違いがあります.

名称エクスポート
名前付きのエクスポートを使用してモジュールからいくつかの変数をエクスポートできます.The export キーワードをエクスポートする各変数に使用できます.インポートするときは、object destructuring エクスポートされた変数を割り当てます.インポートされた変数は、エクスポートと同じ名前を使用する必要があります.

// foo.js

export const foo = () => {
  console.log("foo");
}

export const bar = 123;

foo.js つの名前のエクスポートがあります.foo and bar , 以下のような他のJavaScriptファイルからインポートできます.

// anotherComponent.js

// import the foo and bar named exports from foo.js
import { foo, bar } from "./foo";

// both variables can now be used
foo(); // logs 'foo' to the console
console.log(bar); // logs the number 123 to the console

名前付きのエクスポートは、モジュールからいくつかの変数をエクスポートおよびインポートするために使用できます.

名前付きエクスポートを使用する場合、インポートされた変数はエクスポートされた変数と同じ名前を使用する必要があります.

インポート変数の名前を変更する場合は、as キーワード

  import { foo as myVariable, bar } from "./foo";

  myVariable(); // logs 'foo' to the console

デフォルトエクスポート
あなたはモジュール内の1つのデフォルトのエクスポートを持つことができます.あなたはdefault どの変数がデフォルトのエクスポートであるかを指定するキーワード.既定のエクスポートをインポートするときは、変数の割り当てに任意の名前を使用できます.

// baz.js

const baz = () => {
  console.log("baz");
}

export default baz;

それでbaz.js は、デフォルトのエクスポートを定義している他のJavascriptファイルをインポートして使用することができますbaz 変数をインポートすることによって:

// anotherComponent.js

// import the default export from baz.js
import bazDefault from "./baz";

// the imported variable can now be used
bazDefault(); // logs 'baz' to the console

我々は正常にインポートしましたbaz 変数にbazDefault .

各モジュールは1つのデフォルトのエクスポートを持つことができます.

を使用してデフォルトのエクスポートを定義しますdefault キーワード.

デフォルトのエクスポートを使用する場合は、インポートする変数の名前を選択できます.選んだbazDefault , でも簡単に言えばよかったのにbaz , someVariable , or apples そして、それは完全に有効だったでしょう.

概要
つまり、ES 6での名前とデフォルトのエクスポートの違いと、どのように使用されるかです.
キーポイント

モジュールはいくつかの名前付きの輸出を持つことができます、しかし、1つのデフォルト輸出だけです.

インポート時に、名前付きのエクスポートで同じ名前を使用する必要がありますが、既定のエクスポートは任意の名前にインポートできます.