Par défaut, tout ce qu'un fichier JavaScript déclare lui appartient. Une constante écrite dans panier.js n'existe nulle part ailleurs, et sans cette étanchéité, deux fichiers qui utilisent une variable total se marcheraient dessus.
export est la porte que vous ouvrez volontairement dans ce mur. Ce que vous n'exportez pas reste privé, ce qui fait de chaque ligne export une décision de conception, pas de syntaxe.
Définition
export marque une valeur, une fonction ou une classe comme accessible depuis un autre fichier, lequel la récupère avec import. Tout le reste du fichier demeure invisible de l'extérieur.
// devises.js
const SYMBOLE = '€'; // privé : jamais exporté
export const ARRONDI = 2;
export function formate(montant) {
return montant.toFixed(ARRONDI) + ' ' + SYMBOLE;
}Ici, SYMBOLE sert au calcul mais ne sort pas du fichier. Un autre module ne peut ni le lire ni le modifier, et utilisera pourtant formate() sans rien savoir de son existence.
Nommé ou par défaut
Un fichier peut porter autant d'exports nommés que nécessaire, et au plus un export par défaut.
| Écriture | Côté import | Quand l'utiliser |
|---|---|---|
export const A = 1 | import { A } | Plusieurs valeurs de même importance |
export default maFonction | import n'importeQuelNom | Le fichier ne propose qu'une chose |
L'export par défaut se déclare avec le mot-clé default et laisse le nom au choix de celui qui importe. Pratique, mais moins facile à rechercher : trois fichiers peuvent nommer différemment la même chose.
Les formes d'écriture
Le mot-clé se place devant la déclaration, ou dans une liste en fin de fichier, qui donne alors un sommaire du module.
function formate(m) { return m.toFixed(2); }
const ARRONDI = 2;
export { formate, ARRONDI };
export { formate as formatePrix }; // renommage
export { ARRONDI as default }; // export par défaut, autrement
export * from './autres-devises.js'; // réexport en blocLa dernière forme sert aux fichiers d'index, qui rassemblent plusieurs modules derrière une seule adresse.
Un export est un lien, pas une copie
C'est le point le moins connu et le plus utile. Ce qui traverse n'est pas la valeur au moment de l'import, mais la variable elle-même : si le fichier exportateur la change, ceux qui l'ont importée lisent la nouvelle valeur.
// compteur.js
export let visites = 0;
export function visite() { visites += 1; }
// page.js
import { visites, visite } from './compteur.js';
console.log(visites); // 0
visite();
console.log(visites); // 1Ce lien fonctionne dans un seul sens. Le fichier qui importe peut lire la nouvelle valeur, jamais en écrire une : côté import, le nom se comporte comme une const.
Questions fréquentes
Peut-on exporter au milieu d'une condition ?
Non. Comme import, le mot-clé n'existe qu'au niveau supérieur du fichier, jamais dans un if, une boucle ou une fonction. Cette contrainte permet aux outils de savoir ce qu'un module publie sans l'exécuter, et rend possible l'élimination du code inutilisé.
Faut-il préférer les exports nommés ?
Dans un projet à plusieurs, oui : le nom est imposé, donc une recherche retrouve tous les usages d'un coup. L'export par défaut garde sa place quand un fichier ne contient qu'une seule chose évidente, un composant ou une classe.
Que se passe-t-il si j'exporte un objet et qu'on le modifie ailleurs ?
La modification est visible partout : tous les fichiers manipulent le même objet en mémoire. Exporter une structure modifiable revient à créer un état partagé, ce qui est parfois voulu et souvent source de bugs difficiles à situer. Exportez plutôt une fonction qui renvoie une copie, ou gelez l'objet avec Object.freeze().