requirejs Getting started with requirejs Hello World with Nested Dependencies
Example
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
-
Load the require.js script file.
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script> -
Load the
saymodule asynchronously from thescriptsfolder. (Note that you do not need the.jsextension when referencing module.) The returned module is then passed to the provided function wherehello()is invoked.<script> requirejs(["scripts/say"], function(say) { console.log(say.hello("english")); console.log(say.hello("spanish")); console.log(say.hello("french")); }); </script> -
The
saymodule returns a single object with one functionhellodefined, 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; } }; }); -
The
translationsmodule 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" } }; });
