requireJS : à quoi ça sert ?

De Clémence Boulay dans Technique

4 sept 2013

Dans des applications web complexes utilisant de plus en plus de JavaScript, on arrive très rapidement à se retrouver avec un header HTML qui inclut une liste de script très importante, et dans laquelle l’ordre est primordial, car les plugins dépendent souvent les uns des autres (on est donc dans un cas typique de chargement synchrone).

L’AMD (Asynchronous Module Definition) permet d’organiser le code en modules, afin de pouvoir les charger à la demande. Cela évite d’avoir un seul gros fichier ou plusieurs fichiers à inclure dans le HTML dans un ordre précis. C’est sur cette technique qu’est basé le plugin RequireJS.

En plus de ce chargement asynchrone, RequireJS permet notamment :

  • de l’encapsulation (visibilité public / privée)
  • de la modularité
  • de la gestion de dépendances
  • de ne plus écrire d’HTML dans des fichiers JS
  • de l’optimisation d’assets (grouper et minifier les JS et les CSS)

Gestion des dépendances

<script data-main=”app/main” src=”require.js”></script> va remplacer tous nos anciens includes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* main.js */
// main.js est chargé automatiquement grâce à
// l'attribut data-main dans la balise script de require.js
require([
"app”, // app/app.js
], function(App) {
// Callback executé une fois app.js chargé
App.initialize();
});
/* app.js */
define([
"random_lib, // Charge le module app/random_lib.js
], function(randomLib) {
function initialize() {
// Initialization stuff
randomLib.randomStuff();
}
// On exporte la fonction initialize dans le module app.js
return {
initialize: initialize
};
});

RequireJS définit deux notions : define et require :

  • define permet de définir un module avec des dépendances et des choses (fonction ou variable) à exporter.
  • require permet de charger dynamiquement des modules.

 

Optimisation

RequireJS possède un script de build qui permet d’optimiser les fichiers (JS et CSS !) avant mise en production.

Si on appelle r.js avec le paramètre -o et en lui spécifiant un fichier de configuration (r.js -o build.js), r.js va parcourir l’ensemble des scripts et les minifier, puis va parcourir les dépendances afin de les grouper. Les fichiers résultant seront placés dans un nouveau répertoire afin de ne pas écraser les sources. Le fichier main.js du répertoire build contiendra l’ensemble du code minifié.

1
2
3
4
5
6
7
8
9
10
({
appDir: './src', /* Repertoire des sources */
baseUrl: ".", /* Le repertoire racine */
dir: "./build", /* Repertoire de destination */
modules: [ {
name: 'main' /* Une dependance vers un module */
} ],
optimizeCss: "standard.keepLines", /* On va même optimiser les CSS */
dirExclusionRegExp: /node_modules|test|build/ /* on va exclure du processus de build certain repertoires. */
})

De nombreuses options sont disponibles, je vous invite à consulter la documentation. Il est à noter que r.js nécessite node ou Rhino pour fonctionner.

 

Compatibilité

  • IE 6+
  • Firefox 2+
  • Safari 3.2+
  • Chrome 3+
  • Opera 10

 

Liens utiles

Cet article n’est qu’un aperçu des fonctionnalités principales de RequireJS. Pour plus de détails :

Commentaire

6 − = quatre

iMDEO recrute !

REJOIGNEZ-NOUS

A la recherche de nouveaux talents (développeurs web et mobile, chefs de projet,...)

Voir les annonces