Module ESM: import/export

Când un program crește, păstrarea totul într-un singur fișier devine incomodă. JavaScript modern rezolvă problema cu module ES (ESM): fiecare fișier este un modul care poate exporta funcțiile, constantele, clasele și alte fișiere le pot import.

export

Exportați ceea ce doriți să faceți public. Doua forme:

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

export const PI = 3.14159;

Sau, la sfârșitul fișierului:

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

import

Din alt fisier:

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

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

Obiectul { somma, PI } este lista de nume pe care doriți să o importați. Ele trebuie să se potrivească cu nume exportate.

Export implicit

Fiecare modul poate avea un export „principal”, fără nume:

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

Îl importați alegând numele local:

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

Redenumire

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

Un „spațiu de nume” pentru fiecare fișier

Modulele sunt izolate: o variabilă declarată într-un fișier nu ajunge în domeniul global. tu trebuie să-l exportați în mod explicit pentru a-l face vizibil în altă parte. Aceasta este o îmbunătățire enormă față de JS vechi în care fiecare <script> a distribuit window.

Încearcă

În exercițiile de mai jos veți nu să scrieți sintaxa reală import/export — sandbox-ul este un singur dosar. În schimb, vă vom cere să organizați codul în funcții separate care colaborați, așa cum ați face dacă fiecare ar fi într-un fișier diferit.

Exercițiu de revizuire