Exports par défaut vs nommés

Dans les modules JavaScript, vous avez deux manières principales d'exporter votre code : les exports nommés et les exports par défaut.

Les exports nommés vous permettent d'exporter plusieurs valeurs à partir d'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 à l'intérieur d'accolades :

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

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

Si vous avez besoin de 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 à partir d'un module :

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

export default user;

Lors de l'importation d'un export par défaut, vous pouvez utiliser n'importe quel nom 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 liés (par exemple, une collection de fonctions d'aide). 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