Premiers pas avec requirejs

Hello World avec des dépendances imbriquées

L’exemple suivant développe Hello World en démontrant plusieurs dépendances à l’aide de la fonction define().

Créez un nouveau fichier HTML appelé “index.html” et collez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello RequireJS</title>
    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
    <!-- place content here --->
    <script>
        requirejs(["scripts/say"], function(say) {
            console.log(say.hello("english"));
            console.log(say.hello("spanish"));
            console.log(say.hello("french"));
        });
    </script>
</body>

Créez un nouveau fichier JS dans scripts/say.js et collez le contenu suivant :

define(["scripts/translations"], function(translations){
    return {
        hello: function(language){
           return translations[language].hello + " " + translations[language].world;
        }
    };
});

Créez un nouveau fichier JS dans scripts/translations.js et collez le contenu suivant :

define([], function(){
    return {
        "english": {
            hello: "Hello",
            world: "World"
        },
        "spanish": {
            hello: "Hola",
            world: "Mundo"
        },
        "french": {
            hello: "Bonjour",
            world: "Le Monde"
        }
    };
});

La structure de votre projet devrait ressembler à ceci :

- project
    - index.html
    - scripts
        - say.js
        - translations.js

Ouvrez le fichier index.html dans un navigateur et la console affichera :

Hello World
Hola Mundo
Bonjour Le Monde

Explication

  1. Chargez le fichier de script require.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>

  2. Chargez le module say de manière asynchrone depuis le dossier scripts. (Notez que vous n’avez pas besoin de l’extension .js lors du référencement du module.) Le module retourné est ensuite passé à la fonction fournie où hello() est invoqué.

    <script>
     requirejs(["scripts/say"], function(say) {
         console.log(say.hello("english"));
         console.log(say.hello("spanish"));
         console.log(say.hello("french"));
     });
</script>

  3. Le module say renvoie un seul objet avec une fonction hello définie, mais dans ce cas, nous avons défini une dépendance (scripts/translations) et nous allons extraire les traductions à partir de là.

     define(["scripts/translations"], function(translations){
     return {
         hello: function(language){
            return translations[language].hello + " " + translations[language].world;
         }
     };
 });

  4. Le module translations renvoie simplement un objet avec différentes traductions de mots.

     define([], function(){
     return {
         "english": {
             hello: "Hello",
             world: "World"
         },
         "spanish": {
             hello: "Hola",
             world: "Mundo"
         },
         "french": {
             hello: "Bonjour",
             world: "Le Monde"
         }
     };
 });

Bonjour le monde

L’exemple suivant illustre une installation et une configuration de base de RequireJS.

Créez un nouveau fichier HTML appelé “index.html” et collez le contenu suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello RequireJS</title>
    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
    <!-- place content here --->
    <script>
        requirejs(["scripts/say"], function(say) {
            alert(say.hello());
        });
    </script>
</body>

Créez un nouveau fichier JS dans scripts/say.js et collez le contenu suivant :

define([], function(){
    return {
        hello: function(){
           return "Hello World";
        }
    };
});

La structure de votre projet devrait ressembler à ceci :

- project
    - index.html
    - scripts
        - say.js

Ouvrez le fichier index.html dans un navigateur et il vous alertera avec ‘Hello World’.

Explication

  1. Chargez le fichier de script require.js.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>

  2. Chargez le module say de manière asynchrone depuis le dossier scripts. (Notez que vous n’avez pas besoin de l’extension .js lors du référencement du module.) Le module retourné est ensuite passé à la fonction fournie où hello() est invoqué.

    <script>
   requirejs(["scripts/say"], function(say) {
       alert(say.hello());
   });
</script>

  3. Le module say renvoie un seul objet avec une fonction hello définie.

     define([], function(){
     return {
         hello: function(){
            return "Hello World";
         }
     };
 });

Utilisation du point d’entrée principal des données

Un point d’entrée unique vers votre application est possible avec RequireJS en utilisant le data-main attribué dans la balise <script>.

<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>

Au chargement, RequireJS recherchera l’attribut data-main et injectera la balise de script principale dans le DOM avec l’attribut async défini. C’est ce fichier que vous voudrez faire n’importe quelle configuration avant de lancer votre application.

Par exemple:

// contents of scripts/main.js
require.config({
    waitSeconds: 10,
    paths: {
        jquery: 'libs/jquery-1.4.2.min'
    }
});

requirejs(["jquery", "libs/say"], function($, say) {
    var $body = $('body');
    $body.append( $('<p/>').text(say.hello("english")) );
    $body.append( $('<p/>').text(say.hello("spanish")) );
    $body.append( $('<p/>').text(say.hello("french")) );
});

Incorporant des bibliothèques non-AMD

Toutes les bibliothèques ne sont pas définies d’une manière compatible avec la fonction define() d’AMD et de RequireJS. Les auteurs ont résolu ce problème en incluant une directive “shim” pour configurer ces dépendances.

Un exemple utilise le plugin jQuery UI Layout. Ce plugin dépend de jQuery. Vous pouvez le configurer comme ceci :

requirejs.config({
    paths: {
        'jquery': '../path/to/jquery.min',
        'jquery.layout': '../path/to/jquery.layout.min'
    },
    shim: {
        'jquery.layout': {
            deps: ['jquery']
        }
    }
});

Et utilisez-le ensuite dans un module de mise en page comme celui-ci :

define(['jquery', 'jquery.layout'], function ($, layout) {
    $('body').layout();
});