ES 6モジュールとcommon JSモジュールの違い

参考:先端モジュール化
ES 6は言語標準のレベルでモジュール機能を実現し、ブラウザやサーバー共通のモジュールソリューションになるためにかなり簡単に実現されました.そのモジュール機能は主に2つのコマンドで構成されている.exportとimport.exportコマンドは、所定のモジュールの対外インターフェースのために使用され、importコマンドは、他のモジュールが提供する機能を入力するために使用される.importコマンドを使用する場合、ユーザはロードする変数名または関数名を知る必要があります.

/**      math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};

// export             
export { basicNum, add };


/**      **/

// import               
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

実際にES 6はまた、export defaultコマンドを提供し、モジュールにデフォルト出力を指定し、対応するimport文は、大かっこを使用する必要がない.これもADMの引用の書き方に近いです.

/** export default **/
//    
export default { basicNum, add };
//  
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

ES 6のモジュールは対象ではありません.importコマンドはJavaScriptエンジンによって静的に分析され、コンパイル時にモジュールコードを導入します.コード実行時にロードするのではなく、条件ロードが実現できません.これにより静的解析が可能になった.
ES 6モジュールとcommon JSモジュールの違い
1.common JSモジュールが出力するのは値のコピーで、ES 6モジュールが出力するのは値の参照です.

common JSモジュールが1つの値を出力すると、モジュール内部の変化はこの値に影響しません.

ES 6モジュールがimportを使用して一つのモジュールから変数をロードすると、それらの変数はキャッシュされず、ロードされたモジュールに向けられた参照となり、元の値が変化し、importによってロードされた値も変化します.開発者自身が保証して、本当に値を取る時は値を取ることができます.

2.common JSモジュールは運転時にロードし、ES 6モジュールは編集時に出力するインターフェースです.

運転時にロード:comonJSモジュールは対象です.すなわち、入力時にモジュール全体をロードしてオブジェクトを生成し、そのオブジェクトから方法を読み込むことを「実行時ローディング」といいます.common JSスクリプトコードはrequireの時に全部実行されます.あるテンプレートが「ループローディング」されると、実行されている部分だけが出力され、実行されていない部分は出力されません.

コンパイル時にロードします.ES 6モジュールはオブジェクトではなく、exportコマンドで明示的に出力コードを指定します.importの時に、モジュール全体をロードする代わりに、ある出力値をロードすることを指定します.