requirejs Getting started with requirejs Hello World
Example
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"; } }; });
