次のようにしてインポートできる以外に、これら2つに大きな違いがあるかどうかを判断しようとしexport default
ています。
import myItem from 'myItem';
そして、export const
私ができることを使用して:
import { myItem } from 'myItem';
これ以外に違いやユースケースはありますか?
次のようにしてインポートできる以外に、これら2つに大きな違いがあるかどうかを判断しようとしexport default
ています。
import myItem from 'myItem';
そして、export const
私ができることを使用して:
import { myItem } from 'myItem';
これ以外に違いやユースケースはありますか?
これは、名前付きエクスポートとデフォルト エクスポートです。export const
const 宣言または宣言をエクスポートする名前付きエクスポートです。
強調する: ここで重要なのは、1 つまたは複数の const 宣言を宣言するために使用されるexport
キーワードです。クラスや関数の宣言など、他の宣言にも適用できます。const
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";
ブラウザがES6を使用していないという問題がありました。
私はそれを修正しました:
<script type="module" src="index.js"></script>
type モジュールは、ブラウザーに ES6 を使用するように指示します。
export const bla = [1,2,3];
import {bla} from './example.js';
その後、動作するはずです。