Модулі ESM: імпорт / експорт

Коли програма росте, зберігати все в одному файлі стає незручно. Сучасний JavaScript вирішує проблему з ES-модулями (ESM): кожен файл є модулем, який можна експортувати функції, константи, класи та інші файли можуть імпортувати їх.

export

Ви експортуєте те, що хочете оприлюднити. Дві форми:

// 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 } — це список імен, який ви хочете імпортувати. Вони повинні відповідати експортовані імена.

Експорт за замовчуванням

Кожен модуль може мати один «основний» експорт без імені:

// 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

Один "простір імен" на файл

Модулі є ізольованими: змінна, оголошена у файлі, не потрапляє в глобальну область видимості. Ви потрібно експортувати його явно, щоб зробити його видимим деінде. Це величезне покращення старої школи JS, де кожен <script> ділився window.

Спробуйте

У наведених нижче вправах ви не будете писати справжній синтаксис import/export — пісочниця є єдиною файл. Натомість ми попросимо вас організувати код у невеликі окремі функції, які співпрацювати, як якщо б кожен був у окремому файлі.

Повторна вправа