Comenzando con requirejs

Hello World con dependencias anidadas

El siguiente ejemplo amplía Hello World demostrando múltiples dependencias usando la función define().

Cree un nuevo archivo HTML llamado index.html y pegue el siguiente contenido:

<!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>

Cree un nuevo archivo JS en scripts/say.js y pegue el siguiente contenido:

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

Cree un nuevo archivo JS en scripts/translations.js y pegue el siguiente contenido:

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

La estructura de su proyecto debería verse así:

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

Abra el archivo index.html en un navegador y la consola generará:

Hello World
Hola Mundo
Bonjour Le Monde

Explicación

  1. Cargue el archivo de script require.js.

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

  2. Cargue el módulo say de forma asíncrona desde la carpeta scripts. (Tenga en cuenta que no necesita la extensión .js al hacer referencia al módulo). El módulo devuelto luego se pasa a la función proporcionada donde se invoca hello().

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

  3. El módulo say devuelve un solo objeto con una función hola definida, pero en este caso hemos definido una dependencia (scripts/translations) y extraeremos las traducciones de allí.

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

  4. El módulo traducciones simplemente devuelve un objeto con varias traducciones de palabras.

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

Hola Mundo

El siguiente ejemplo demostrará una instalación y configuración básicas de RequireJS.

Cree un nuevo archivo HTML llamado index.html y pegue el siguiente contenido:

<!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>

Cree un nuevo archivo JS en scripts/say.js y pegue el siguiente contenido:

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

La estructura de su proyecto debería verse así:

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

Abra el archivo index.html en un navegador y le alertará con ‘Hello World’.

Explicación

  1. Cargue el archivo de script require.js.

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

  2. Cargue el módulo say de forma asíncrona desde la carpeta scripts. (Tenga en cuenta que no necesita la extensión .js al hacer referencia al módulo). El módulo devuelto luego se pasa a la función proporcionada donde se invoca hello().

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

  3. El módulo say devuelve un solo objeto con una función hola definida.

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

Uso del punto de entrada principal de datos

Un único punto de entrada a su aplicación es posible con RequireJS usando el data-main atribuido dentro de la etiqueta <script>.

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

Al cargar, RequireJS buscará el atributo data-main e inyectará la etiqueta del script principal en el DOM con el conjunto de atributos async. Es este archivo el que querrá hacer cualquier configuración antes de iniciar su aplicación.

Por ejemplo:

// 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")) );
});

Incorporación de bibliotecas que no son de AMD

No todas las bibliotecas están definidas de manera compatible con AMD y la función define() de RequireJS. El autor ha abordado esto al incluir una directiva shim para configurar esas dependencias.

Un ejemplo es usar el complemento de diseño de interfaz de usuario de jQuery. Ese complemento depende de jQuery. Puedes configurarlo así:

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

Y luego utilícelo en un módulo de diseño como este:

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