L'instruction export est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction import.

Les modules exportés sont interprétés en mode strict dans tous les cas. L'instruction export ne peut pas être utilisée dans les scripts embarqués.

Syntaxe

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

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 …;
export { default } from …;
nomN
Identifiant à exporter (afin qu'il puisse être importé via import dans un autre script).

Description

Il existe deux types d'export différents : les exports nommés et les exports par défaut. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :

  • Les exports nommés :
    // exporte une fonction déclarée précédemment
    export { maFonction };
    
    // exporte une constante
    export const machin = Math.sqrt(2);
  • Les exports par défaut (fonction) :
    export default function() {} 
  • Les exports par défaut (classe) :
    export default class {} 

Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.

Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :

let k;
export default k = 12; // dans le fichier test.js
import m from './test' // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut
console.log (m); // enregistrera 12

La syntaxe suivante n'exporte pas depuis le module importé :

export * from …;

Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :

export {default} from 'mod';

Exemples

Utilisation d'exports nommés

Dans le module, on pourra utiliser le code suivant :

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

De cette façon, dans un autre script, on pourra avoir :

import { cube, machin } from 'mon-module';
console.log(cube(3)); // 27
console.log(machin);    // 4.555806215962888

Note : Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut type "module" : <script type="module" src="./demo.js"></script> sinon il y aura une erreur quant aux origines multiples (CORS).

Utilisation d'exports par défaut

Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours pour le module, on peut utiliser un export par défaut :

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

Alors, dans un autre script, il sera facile d'importer l'export par défaut :

import cube from './mon-module.js';
console.log(cube(3)); // 27

Notez qu'il n'est pas possible d'utiliser var, let ou const avec export default.

Redirections entre modules

Si on souhaite exporter une valeur par défaut ainsi que l'ensemble d'un autre module (en créant ainsi une redirection), on pourra écrire :

// module "redirect-module.js"
export {default} from "./autre-module";
export * from "./autre-module";

Spécifications

Spécification Statut Commentaire
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.
Projet  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
Support simpleChrome Support complet 61Edge Support complet 16
Support complet 16
Support complet 15
Désactivée
Désactivée From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Support complet 60
Support complet 60
Aucun support 54 — 60
Désactivée
Désactivée From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 47Safari Support complet 10.1WebView Android Aucun support NonChrome Android Support complet 61Edge Mobile Support complet OuiFirefox Android Support complet 60
Support complet 60
Aucun support 54 — 60
Désactivée
Désactivée From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Support complet 47Safari iOS Support complet 10.1Samsung Internet Android Aucun support Nonnodejs ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

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