Getting started with requirejs – Hello World with Nested Dependencies

The following example expands upon Hello World by demonstrating multiple dependencies using the define() function.

Create a new HTML file called index.html and paste the following content:

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

Create a new JS file at scripts/say.js and paste the following content:

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

Create a new JS file at scripts/translations.js and paste the following content:

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

Your project structure should look like this:

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

Open the index.html file in a browser and the console will output:

Hello World
Hola Mundo
Bonjour Le Monde

Explanation

  1. Load the require.js script file.

    <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
    
  2. Load the say module asynchronously from the scripts folder. (Note that you do not need the .js extension when referencing module.) The returned module is then passed to the provided function where hello() is invoked.

    <script>
         requirejs(["scripts/say"], function(say) {
             console.log(say.hello("english"));
             console.log(say.hello("spanish"));
             console.log(say.hello("french"));
         });
    </script>
    
  3. The say module returns a single object with one function hello defined, but in this case we have defined a dependency (scripts/translations) and we will pull the translations from there.

    define(["scripts/translations"], function(translations){
        return {
            hello: function(language){
               return translations[language].hello + " " + translations[language].world;
            }
        };
    });
    
  4. The translations module simply returns an object with various word translations.

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

if you want to reproduce, please indicate the source:
Getting started with requirejs – Hello World with Nested Dependencies - CodeDay