En JavaScript, les modules sont des unités de code autonomes qui peuvent exposer des ressources à d'autres modules à l'aide de l'exportation et consommer des ressources d'autres modules à l'aide de l'importation. Ce mécanisme est essentiel pour créer du code modulaire et réutilisable dans les applications JavaScript modernes.

Exportations par défaut

• Un module ne peut avoir qu'un seul export par défaut.
• Pour exporter un actif par défaut, utilisez le mot-clé default avant l'entité exportée.
• Pour importer un export par défaut, vous pouvez l'affecter directement à une variable sans préciser le nom de l'export :

// Exporting a default asset
export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Importing the default export
import greet from './myModule';

Exportations nommées

• Un module peut avoir plusieurs exportations nommées.
• Pour exporter un actif nommé, utilisez le mot-clé export avant l'entité exportée et donnez-lui un nom.
• Pour importer des exportations nommées, vous devez spécifier les noms des actifs que vous souhaitez importer :

// Exporting named assets
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

// Importing named exports
import { greet, farewell } from './myModule';

Combinaison des exportations par défaut et nommées

Vous pouvez avoir à la fois une exportation par défaut et des exportations nommées dans un seul module :

export default function greet(name) {
  console.log(`Hello, ${name}!`);
}

export function farewell(name) {
  console.log(`Goodbye, ${name}!`);
}

Pour importer à la fois les exportations par défaut et nommées :

import greet, { farewell } from './myModule';

Points clés à retenir

• l'exportation est utilisée pour exposer les actifs d'un module.
• l'importation est utilisée pour consommer des actifs d'autres modules.
• Un module ne peut avoir qu'un seul export par défaut.
• Les exportations nommées peuvent être importées individuellement ou collectivement.
• Les noms utilisés pour les importations sont arbitraires et ne doivent pas nécessairement correspondre aux noms utilisés dans le module exporté.

Exemple pratique

Considérez un composant React :

import React from 'react';

export default function Greeting({ name }) {
  return 
Hello, {name}!
;
}

Dans cet exemple, le composant Greeting est exporté comme exportation par défaut. Il peut être importé et utilisé dans d'autres composants :

import Greeting from './Greeting';

function MyComponent() {
  return ;
}

En comprenant les exportations et les importations, vous pouvez organiser et réutiliser efficacement le code dans vos projets JavaScript.