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.

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("https://www.exemple.com", data => {
  faireQuelqueChose(data);
});

Spécifications

Compatibilité des navigateurs

[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

• export
• Traduction du billet d'ES6 en détails sur les modules
• Un aperçu des modules ES6 et plus encore sur ES2015, ES2016 et la suite (en anglais)
• Chapitre du livre d'Axel Rauschmayer sur les modules ES6 (en anglais)