ES 6,importでカッコ'{}'を正しく使う方法

ES 6の前に、コミュニティはいくつかのモジュールロードスキームを制定し、最も主要なのはCommonJSとAMDの2種類である.前者はサーバ、後者はブラウザに使用されます.ES 6は言語標準の面で、モジュール機能を実現し、しかもかなり簡単に実現され、CommonJSとAMD規範に完全に取って代わることができ、ブラウザとサーバーで通用するモジュールソリューションとなっている.
ここでは、import構文参照モジュールを使用するときに、{}を正しく使用する方法について説明します.B.jsがあり、import構文参照モジュールA.jsを使用する場合は、次のように書くことができます.

// B.js
import A from './A'

上記のコードが有効になる前提は、次のA.jsにデフォルトでエクスポートされたexport default構文がある場合にのみ有効になります.つまり、

// A.js
export default 42

このようなモジュールを参照するために{}を使用しない場合、importモジュールの命名は任意であり、すなわち、以下の3つの参照命名が正しい.

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

A.jsのデフォルトのexport defaultに常に解析されるからです.
次に、カッコ名を使用して{A}を導入します.

import { A } from './A'

上記のコードが有効になる前提は、モジュールA.jsの中に、A.jsとして導出されたAと命名されたコードが以下のようにある.

export const A = 42

さらに、命名導出が明示的に宣言された後、export nameにおいてjs参照モジュールが使用される場合、{}のモジュール命名は、以下のように意味がある.

// B.js
import { A } from './A'                 //   ，  A.js     A export
import { myA } from './A'               //   ！  A.js      myA export
import { Something } from './A'         //   ！  A.js      Something export

上記のコードを正しく実行するには、各ネーミングエクスポートを明確に宣言する必要があります.

// A.js
export const A = 42
export const myA = 43
export const Something = 44

ps:1つのモジュールにはデフォルトのエクスポートimportしかありませんが、任意の名前のエクスポート(0、1、複数)があります.次のようにして、一度にインポートすることもできます.

// B.js
import A, { myA, Something } from './A'

ここでは、インポートのデフォルトエクスポートexport defaultと、名前付きエクスポートAとmyAを使用します.
インポート時にインポートの名前を変更することもできます.

import X, { myA as myX, Something as XSomething } from './A'

まとめ:モジュールのデフォルトのエクスポートは、通常、モジュールから所望のコンテンツを取得するために使用されます.ネーミングエクスポートは、いくつかの有用な共通のメソッドに使用されますが、これらのメソッドは必ずしも必要ではありません.
回転:https://blog.csdn.net/function__/article/details/79040111
义齿
2つのエクスポートについて説明します

exportとexport defaultは、定数、関数、ファイル、モジュールなどの

をエクスポートするために使用することができる.

ファイルまたはモジュールのうち、export、importは複数あり、export defaultは

のみである.

はexport方式でエクスポートされ、インポート時に{}を追加し、export defaultは

を必要としません.

exportは変数式を直接エクスポートできますが、export defaultはできません.