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 devra ê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. Une valeur par défaut peut être importée avec n'importe quel nom.

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éChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple61151542 Non4710.1
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Non61 Oui542 Non4710.1

1. From version 15: this feature is behind the Experimental JavaScript Features preference.

2. From version 54: this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.

Voir aussi

Étiquettes et contributeurs liés au document

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