How to get started with RequireJS

Note: If you are using jQuery, there is a targeted jQuery tutorial

Get RequireJS § 1

Go to the download page and get the file.

Add RequireJS § 2

Note: For jQuery-specific advice, see the jQuery integration page

This setup assumes you keep all your JavaScript files in a "scripts" directory in your project. For example, if you have a project that has an project.html page, with some scripts, the directory layout might look like so:

  • project-directory/
    • project.html
    • scripts/
      • main.js
      • helper/
        • util.js

Add require.js to the scripts directory, so it looks like so:

  • project-directory/
    • project.html
    • scripts/
      • main.js
      • require.js
      • helper/
        • util.js

To take full advantage of the optimization tool, it is suggested that you keep all inline script out of the HTML, and only reference require.js with a require call like so to load your script:

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>
The path rules used for data-main changed in RequireJS 0.23. Before that version, data-main="main" for the above example.

Inside of main.js, you can use require() to load any other scripts you need to run:

require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});

That is it! Check out the API docs to learn more about require() and define().

Optimize § 3

Once you are finished doing development and want to deploy your code for your end users, you can use the optimizer to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify the result.