JSPM, des modules à la mode ES6

by Hadrien

Bower, npm… c'est fini ! Place à JSPM. JSPM est un gestionnaire de paquets batis sur les bases du système de modules de ES6. Non content d'utiliser les dernières technologies ECMAScripts, il est capable d'installer des paquets provenant non seulement de NPM, mais aussi de Bower ou directement de GitHub. Et surtout, il vous offre la possibilité de coder vos apps sous forme de modules ES6. Le futur !

Installation

JSPM s'installe à l'aide de npm :

npm install -g jspm

Gestionnaire de paquets

Après avoir démarré un nouveau projet à l'aide du classique jspm init qui fonctionne comme npm et bower, vous pourrez installer dans votre projet des dépendances à l'aide de la commande install :

jspm install npm:lodash-node  
jspm install github:components/jquery  
jspm install jquery  
jspm install myname=npm:underscore

Ces quatre exemples nous montrent comment installer un paquet depuis npm, depuis github, depuis la première source trouvée, ou alors en choisissant un nom personnalisé. Plus besoin d'utiliser --save, c'est automatique.

Import

Les fichiers de votre application seront localisés dans un dossier lib (ça peut évidemment se changer dans la config). Ces fichiers sont importables dans vos scripts via leurs chemins. Chaque module peut importer n'importe quel module de jspm. Ainsi, nous pourrions avoir un fichier lib/post.js contenant :

export class Post {  
  constructor (title, content) {
    this.title = title;
    this.content = content;
  }

  toHTML () {
    var html = `
    <h2>${this.title}</h2>
    <div>
      ${this.content}
    </div>
    `;

    return html;
  }
}

Et un fichier lib/main.jscontenant :

import _ from 'lodash';  
import {Post} from 'app/post';

var posts = [{  
  title: 'Coin',
  content: '<p>Coin coin</p>'
}, {
  title: 'Pwet',
  content: '<p>Pwet pwet</p>'
}, {
  title: 'Wouf',
  content: '<p>Wouf wouf</p>'
}];

_.each(posts, (post) => {  
  var article = document.createElement('article');
  article.innerHTML = new Post(
    post.title, post.content).toHTML();
  document.body.appendChild(article);
});

On va rajouter un index.html contenant uniquement :

 <!doctype html>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('app/main');
  </script>

On commence donc par importer le fichier principal app/main situé dans lib/main.js. Celui-ci va importer lodash et app/post tel que le demande main.js. Vous pouvez alors charger votre index.html dans votre browser et… !! Il ne se passe rien… :o Il faut d'abord compiler l'application !

Build

…à l'aide de la commande :

jspm bundle app/main --inject

On indique le nom du fichier principal de l'application et un fichier build.js contenant tous vos modules directement exécutable par votre navigateur.

Et la magie opère.