Consultez nos archives

RequireToutesLesChoses

Dans un article précédent, j’ai introduit un environnement de développement Javascript utilisant un tas de librairies Javascript qui seront probablement assez nouvelles pour la plupart des gens.

Dans cet article-ci, je vais me concentrer sur l’une de ces librairies: RequireJS.

Pourquoi des chargeurs de modules?

La plupart des développeurs ne géreraient jamais leur code côté serveur de la même manière qu’ils gèrent leur Javascript. Tout est séparé en petits fichiers, dans une structure de dossiers organisée, et même si vous êtes vraiment très cool, vous utilisez quelque genre d’injecteur de dépendances aussi.

Avec l’usage d’un chargeur de module, dans notre cas RequireJS, vous pouvez avoir ça pour Javascript aussi… ou presque.

Code source

Si vous voulez travailler avec le code lui-même, vous pouvez cloner le dépot git suivant:
https://github.com/seedboxtech/techblog-js.git

Le code pour ce post est sous: /www/examples/requirejs
(note de traduction: le dépôt et les exemples sont en langue originale anglaise :) )

Exemple de base

Ceci est un exemple extrêmement simple qui charge Jquery à partir du CDN de Google, et qui ajoute ensuite quelquechose au DOM.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>RequireJS - Basic Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <!-- The data-main attribute points to the file to execute once requirejs is loaded -->
        <!-- For kicks, I'm going to load requirejs off a CDN (jQuery will be aswell) -->
        <script data-main="js/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
    </body>
</html>

main.js
// Simple configuration pour aller chercher JQuery sur le CDN google
requirejs.config({
"paths": {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min"
}
});

// Demander jquery et exécuter le code qui en dépends
require(["jquery"], function ($) {
$( "body" ).append( "jQuery Loaded!" );
});

Évidemment vous ne voulez pas utiliser ce genre d’implémentation pour quoi que ce soit de sérieux parce que votre configuration est dans le même fichier que votre code d’application et c’est plus ou moins horrifiant.

Exemple de configuration réutilisable

Pour la suite, vous voulez installer un seul fichier de configuration, et le réutiliser dans vos modules.

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>RequireJS - Reusable configuration Example</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <!-- The data-main attribute points to the file to execute once requirejs is loaded -->
        <!-- For kicks, I'm going to load requirejs off a CDN (jQuery will be aswell) -->
        <script data-main="js/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
    </body>
</html>

main.js
// Maintenant, on demande notre configuration et ensuite on demande juste notre code d'application
require(["config"], function () {
require(["app"]);
});

config.js
// Simple configuration pour aller chercher JQuery sur le CDN google
requirejs.config({
"paths": {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min"
}
});

app.js
// Maintenant nous demandons les resources qu'on a besoin du fichier de configuration, et ensuite on exécute notre application
define(["jquery"], function ($) {
$( "body" ).append( "jQuery Loaded through external config file!" );
});

Alors dans ce cas, vous pouvez définir des configurations et dépendances pour toutes sortes de modules que vous ayez et réutiliser cette configuration pour tout développement futur.

Un exemple “patrimonial”

Alors vous êtes peut-être en train de vous dire, c’est génial pour les nouvelles choses que je construis, mais j’ai une tonne de vieux code que j’utilise dans mes applications Javascript, qu’est-ce que je peux faire à propos de ça?

Premièrement, allons voir comment un exemple de vieux code pourrait être implémenté.

legacy.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>RequireJS - Legacy Example (Legacy way to implement)</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <!-- The data-main attribute points to the file to execute once requirejs is loaded -->
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/legacy.lib.js"></script>
        <script src="js/legacy.js"></script>
        <script>
                $( document ).ready(function() {
                var legacy = new Legacy("Legacy module loaded with old include style!");
                        });
                </script>
    </body>
</html>

legacy.js
// Setup de classes de base
function Legacy(message) {
// Procéder au rendu principal quand il est créé
this.renderMain(message);
}

// Procéder au rendu de n'importe quel message
Legacy.prototype.renderMain = function(message) {
lib.pushToBody(message);
}

legacy.lib.js
// Je n'ai aucune idée si ce genre de définition de librairie statique existe dans le projet de qui que ce soit, ça me semblait approprié :)
var lib = {};

// Un simple ajout d'une variable au DOM
lib.pushToBody = function (message) {
// Je suppose qu'ici, je priais que $ soit défini?
$('body').append(message);
}

Maintenant voyons le même exemple, cette fois avec RequireJS.
index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>RequireJS - Legacy Example (RequireJS implementation)</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <!-- The data-main attribute points to the file to execute once requirejs is loaded -->
        <!-- For kicks, I'm going to load requirejs off a CDN (jQuery will be aswell) -->
                <script data-main="js/main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
    </body>
</html>

main.js
// Maintenant on demande notre configuration, et ensuite on demande juste notre code d'application.
require(["config"], function () {
require(["app"]);
});

config.js
// Simple configuration pour aller chercher JQuery sur le CDN google
requirejs.config({
// L'URL de base que tous les chemins utiliserons
baseUrl: "js/",

// Définition des chemins pour notre application patrimoniale
// On a pas vraiment besoin d'ajouter "legacy" ou "legacy lib" ici, étant donné que notre URL de base pointe déjà où ils sont.
"paths": {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min",
"legacy": "legacy",
"legacy.lib": "legacy.lib"
},

// On utilise une configuration dite "cale" ("shim" en anglais) pour définir nos variables exportées pour nos modules patrimoniaux.
"shim": {
"legacy" : {
// On définit aussi les dépendances de nos librairies patrimoniales dans la cale
"deps": ["legacy.lib", "jquery"],
"exports": "Legacy"
},
"legacy.lib": {
"exports": "lib"
}
}

});

app.js
// Maintenant on demande les ressources dont on a besoin de la configuration, et on exécute notre code d'application
define(["legacy"], function (Legacy) {
var legacy = new Legacy("Legacy module loaded with RequireJS!");
});

legacy.js
// Setup de classes de base
function Legacy(message) {
// Procéder au rendu principal lorsqu'il est créé
this.renderMain(message);
}

// Procéder au rendu de n'importe quel message
Legacy.prototype.renderMain = function(message) {
lib.pushToBody(message);
}

legacy.lib.js
// Je n'ai aucune idée si ce genre de définition de librairie static existe dans le projet de qui que ce soit, ça me semblait
var lib = {};

// Un simple ajout d'une variable au DOM
lib.pushToBody = function (message) {
// Je suppose qu'ici, je priais que $ soit défini?
$('body').append(message);
}

Maintenant que vous avez votre configuration installée, avec les dépendances clairement définies pour le vieux module, vous pouvez l’inclure dans un autre module facilement et avoir tout ce dont il a besoin inclu automatiquement.

De plus, si vous avez pris note, la version de RequireJS ne dépend jamais de l’événement “document ready”. Cela assurera que votre code Javascript s’exécutera aussitôt que vos scripts soient prêts au lieu d’attendre que tout soit chargé avant de faire quoi que ce soit. Je ne détaillerai pas davantage le pourquoi de ma haine de “document ready”.

Excellent! Et quoi ensuite?

Et bien, vous avez probablement une bonne idée des bases pour utiliser RequireJS et des bénéfices que ce genre de module peut apporter à votre projet, mais il y a encore plus à apprendre.

L’Optimiseur RequireJS

Cet optimiseur minifiera le module complet ainsi que ses dépendances en le pointant à un seul fichier d’application. Vous pouvez aussi le configurer pour gérer des couches de configurations pour des applications plus grosses, ainsi que plusieurs autres options.

Plugin texte

Ajouter le plugin texte pour RequireJS est très facile à faire et permet d’inclure des fichiers textes en guise de ressources pour vos applications. C’est très utile pour inclure des fichiers de gabarits Javascript. L’optimiseur minifiera ces fichiers externes avec la minification javascript aussi.

Plugin CSS (plusieurs options ici)

Comme le plugin de texte, ceux-ci permettent d’inclure des fichiers CSS être inclus en tant que dépendances à un module utilisé. Comme le plugin texte, l’optimiseur peut aussi minifier les dépendances CSS.

– Colin

(traduit par Olivier T.)

Comments

comments