エクスポート const とエクスポート デフォルト: どの ES6 モジュール エクスポートをいつ使用するか?

ES6 のエクスポート const とエクスポート デフォルトを使用したエクスポート

JavaScript ES6 モジュールでは、値をエクスポートする主な方法が 2 つあります。 const とエクスポートのデフォルト。これらのエクスポート メカニズムは、独特の機能と使用例を提供します。

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

export const は、名前付き定数をエクスポートするために使用されます。これにより、それぞれが独自の一意の識別子を持つ複数の特定の値をモジュールからエクスポートできます。このようなエクスポートをインポートするには、中括弧内に目的の変数名を指定します。

// Exporting
export const myItem = 'Exported value';

// Importing
import { myItem } from 'myItem';

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

エクスポート デフォルトは、デフォルトのエクスポートに使用されます。価値。これはモジュールごとに 1 回のみ実行できます。デフォルトのエクスポートをインポートするときは、任意のエイリアスを付けることができます。

// Exporting
export default { name: 'John Doe', age: 30 };

// Importing
import MyDefaultExport from 'myItem';

ユースケース

次のリストは、エクスポート const を選択するための一般的なガイドラインを示しています。エクスポートのデフォルト:

• Namedエクスポート:

  • モジュールから複数の特定の値をエクスポートする必要がある場合は、export const を使用します。

• デフォルトのエクスポート:

  • エクスポートする場合は、エクスポートのデフォルトを使用します。モジュールからの単一のプライマリ値。
  • 特定のインポートを予期するレガシー コードをサポートする必要がある場合は、エクスポート デフォルトを使用します (例: デフォルト エクスポートとして React-dom をインポートする)。

追加機能

コア機能に加えて、エクスポートconst とエクスポートのデフォルトは、いくつかの追加機能を提供します。

• 名前空間のインポート: import * as を使用して、モジュールからすべてのエクスポートをオブジェクトとしてインポートできます。
• 部分インポート: 同じ名前付きインポートとデフォルトのインポートを組み合わせて使用​​できます。ステートメント。
• インポートの名前変更: as キーワードを使用して、インポートされた値の名前を変更できます。

エクスポートのデフォルトは、次の名前を持つ名前付きエクスポートの特殊なケースであることに注意してください。 "デフォルト。"これにより、デフォルト値をインポートする方法をある程度柔軟に行うことができます。

以上がエクスポート const とエクスポート デフォルト: どの ES6 モジュール エクスポートをいつ使用するか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。