ES 6 module exportとimport

1、なぜモジュール概念があるのか
  の歴史上、JavaScriptにはモジュール(module)システムがなく、大きなプログラムを互いに依存する小さなファイルに分割することができず、簡単な方法で組み立てることができませんでした.他の言語には、Rubyのrequire、Pythonのimport、さらにはCSSにも@importがあるが、JavaScriptのサポートはなく、大規模で複雑なプロジェクトの開発に大きな障害をもたらしている.
  ES 6の前に、コミュニティはいくつかのモジュールのロード方案を制定して、最も主要なのはCommonJSとAMDの2種類があります.前者はサーバ、後者はブラウザに使用されます.ES 6は言語標準の面で、モジュール機能を実現し、しかもかなり簡単に実現され、CommonJSとAMD規範に完全に取って代わることができ、ブラウザとサーバーで通用するモジュールソリューションとなっている.
  ES 6モジュールの設計思想は,コンパイル時にモジュールの依存関係,および入出力の変数を決定できるようにできるだけ静的化することである.CommonJSとAMDモジュールは、実行時にしか確認できません.たとえば、CommonJSモジュールはオブジェクトであり、入力時にオブジェクト属性を検索する必要があります.
2、exportエクスポートモジュール
export構文宣言は、関数、オブジェクト、指定ファイル(またはモジュール)の元の値をエクスポートするために使用されます.
注意:nodeではexportsを使用していますので、混同しないでください.
exportには2つのモジュールのエクスポート方法があります.ネーミングエクスポート(名前エクスポート)とデフォルトエクスポート(定義エクスポート)です.ネーミングエクスポートは各モジュールで複数できますが、デフォルトエクスポートは各モジュールで1つだけです.

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

name 1…nameN－導出された「識別子」.エクスポート後、この識別子を使用して別のモジュールでimport参照

を使用できます.

default-モジュールのデフォルトのエクスポートを設定します.設定後、importは「識別子」でデフォルトのインポートを直接参照しません.この場合、importコマンドの後ろにカッコは使用されません.

*継承モジュールを継承し、継承モジュールのすべてのメソッドと属性

をエクスポートします.

as-名前変更エクスポート識別子

from-既存のモジュール、スクリプトファイル...から

をエクスポート
名前付きエクスポート
 モジュールはexport接頭辞キーワードによってエクスポートオブジェクトを宣言することができ、エクスポートオブジェクトは複数であってもよい.これらの書き出しオブジェクトは、名前付き書き出しと呼ばれる名前で区別されます.

export { myFunction }; //           
export const foo = Math.sqrt(2); //       
export function multiply(x, y) {
  return x * y;
};

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

*とfromキーを使用して、モジュールの継承を実現できます.

export * from 'article';

モジュールのエクスポート時に、モジュールのエクスポートメンバーを指定できます.エクスポート・メンバーは、クラス内のプライベート・オブジェクトとみなすのではなく、クラス内のパブリック・オブジェクトとみなすことができます.

var name = 'IT  ';
var domain = 'http://itbilu.com';
export {name, domain}; //      {name:name,domain:domain}

モジュールのエクスポートでは、asキーを使用してエクスポートメンバーの名前を変更できます.

var name = 'IT  ';
var domain = 'http://itbilu.com';
export {name as siteName, domain};

次の構文に重大なエラーがあることに注意してください.

//     
export 1; //      
var a = 100;
export a;

  exportインタフェースをエクスポートする際には、モジュール内部の変数と一つ一つ対応する関係を持たなければならない.直接エクスポート1は何の意味もありません.importのときに変数が対応することはできません.
  export aは成立しているように見えますが、aの値は数字であり、解構を完了することはできませんので、export{a}の形式で書かなければなりません.aがfunctionに割り当てられても許されない.また、ほとんどのスタイルでは、モジュールの最後にexportですべてのインタフェースをエクスポートすることをお勧めします.たとえば、次のようにします.

export {fun as default,a,b,c};

次は正しい書き方です.

//    
export var m = 1;
//    
var m = 1;
export {m};
//    
var n = 1;
export {n as m};

同様に、functionやclassの出力も、このような書き方を守らなければなりません.

//   
function f() {}
export f;
//   
export function f() {};
//   
function f() {}
export {f};

デフォルトのエクスポート
 importコマンドを使用する場合、ユーザーはロードする変数名または関数名を知る必要があります.そうしないとロードできません.しかし、ユーザーは、モジュールにどのような属性と方法があるかを理解するために、ドキュメントを読む必要はありません.
 ユーザーに便利を提供するために、ドキュメントを読まずにモジュールをロードできるようにするには、export defaultコマンドを使用して、モジュールのデフォルト出力を指定します.

// export-default.js
export default function () {
  console.log('foo');
}

上のコードはモジュールファイルexport-defaultです.jsは、デフォルトの出力が関数です.
他のモジュールがモジュールをロードすると、importコマンドは匿名関数に任意の名前を指定できます.

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上のコードのimportコマンドは、任意の名前でexport-defaultを指すことができます.js出力の方法は,元のモジュールが出力する関数名を知る必要はない.注意すべきは、importコマンドの後ろにカッコは使用されません.
export defaultコマンドは、匿名でない関数の前に使用することもできます.

// export-default.js
export default function foo() {
  console.log('foo');
}

//     
function foo() {
  console.log('foo');
}
export default foo;

上のコードではfoo関数の関数名fooはモジュール外部では無効です.ロードするときは、匿名関数としてロードします.
名前付きエクスポートとデフォルトエクスポート
デフォルトのエクスポートは、default名を使用した名前付きエクスポートとみなすことができる別の形式の名前付きエクスポートとして理解できます.
次の2つのエクスポート方法は等価です.

const D = 123;
export default D;
export { D as default };

export使用例
名前を使用してモジュールをエクスポートする場合:

// "my-module.js"   
export function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };

別のモジュール(スクリプトファイル)では、次のように参照できます.

import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

デフォルトでモジュールをエクスポートする場合:

// "my-module.js"  
export default function (x) {
  return x * x * x;
}

別のモジュール(スクリプトファイル)では、名前のエクスポートよりも簡単に使用できます.

//    "my-module.js"  
import cube from 'my-module';
console.log(cube(3)); // 27

3、import導入モジュール
エクスポートされたモジュール、スクリプトから関数、オブジェクト、指定されたファイル(またはモジュール)をインポートするための元の値を宣言します.
 importモジュールインポートはexportモジュールエクスポート機能に対応し、ネーミングインポート(名前インポート)とデフォルトインポート(定義インポート)の2つのモジュールインポート方式も存在します.
  importの構文はrequireとは異なり、importはファイルの最初に置く必要があり、前に他の論理コードが許されず、他のすべてのプログラミング言語スタイルと一致しています.

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

name-インポートするモジュールから受け取るエクスポート値の名前

member,memberN-エクスポートモジュールから、指定した名前の複数のメンバー

をインポート

defaultMember-エクスポートモジュールからデフォルトのエクスポートメンバー

をインポート

alias,aliasN-別名、指定したインポート・メンバーの名前変更

module-name-インポートするモジュール.ファイル名

as-インポート・メンバー名(識別子)の名前を変更する

from-既存のモジュール、スクリプトファイルなどから

にインポート
名前付きインポート
  名前を指定することで、これらのメンバーを使用ドメインとして挿入できます.エクスポート時に、単一のメンバーまたは複数のメンバーをインポートできます.カッコ内の変数はexportの後ろの変数に対応しています.

import {myMember} from "my-module";
import {foo, bar} from "my-module";

*記号を使用すると、モジュール内のすべてのプロパティとメソッドをインポートできます.モジュールをインポートしてコンテンツをすべてエクスポートすると、エクスポートモジュール('my-module.js’)のすべてのエクスポートバインドコンテンツが、現在のモジュール('myModule’)の役割ドメインに挿入されます.

import * as myModule from "my-module";

モジュールオブジェクトをインポートする場合は、asを使用してインポートメンバーの名前を変更して、現在のモジュールで使用しやすいようにすることもできます.

import {reallyReallyLongModuleMemberName as shortName} from "my-module";

複数のメンバーをインポートする場合は、別名も使用できます.

import {reallyReallyLongModuleMemberName as shortName, anotherLongModuleName as short} from "my-module";

モジュールをインポートしますが、バインドは行いません.

import "my-module";

上のコードはmy-moduleモジュールのみを実行しますが、値は入力しません.
デフォルトのインポート
モジュールのエクスポート時にデフォルトのエクスポートがある場合があります.同様に、インポート時にimportコマンドを使用してデフォルト値をエクスポートできます.
デフォルトを直接インポート:

import myDefault from "my-module";

また、ネーミングスペースのインポートと名前のインポートでは、デフォルトのインポートを同時に使用することもできます.

import myDefault, * as myModule from "my-module"; // myModule         

または

import myDefault, {foo, bar} from "my-module"; //       

import使用例

// --file.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open("GET", url, true);
  xhr.send();
}
export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}
// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://itbilu.com", data => {
  doSomethingUseful(data);
});

4、defaultキーワード

// d.js
export default function() {}

//同等:

function a() {};
export {a as default};

importの場合、次のように使用できます.

import a from './d';
//    ，              ，      
import {default as a} from './d';

この文法糖の利点はimportの場合、カッコ{}を省くことです.
簡単に言えば、importのとき、ある変数がカッコで囲まれていないことに気づいたら(*番がない)、頭の中でカッコのあるas文法に復元すべきです.
だから、次のような書き方も理解できるでしょう.

import $,{each,map} from 'jquery';
// import     $ {defalut as $}     。

5、asキーワード
asは簡単に言えば別名を取り、exportでは使用できますが、importでは実際に使用できます.

// a.js
var a = function() {};
export {a as fun};
// b.js
import {fun as a} from './a';
a();

上のコード、exportの時、対外的に提供するインタフェースはfunで、それはa.js内部aという関数の別名ですが、モジュールの外ではaが認識されず、funしか認識できません.
importのasは簡単です.モジュール内のメソッドを使用するときに、このメソッドに別名を付けて、現在のファイルで使用することです.なぜなら、異なる2つのモジュールが同じインタフェースを通過する場合があるからです.例えば、c.jsもfunというインタフェースを通過する場合があります.

// c.js
export function fun() {};

b.jsでaとcの2つのモジュールを同時に使用する場合は,インタフェースの再名の問題を解決する方法を考えなければならず,asは解決した.
参照先:https://meiminjun.github.io/import%E5%92%8Cexport%E7%AC%94%E8%AE%B0/