Spiria logo.
Joel Lord
dans «  Applications web  »,
27 juin 2016.

SystemJs : comment inclure les modules ES6 dans votre navigateur

Aujourd’hui, je suis tombé sur SystemJs par hasard. Cette librairie semble un moyen intéressant d’inclure des modules au format ES6 dans un code JavaScript traditionnel. Je l’ai donc essayée et je vous fais part de mes découvertes ici.

SystemJs

Aujourd’hui, je suis tombé sur SystemJs par hasard. Cette librairie semble un moyen intéressant d’inclure des modules au format ES6 dans un code JavaScript traditionnel. Je l’ai donc essayée et je vous fais part de mes découvertes ici.

Qu’est-ce que SystemJs ?

SystemJs est un chargeur de modules universel pour JavaScript. Si vous avez utilisé RequireJs ou un précompilateur CommonJs dans le passé, vous avez probablement créé des modules. Il s’agit d’une méthode essentielle afin de diviser votre code en plus petites pièces logiques et d’inclure ces modules seulement lorsque vous en avez besoin. SystemJs vous permet d’utiliser des modules dans différents formats, mais j’étais particulièrement intéressé aux modules utilisant la syntaxe ES6.

Qu’est-ce qui est si génial avec les modules ES6 ?

Les modules sont une nouvelle fonctionnalité dans le standard ES6. La syntaxe est simple à utiliser et simple à lire. En utilisant cette syntaxe, vous pouvez exporter d’un fichier à l’autre des variables, des classes, des fonctions ou des objets. Voici un exemple du fonctionnement.

export.js

var accessibleFromOtherFile = 1; 
var notAccessibleFromOtherFile = 1; 
export var accessibleFromOtherFile;

import.js

import * as otherFile from “export.js”; 
console.log(otherFile.accessibleFromOtherFile); // 1 
console.log(otherFile.notAccessibleFromOtherFile); // undefined

Pour plus d’informations sur les modules ES6, je recommande fortement le blogue du Dr Rauschmayer.

De retour à SystemJs

Essayons maintenant d’utiliser SystemJs pour charger ces modules. Tout d’abord, créons une page web de base qui inclut SystemJs. Nous allons ajouter du code dans la balise script dans un instant.

index.html




    
    Exploring SystemJs







Créons aussi deux fichiers JavaScript. Un pour notre application principale et un autre pour certaines fonctions mathématiques de base que nous importerons dans notre application.

main.js

import * as math from "./math";

console.log("1 + 1 = " + math.add(1,1));
console.log("1 - 1 = " + math.substract(1,1));

math.js

export function add(x, y) {
 return x+y;
}

export function substract(x, y) {
 return x-y;
}

Rien de sorcier ici, c’est un début simple pour notre premier exemple. Éditons maintenant notre fichier HTML. Nous allons y ajouter deux lignes afin de configurer SystemJs. La première instruction demande à SystemJs d’utiliser Babel comme transpilateur ES6 et la seconde spécifie le fichier qui sera utilisé comme point d’entrée à notre application.

index.html

System.config({
    transpiler: "babel"
});

System.import("./js/main.js");

Exécutons maintenant le code dans un navigateur et… ta-dah ! Le résultat devrait être le suivant (dans la console de développeur) :

1 + 1 = 2
1 – 1 = 0

L’utilisation d’un module séparé est un peu excessive pour cet exemple, mais vous permet de bien comprendre l’utilisation.

Une petite note à propos de jspm

Vous aurez peut-être remarqué dans l’onglet “réseau” de vos outils de développeur que la librairie babel-code@5.js a été automatiquement téléchargée de jspm.io. C’est un petit extra de l’utilisation de jspm pour charger system.js dans vos balises script. Jspm est un gestionnaire de modules et agit plus ou moins comme un CDN pour vos fichiers (plus à venir à ce sujet dans un article subséquent). Pour le moment, il suffit de voir que c’est facile à utiliser avec SystemJs.

Autre chose ?

Oui, il y a un autre petit extra avec jspm. Maintenant, tout votre code est transpilé de ES6 vers ES5, ce qui veut dire que vous pouvez utiliser *toutes* les fonctionnalités de ES6 dans votre navigateur. Par exemple, vous pouvez ajouter le code suivant à main.js:

main.js

//Arrow Functions (this should not work in Safari 9 unless transpiler works) 
var arrow = () => console.log("It works! "); 
arrow();

Et vous devriez voir “It works !” dans votre console de développeur. Cette fonction fléchée est déjà supportée dans Chrome, mais si vous essayez de l’exécuter sans transpilateur dans Safari 9, vous devriez avoir une erreur.

Et c’est tout ! Ceci devrait maintenant vous aider à démarrer un projet avec SystemJs dans votre navigateur et vous pourrez ainsi utiliser de plus en plus la syntaxe ES6 dans votre code.

Partager l’article :