L'instruction export est utilisée pour permettre d'exporter des fonctions et objets ou des valeurs primitives à partir d'un fichier (ou module) donné. Ces fonctions et objets peuvent ensuite être utilisées dans d'autres fichiers grâce à import.

Note : Cette fonctionnalité n'est pas encore implémentée nativement par la plupart des navigateurs (cf. le tableau de compatibilité en fin d'article). En revanche, elle est gérée par de nombreux transpileurs comme  Traceur, Babel ou Rollup.

Syntaxe

export { nom1, nom2, …, nomN };
export { variable1 as nom1, variable2 as nom2, …, nomN };
export let nom1, nom2, …, nomN; // fonctionne également avec var, function
export let nom1 = …, nom2 = …, …, nomN; // également avec var, const

export default expression;
export default function (…) { … } // également avec class, function*
export default function nom1(…) { … } // également avec class, function*
export { nom1 as default, … };

export * from …;
export { nom1, nom2, …, nomN } from …;
export { import1 as nom1, import2 as nom2, …, nomN } from …;
nomN
L'identifiant (de la propriété, de la fonction ou de l'objet) à exporter (qu'on pourra utiliser depuis un autre script grâce à import).

Description

Il existe deux types d'export, chacun correspondant à une des syntaxes présentées ci-avant :

  • Les exports nommés :
    // on exporte une fonction déclarée plus haut
    export { maFonction };
    
    // on exporte une constante
    export const toto = Math.sqrt(2);
  • Les exports par défaut (pour les fonctions) :
    export default function() {} 
  • Les exports par défaut (pour les classes) :
    export default maClasse {} 

Les exports nommés permettent de rendre disponible plusieurs objets ou plusieurs valeurs. Le nom utilisé dans chacun des exports pourra être utilisé réciproquement dans les imports pour désigner telle ou telle valeur qu'on souhaite récupérer.

Quant aux exports par défaut, on n'en trouvera qu'un seul pour chaque module. On pourra ainsi exporter une classe, une fonction, un objet ou une autre valeur qu'on pourra importer par ailleurs sans en connaître le nom. Ce sera en quelque sorte la valeur « principale » exportée, qu'on pourra réimporter simplement.

Si on utilise la syntaxe suivante, cela ne crée pas un export par défaut du module qu'on importe :

export * from …;

En revanche, on pourra utiliser

import mod from "mod";
export default mod;

Exemples

Utiliser les exports nommés

Dans le module on pourra avoir :

// module "monModule.js"
function cube(x) {
  return x * x * x;
}
const truc = Math.PI + Math.SQRT2;
export { cube, truc };

De cette façon (cf. import), depuis un autre script, on pourra avoir :

import { cube, truc } from 'monModule';
console.log(cube(3)); // 27
console.log(truc);    // 4.555806215962888

Utiliser les exports par défaut

Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de fallback pour le module, on pourra exporter une valeur par défaut :

// module "monModule.js"
export default function cube(x) {
  return x * x * x;
}

On pourra ainsi, dans un autre script, importer très facilement ce qui est fourni par défaut :

import cube from 'monModule';
console.log(cube(3)); // 27

On ne peut pas utiliser var, let ou const avec export default.

Spécifications

Spécification État Commentaires
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Exports' dans cette spécification.
Standard Définition initiale
ECMAScript Latest Draft (ECMA-262)
La définition de 'Exports' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 61[1] Pas de support[2] Pas de support[3] Pas de support Pas de support 10.1
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support Pas de support Pas de support Pas de support Pas de support 10.3

[1] Disponible pour Chrome 60 via une préférence.

[2] Disponible depuis Firefox 54 via une préférence.

[3] Disponible depuis Edge 15 via une préférence.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, kuashe, teoli
 Dernière mise à jour par : SphinxKnight,