☰

ES6 の `export const` と `export default` の違い 質問する

tag-icon • tag-icon javascript ecmascript-6 es6-modules
ES6 の `export const` と `export default` の違い 質問する

export default以下の操作を実行するだけでインポートできるという点以外に、これら 2 つに大きな違いがあるかどうかを判断しようとしています。

import myItem from 'myItem';

そして、これを使用してexport const次のことができます:

import { myItem } from 'myItem';

これ以外に違いや使用例はありますか?

ベストアンサー1

これは、名前付きエクスポートとデフォルト エクスポートの違いです。これexport constは、const 宣言または宣言をエクスポートする名前付きエクスポートです。

強調しておきますが、ここで重要なのはexportキーワードとしてconstconst 宣言または宣言を宣言するために使用されます。exportクラス宣言や関数宣言などの他の宣言にも適用できます。

デフォルトのエクスポート ( export default)

ファイルごとに 1 つのデフォルト エクスポートを設定できます。インポートするときは、次のように名前を指定してインポートする必要があります。

import MyDefaultExport from "./MyFileWithADefaultExport";

好きな名前を付けることができます。

名前付きエクスポート ( export)

名前付きエクスポートを使用すると、ファイルごとに複数の名前付きエクスポートを持つことができます。次に、必要な特定のエクスポートを中括弧で囲んでインポートします。

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

または、同じステートメント内で名前付きインポートと一緒にデフォルトを使用することも可能です。

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

名前空間のインポート

ファイルからすべてをオブジェクトにインポートすることも可能です。

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

ノート

  • 構文は、使用例がより一般的であるため、デフォルトエクスポートの方がやや簡潔であるとみなされます（議論はここでご覧ください）。

  • デフォルトのエクスポートは、実際には名前付きエクスポートなのでdefault、名前付きインポートを使用してインポートできます。

    import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

おすすめ記事