requirejs Getting started with requirejs
Remarks
RequireJS is an implementation of the Asynchronous Module (AMD) API used to load javascript files asynchronously (i.e. without blocking) and manage dependencies between multiple javascript files. It also includes an optimization tool for combining and minimizing script files for deployment while allowing the developer to maintain logically separate code.
Hello World
The following example will demonstrate a basic installation and setup of RequireJS.
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) {
alert(say.hello());
});
</script>
</body>
Create a new JS file at scripts/say.js and paste the following content:
define([], function(){
return {
hello: function(){
return "Hello World";
}
};
});
Your project structure should look like this:
- project
- index.html
- scripts
- say.js
Open the index.html file in a browser and it will alert you with 'Hello World'.
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) { alert(say.hello()); }); </script> -
The
saymodule returns a single object with one functionhellodefined.define([], function(){ return { hello: function(){ return "Hello World"; } }; });
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
-
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" } }; });
Incorporating Non-AMD Libraries
Not all libraries are defined in a way that is compatible with AMD and RequireJS's define() function. The author's have addressed this by including a shim directive for configuring those dependencies.
One example is using the jQuery UI Layout Plugin. That plugin depends on jQuery. You can configure it like this:
requirejs.config({
paths: {
'jquery': '../path/to/jquery.min',
'jquery.layout': '../path/to/jquery.layout.min'
},
shim: {
'jquery.layout': {
deps: ['jquery']
}
}
});
And then use it in a layout module like this:
define(['jquery', 'jquery.layout'], function ($, layout) {
$('body').layout();
});
Using data-main Entry Point
A single entry point to your application is possible with RequireJS by using the data-main attributed within the <script> tag.
<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
On load, RequireJS will look for the data-main attribute and inject the main script tag into the DOM with the async attribute set. It is this file that you will want to do any configuration before kicking off your application.
For example:
// 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")) );
});
