Moduły ESM: import / export

Gdy program rośnie, trzymanie wszystkiego w jednym pliku staje się niewygodne. Nowoczesny JavaScript rozwiązuje ten problem za pomocą modułów ES (ESM): każdy plik jest osobnym modułem, który może eksportować funkcje, stałe czy klasy, a inne pliki mogą je importować.

export

Eksportujesz to, co chcesz udostępnić publicznie. Dwie formy:

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

export const PI = 3.14159;

Lub na końcu pliku:

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

import

Z innego pliku:

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

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

Obiekt { somma, PI } to lista nazw, które chcesz zaimportować. Muszą one odpowiadać nazwom wyeksportowanym.

Default-Export (eksport domyślny)

Każdy moduł może mieć jeden główny eksport bez nazwy (domyślny):

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

Importuje się go, wybierając nazwę lokalnie:

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

Zmiana nazwy (aliasing)

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

Pojedyncza przestrzeń nazw na plik

Moduły są izolowane: zmienna zadeklarowana w jednym pliku nie trafia do przestrzeni globalnej. Musisz ją wyeksportować jawnie, aby była widoczna gdzie indziej. To ogromne ulepszenie w stosunku do starego JS, gdzie każdy znacznik <script> współdzielił obiekt window.

Spróbuj sam

W poniższych ćwiczeniach nie będziesz używać prawdziwej składni import/export – sandbox składa się z jednego pliku. Zamiast tego poprosimy Cię o zorganizowanie kodu w małe, osobne funkcje, które ze sobą współpracują, tak jakby każda z nich znajdowała się w innym pliku.

Ćwiczenie powtórzeniowe