CommonJS
1. コミュニティ基準
2. この関数は require() 関数を実装します。
3. ノード環境
4. 動的な依存関係 (コードの実行後に依存関係を決定する必要があります)
5. 動的依存関係は同期的に実行されます
ESM
1. 公的規格
2. 新しい構文を使用して実装
3. すべての環境をサポート
4. 静的依存関係と動的依存関係の両方がサポートされています (静的依存関係: コードを実行する前に依存関係を決定する必要があります。動的依存関係: 遅延読み込みにルートが使用されます)。
5. 動的依存関係は非同期です
6. シンボルバインディング
CommonJS モジュールと ES モジュールの違いは何ですか?
CMJ はコミュニティ標準、ESM は公式標準です
CMJはAPI(関数)を使用したモジュール化、ESMは新しい構文を使用したモジュール化
CMJ はノード環境のみでサポートされ、ESM はさまざまな環境でサポートされます
CMJ は動的依存関係であり、同期的に実行されます。ESM は動的と静的の両方をサポートしており、動的依存関係は非同期で実行されます。
ESM はインポート時にシンボル バインディングを持ちますが、CMJ は通常の関数呼び出しと代入です。
エクスポートとエクスポートのデフォルトの違いは何ですか?
エクスポートは、名前付きエクスポートとも呼ばれる共通エクスポートです。名前が示すように、変数定義や関数定義など、エクスポートするデータには名前を付ける必要があります。エクスポートされたモジュール オブジェクトでは、名前はモジュール オブジェクトの属性名になります。モジュール内には複数の名前付きエクスポートが存在する可能性があります
エクスポートデフォルトはデフォルトのエクスポートであり、モジュールオブジェクト内の名前がデフォルトとして固定されているため、名前を付ける必要はなく、通常は式またはリテラルがエクスポートされます。モジュール内に存在できるデフォルトのエクスポートは 1 つだけです。
シンボルバインディングに関する質問の例
// module counter
var count = 1;
export {count}
export function increase(){
count++;
}
// module main
import { count, increase } from './counter';
import * as counter from './counter';
const { count: c } = counter;
increase();
console.log(count); // 2
console.log(counter.count); //2
console.log(c); //1 因为c不是符号绑定，是一个全新的空间，所以值不会改变