L'instruction import permet d'importer des éléments provenant d'un autre module.

Note : Cette fonctionnalité commence à être implémentée nativement dans les navigateurs. Elle est également présente via de nombreux transpileurs tels que TypeScript et Babel et dans des outils d'empaquetage tels que Rollup et Webpack.

Syntaxe

import exportParDefaut from "mon-module";
import * as nom from "mon-module";
import { export } from "mon-module";
import { export as alias } from "mon-module";
import { export1 , export2 } from "mon-module";
import { export1 , export2 as alias2 , [...] } from "mon-module";
import exportParDefaut, { export [ , [...] ] } from "mon-module";
import exportParDefaut, * as name from "mon-module";
import "mon-module";
exportParDefaut
Un nom qui fera référence à l'export par défaut du module.
mon-module
Le module qu'on souhaite importer. Cette valeur est souvent un chemin absolu ou relatif vers le fichier .js contenant le module (l'extension .js est exclue du paramètre). Certains empaqueteurs permettent ou non d'utiliser l'extension de fichier. Seules les chaînes de caractères entre (doubles) quotes sont autorisées.
nom
Le nom de l'objet pour le module, celui-ci sera utilisé à la façon d'un espace de nom lorsqu'on manipulera les éléments importés.
export, exportN
Le nom des exports qu'on souhaite importer.
alias, aliasN
Les noms qui feront référence aux imports nommés.

Description

Le paramètre nom sera utilisé comme un espace de nom pour le module lorsqu'on manipulera les éléments exportés. Les paramètres export permettent de récupérer des éléments exportés spécifiques. Enfin, import * as nom permettra d'importer tous les éléments exportés. Vous trouverez ci-après d'autres exemples pour expliciter cette syntaxe.

Importer l'intégralité d'un module

L'instruction qui suit permet d'insérer monModule dans la portée courante. Cet objet contiendra alors tous les éléments exportés depuis le module du fichier situé sous /modules/mon-module.js.

import * as monModule from '/modules/mon-module.js';

L'instruction qui suit accède à un export donné en utilisant le nom du module comme espace de nom (ici monModule). Ainsi, si le module importé contenait un export intitulé faireUnTrucTropGenialSoFluffy(), on écrirait :

monModule.faireUnTrucTropGenialSoFluffy();

Importer un seul élément exporté depuis un module

Soit un objet ou une valeur intitulée monExport qui est exportée depuis un module mon-module, implicitement ou explicitement (avec export), on peut utiliser l'instruction suivante afin d'insérer monExport dans la portée courante.

import {monExport} from '/modules/mon-module.js';

Importer plusieurs éléments exportés depuis un module

L'instruction suivante permet de récupérer les valeurs toto et truc dans la portée courante.

import {toto, truc} from '/modules/mon-module.js';

Importer un élément exporté avec un alias

Il est possible de renommer une valeur exporter lors de l'import. Par exemple, on pourra utiliser l'instruction suivante afin d'insérer nomCourt dans la portée courante.

import {unNomDExportUnPeuTropLongQuandMeme as nomCourt}
  from '/modules/mon-module.js';

Renommer plusieurs exports à l'import

Il est possible d'utiliser des alias pour différents éléments exportés :

import {
  unNomDExportUnPeuTropLongQuandMeme as nomCourt,
  unAutreNomPasTresConcis as nomRaccourci
} from '/modules/mon-module.js';

Importer un module uniquement afin de déclencher les effets de bord

Il est possible d'importer un module pour ne déclencher que les effets de bord liés à l'exécution du code du module. L'instruction suivante n'importera aucune valeur.

import '/modules/mon-module.js';

Importer l'élément par défaut

Dans un module, il est possible d'avoir une valeur par défaut pour l'export (ce peut être un objet, une fonction, une classe, etc.). L'instruction import permet alors d'importer ces valeurs par défaut.

Voici la version la plus simple pour n'importer que la valeur exportée par défaut :

import monDefaut from '/modules/mon-module.js';

Il est également possible de combiner cette syntaxe avec celles vues ci-avant. Dans ces cas de figure, il faut alors déclarer l'import par défaut en premier. Par exemple :

import monDefaut, * as monModule from '/modules/mon-module.js';
// monModule utilisé comme espace de noms

ou

import monDefaut, {toto, truc} from '/modules/mon-module.js';
// imports nommés spécifiques

Exemples

Imaginons qu'on dispose d'un module qui permette de traiter des requêtes AJAX JSON et qu'on souhaite s'en servir.

Le module : file.js

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

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

Le programme principal : main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(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 Latest Draft (ECMA-262)
La définition de 'Imports' 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, madarche, SirWinn3r, kdex, Yukulele., miam, teoli
 Dernière mise à jour par : SphinxKnight,