Using require.js
The basics
/* HTML Page */
At </body> element
<script data-main="js/common" src=""js/library/require.js"></script>
<script>
// 'common' refers to the file common.js (the file extension is not needed)
require(['common'], function(){
// Load up this page's script once the 'common' script has loaded
require(['page/home']);
})
</script>/* Configure */
File js/common.js (As references in the HTML page)
// Configure RequireJS
requirejs.config({
// The baseUrl is the relative path from which all files are referenced
baseUrl: "js",
// Scripts defined with paths here can later by referenced using just the alias they're defined with
// It's assumed all files end with .js so it's not necessary to add this to the file path
paths: {
// Standard libraries
jquery: [
'//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min',
// If the CDN location fails, load from a local copy
'library/jquery-2.1.3.min.js'
],
// IE stuff
html5shiv: "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv",
nwmatcher: "//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min",
respond: "//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min",
selectivizr: "//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b",
rem: "js/library/rem.min"
}
});/* Define */
// Specify the dependencies needed for this script page (in this instance 'jquery')
define(['jquery']).function($){
// Code to run in this file which can return stuff to the calling page
var methods = {
doMethod: function(){
alert('Method done');
}
};
return methods;
}
// A require call pulls in a file and all it's associated dependencies
require(['page/home'].function(Y){
Y.doMethod();
}) Using require.js
In the <head> element of all pages, scripts are included for require.js itself and also the main javascript file for that application instance, appmain.js
<script src="../../js/library/require.js"></script>
<script src="../../production/js/app-name/appmain.js"></script> gruntfile.js
gruntfile.js drives the generation of production javascript for require. Key component chunks include:
- appmain - includes application specific app.js and global main.js files
- core - main foundation global components
- modernizr - production version of modernizr
- bootstrapper - includes other components required by the application on most pages
Each of these chunks have a duplicate version in the gruntfile with a debug suffix, compiling to a debug directory. These chunks are identical except for the output directory and the additional option of beautify: true to leave the code unminified and human readable.
app.js
app.js configures the paths and dependencies (shims) for require modules. This file is customised per application.
main.js
Initialises js for the site. This file is global across all applications.
This file analyses all data-require attributes in the page to load the necessary modules.
component-to-be-required.js
The component that's going to be called by require needs to be wrapped in a definition.
define( ["jquery”, “otherModule”, “thirdModule”], function($, module) {
// code here
});OR
define(“name of module”, ["jquery”, “otherModule”, “thirdModule”], function($, module) {
// code here
});The name of the module is only required in some cases where multiple files are compiled into one.
The require method should not be needed in most cases as the data-require attribute will do that. It is only required for the main file as it has to initialize the code that will listen for the data-require attribute.
headelement.html
The CDN path differs by environment and is used in the app.js file (compiled into appmain.js).
<script type="text/javascript">
var cdnPath = '../../';
</script>Load require.js itself
<script src=“../../js/library/require.js”></script>Load the compiled app.js and main.js compiled file
<script src=“../../production/js/corporate/appmain.js"></script>
jsbodyend.html
jsbodyend.html includes the script require([“global/main”]); which initialises all the require selectors defined in main.js