Export predefiniti vs. export nominati

Nei moduli JavaScript, hai due modi principali per esportare il tuo codice: esportazioni con nome ed esportazioni predefinite.

Esportazioni con nome ti permettono di esportare più valori da un modulo:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

Quando importi esportazioni con nome, devi usare esattamente gli stessi nomi tra parentesi graffe:

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

Se devi rinominare un'importazione con nome, usa la parola chiave as per creare un alias:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

Esportazioni predefinite ti permettono di esportare un singolo valore principale da un modulo:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

Quando importi un'esportazione predefinita, puoi usare il nome che preferisci senza parentesi graffe:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

Quando usare l'uno o l'altro? Usa le esportazioni con nome quando un modulo fornisce più utilità correlate (ad esempio, una raccolta di funzioni di supporto). Usa un'esportazione predefinita quando un modulo ha uno scopo principale o un valore principale (ad esempio, una classe, un componente o un oggetto di configurazione).

Puoi combinare entrambi i tipi di esportazioni in un singolo modulo:

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

E importali insieme:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4