Les imports/exports ES6 (JavaScript 2015)

Les imports/exports ne sont pas encore implémentés dans les navigateurs, il existe des modules loader ou des modules bundler pour travailler avec les modules. Dans tous les exemples suivants on utilise webpack pour faire fonctionner les imports/exports.

Il suffit de reprendre le tutorial d'installation de webpack sur ce site et de modifier les fichiers js2 et js1.

Principes généraux de la modularisation avec JavaScript (import/export)

Un module (fichier) peut exporter plusieurs choses : des variables, des objets, des classes, des fonctions.
Tout ce que vous voulez rendre visible à l’extérieur doit être préfixé avec le mot-clé export
Les variables importées doivent être préfixées avec le mot-clé import. Il faut ajouter l’emplacement du fichier qui contient les variables exportées avec from.
On peut exporter une seule valeur par défaut par module.
Les exports et les imports ne peuvent pas être effectués dans un test, ils doivent se trouver au plus haut niveau du code. Il n’y a pas véritablement d’ordre nécessaire mais les exports se font généralement à la fin du fichier tandis que les imports se font au début du fichier.
Les imports sont en lecture seule on ne peut pas modifier une variable importée.

Export/import d’une variable

js1.js

var x = 44;
export {x};

js2.js

import {x} from "./js1.js";
alert("x :" + x);

On peut aussi déclarer la variable let ou const. Var, let et const ne sont importants que dans le fichier qui exporte les variables.

Comme les variables importées sont en lecture seule on ne peut pas les modifier. Exemple : x = 66 est interdit.

Export/import d’une fonction

js1.js

function display(msg)
{
    alert(msg);
};
export {display};

js2.js

import {display} from './js1.js';
display("hellooo world");

Export/import d’un objet littéral

js1.js

    
var obj = {
    nom : "durant",
    age : 15
    };

export {obj};

Si vous exportez un objet tous les modules qui vont l’importer auront les mêmes données c’est un singleton.

js2.js

import {obj} from "./js1.js";
alert("nom :" + obj.nom);

Export/import d’une classe

js1.js

function Personne(nom)
{
    this.Nom = nom;

    this.Afficher = function()
    {
        document.write(this.Nom);
    }

}
export {Personne};

js2.js

import {Personne} from "./js1.js";
let unePersonne = new Personne("durant");
let uneAutrePersonne = new Personne("martin");

unePersonne.Afficher();
uneAutrePersonne.Afficher();

Export/import par défaut d’une fonction

On a le droit de définir un export par défaut dans un module. Les exports par défaut ne fonctionnent qu’avec les fonctions, les objets et les classes. Vous pouvez spécifier n’importe quel nom au moment de l’import.

js1.js

export default function(x) {
    return x * 2;
}

On peut avoir d’autres déclarations d’export nommés dans le même module.

js2.js

    
import Multiplier from "./js1.js";
alert (Multiplier(5));

Plus besoin d’accolade pour les exports par défaut. Vous pouvez choisir le nom de l’import.

Export/import par défaut d’un objet littéral

Il faut supprimer l’exemple précédant.

js1.js

export default {
nom : "clyde",
age : 15
}

js2.js

import unObjet from "./js1.js";
alert (unObjet.nom);