Exports par défaut vs nommés

Dans les modules JavaScript, vous avez deux façons principales d’exporter votre code : les exportations named et les exportations default.

Les exports nommés vous permettent d’exporter plusieurs valeurs depuis un module :

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

Lors de l’importation d’exports nommés, vous devez utiliser exactement les mêmes noms entre accolades :

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

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

Si vous devez renommer un import nommé, utilisez le mot-clé as pour créer 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

Les exports par défaut vous permettent d’exporter une seule valeur principale depuis un module :

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

export default user;

Lors de l’importation d’une exportation par défaut, vous pouvez utiliser le nom de votre choix sans accolades :

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

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

Quand utiliser lequel ? Utilisez les exports nommés lorsqu’un module fournit plusieurs utilitaires associés (par exemple, une collection de fonctions utilitaires). Utilisez un export par défaut lorsqu’un module a un objectif principal ou une valeur principale (par exemple, une classe, un composant ou un objet de configuration).

Vous pouvez combiner les deux types d’exports dans un seul module :

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

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

export default car;

Et importez-les ensemble :

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

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