ESMモジュール:インポート/エクスポート

プログラムが大きくなると、すべてを 1 つのファイルに保存するのが面倒になります。最新の JavaScript ES モジュール (ESM) の問題を解決します。各ファイルは エクスポートできるモジュールです 関数、定数、クラス、その他のファイルはインポートできます。

export

公開したいものをエクスポートします。 2 つの形式:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

または、ファイルの最後に次のように記述します。

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

別のファイルから:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

オブジェクト { somma, PI } は、インポートする 名前のリスト です。それらは一致する必要があります エクスポートされた名前。

デフォルトのエクスポート

各モジュールには、名前のない 1 つの「メイン」エクスポートを含めることができます。

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

ローカルで名前を選択してインポートします。

import log from './log.js';
log('ciao');

名前の変更

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

ファイルごとに 1 つの「名前空間」

モジュールは分離されています。ファイル内で宣言された変数はグローバル スコープには入りません。あなた 他の場所で見えるようにするには、明示的にエクスポートする必要があります。これは大幅な改善です すべての <script> が window を共有する昔ながらの JS。

試してみてください

以下の演習では、実際の import/export 構文は作成しません。サンドボックスは単一です。 ファイル。代わりに、コードを 小さな個別の関数に編成するようお願いします。 それぞれが別のファイルにある場合と同様に、共同作業を行うことができます。

復習演習