Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

import

L'instruction import est utilisée pour importer des fonctions, des objets ou des valeurs primitives exportées depuis un module externe ou un autre script.

Note : Cette fonctionnalité n'est, à l'heure actuelle, implémentée dans aucun navigateur de façon native. Elle est disponible via certains transpileurs tels que Traceur Compiler, Babel ou Rollup.

Syntaxe

import nom from "nom-module";
import * as nom from "nom-module";
import { membre } from "nom-module";
import {membre as alias } from "nom-module";
import { membre1 , membre2 } from "nom-module";
import { membre1 , membre2 as alias2 , [...] } from "nom-module";
import membreDéfaut , { member [ , [...] ] } from "nom-module";
import membreDéfaut, * as alias from "nom-module";
import membreDéfaut from "nom-module";
nom
Le nom de l'objet qui reçoit les valeurs importées.
membre, membreN
Le nom des membres exportés qui seront importés.
membreDéfaut
Le nom donné à l'export par défaut auquel on fait référence.
alias, aliasN
Le nom de l'objet qui recevra la propriété importée.
nom-module
Le nom du module à importer. Cela correspond au nom de fichier du module.

Description

Le paramètre nom est le nom de l'objet qui recevra les membres exportés. Les paramètres membre permettent de définir des membres individuels. La syntaxe utilisant le paramètre nom permet quant à elle d'importer tous les membres. nom peut aussi être une fonction si le module exporte un seul paramètre par défaut plutôt qu'une suite de membres. Les exemples ci-après explicitent cette syntaxe.

Pour importe le contenu complet d'un module, on pourra utiliser le fragment de code suivant. Il permet d'insérer monModule dans la portée courante, monModule contiendra tous les éléments exportés par mon-module.js.

import * as monModule from "mon-module";

L'instruction qui suit permet d'importer un seul membre d'un module. Ici on insère unMembre dans la portée courante :

import {monMembre} from "mon-module";

Pour importer plusieurs membres d'un module, on pourra utiliser l'instruction suivante qui insère toto et truc dans la portée courante :

import {toto, truc} from "mon-module";

Il est possible d'introduire un membre avec un alias. L'instruction qui suit utilise l'alias nomCourt pour insérer le membre dans la portée courante :

import {unNomDeMembreVraimentLongPfiouu as nomCourt} from "mon-module";

On peut également importer plusieurs membres d'un modules avec des alias adaptés :

import {unNomDeMembreVraimentLongPfiouu as aliasCourt, unAutreAussiLong as raccourci} from "mon-module";

Si on souhaite n'importer aucun membre mais réaliser les effets de bord d'un import, on pourra utiliser l'instruction suivante :

import "mon-module";

Importer les exports par défaut

Il est possible d'exporter une quantité (objet, fonction, classe, etc.) par défaut. De façon symétrique, l'instruction d'import permet d'exploiter ces exports.

La version la plus simple, qui importe directement la quantité par défaut :

import monModule from "mon-module";

Il est également possible de combiner l'import de la quantité par défaut avec des imports globaux ou des imports nommés. Dans ces cas, la quantité par défaut sera toujours placée en premier dans la déclaration d'import.

import monDéfaut, * as monModule from "mon-module";

ou

import monDéfaut, {toto, truc} from "mon-module";

Exemples

Le fragment de code qui suit, permet d'exporter une fonctionnalité de traitement de requête AJAX JSON d'un fichier (fichier.js), puis l'importer dans notre fichier principal (main.js).

Voici le fichier secondaire qui définit la fonctionnalité :

// fichier.js
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { callback(this.responseText) };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getContenuUtile(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

Et voici le fichier principal dans lequel on importe la fonctionnalité du module :

// main.js
import {getContenuUtile} from "fichier";
getContenuUtile("http://www.exemple.com", data => {
  faireQuelqueChose(data);
});

Spécifications

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

Compatibilité des navigateurs

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

[1] Cf. bug 568953.

[2] Disponible à partir du build 14342.

[3] Voir le bug 1569 de Chromium.

Note spécifique à Firefox

Les instructions import et export faisaient partie d'une ancienne fonctionnalité de Netscape. Peu usitées, elles ont été retirées à partir de Firefox 3.5 (bug 447713).

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Yukulele., miam, teoli
 Dernière mise à jour par : SphinxKnight,