279

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

import myItem from 'myItem';

そして、export const私ができることを使用して:

import { myItem } from 'myItem';

これ以外に違いやユースケースはありますか?

4

7 に答える 7

422

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

強調する: ここで重要なのは、1 つまたは複数の const 宣言を宣言するために使用されるexportキーワードです。クラスや関数の宣言など、他の宣言にも適用できます。constexport

デフォルトのエクスポート ( 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";
    
于 2015-11-09T15:00:49.113 に答える
0

ブラウザがES6を使用していないという問題がありました。

私はそれを修正しました:

 <script type="module" src="index.js"></script>

type モジュールは、ブラウザーに ES6 を使用するように指示します。

export const bla = [1,2,3];

import {bla} from './example.js';

その後、動作するはずです。

于 2018-09-14T17:23:28.643 に答える