Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Les modules JavaScript: utilisation pratique

Poster un commentaire

J’ai discuté les différentes architectures de module rencontrées en JavaScript dans un précédent article:

https://amethyste16.wordpress.com/2017/06/24/les-architectures-de-modules-en-javascript/

 

OK, maintenant j’ai créé une série de modules. Comment je les intègre de façon concrète dans un vrai projet?

Il y a je pense 3 options:

  1. Les chargeurs de module
  2. Les constructeurs de bundle
  3. Chargement via des <script>

La première installe dans le site lui-même un chargeur de module, comme par exemple RequireJS, qui s’occupera de charger le module et l’ensemble de ses dépendances.

La deuxième vise à rassembler dans un même fichier le module et l’ensemble de ses dépendances dans l’ordre qui convient. On créée un nouveau fichier, appelons le bundle.js, qui est le résultat de la « bundlelisation ». On n’a alors plus besoin de référencer de chargeurs de module, il suffit de référencer bundle.js directement.

La dernière est la méthode traditionnelle si je puis dire. On a N fichiers *.js à charger, on écrit N déclarations <script> et on gère à la main le bon ordre. C’est très simple, très utilisé, mais peut devenir vite laborieux.

Surtout cette méthode encourage guère à écrire des modules propres, c’est à dire avec une empreinte minimale sur le scope global. Laissons de côté cette méthode qui ne concerne en rien cet article.

Chargement de module

La méthode a été mise en œuvre tout au long de l’article précédemment signalé. Je recommande de le relire et ne crois pas très utile d’y revenir.

Pourquoi un bundle?

Les avantages d’un bundle sont divers:

  • Pas de plomberie particulière à charger dans le site
  • Moins de fichiers à rechercher et charger
  • Le fichier chargé est prêt à l’emploi, aucun traitement supplémentaire n’est à prévoir
    La « bundelisation » a lieu en effet lors du déploiement tandis que le chargement et l’analyse des modules s’effectue à l’exécution

 

Les navigateurs modernes savent optimiser le chargement simultané de fichiers et gérer des caches. Dans les fait il n’est pas évident a priori de savoir quelle méthode est la plus efficace. Comme toujours en pareil cas, la seule solution est d’essayer et tester.

Création d’un bundle

Il existe différents SDK sur le marché. Je vais prendre Webpack comme modèle. Le site officiel se trouve ici:

https://webpack.js.org/

 

Je vais également partir d’un des exemples précédemment développé. Lequel importe peu, disons le site web CommonJS.

On commence par installer WebPack dans le projet ou de façon globale:

npm install webpack

Puis le répertoire d’accueil du bundle:

mkdir dist

Et enfin on construit le bundle:

webpack dommodule.js dist/bundle.js

Le résultat ressemble à ceci:

 

Note: Webpack a l’air moins intelligent que SystemJS, il faudra remplacer les déclaration de ce genre:

var math=require(‘mathModule.js’);

Par:

var math=require(‘./mathModule.js’);

Il nous reste plus qu’à modifier le HTML:

On supprime la partie encadrée, on la remplace par:


<script src=".\dist\bundle.js"></script>

 

Note: la déclaration doit intervenir APRES le chargement du DOM.

Et vous constaterez que tout fonctionne.

 

Je ne l’ai pas fait ici, mais il est parfaitement possible de placer la configuration Webpack dans un fichier de config. Conventionnement il s’appelle webpack.config.js.

Il s’agit d’ailleurs d’un module CommonJS.

 

Que trouve t’on dans notre fichier bundle.js?

On sent le code généré par un automate!

 

Ca vaut la peine de le regarder au moins une fois dans sa vie. C’est certainement pas ainsi qu’un humain écrirait un tel code, mais il n’est pas destiné à être lu par nous…

Le point intéressant est ailleurs, les modules sont chargés dans des IIFE selon un bon vieux Revealling Module Pattern. L’intérêt est que ce code fonctionne sur presque tous les navigateurs.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s