Last Updated: January 28, 2019
· steveniseki

RequireJS basic introduction


Module based coding eases the effort for maintenance and increases reusability.

In RequireJS we separate code into modules which each handle a single responsibility.

RequireJS implements the AMD API, another API for module loading is CommonJS.

<b>Simple Example</b>

In this example we will create a <b>user module</b> and a <b>post module</b>.

The script tag that initialises require.js includes a “data-main” attribute pointing to the main.js file


<!doctype html>
<script data-main="js/main" src="js/vendor/require.js"></script>

The main module initializes our app.The require() function takes two arguments: an array of dependencies, and a callback function to execute once all the dependencies are loaded. This callback function loads our user and post modules.


require(['user', 'blog/post'], function(u, p){
    var user = new u(), post = new p();

The user module has a define() function provided by RequireJS, which has to return something, which will be forwarded to the callback function.


define([], function () {

    var returnedModule = function () {
        var name = 'Steven';
        this.getName = function () {
            return name;

    return returnedModule; 

The post module in the js/blog/ folder takes in a dependency for the user module. It returns a method which posts the user name and message to the console.


define(['user'], function (u) {
    // load in user module
    var user = new u();

    var returnedModule = function () {
        var name = user.getName();

        this.makePost = function (message) {
            console.log( name + message + " posted at " + new Date() );

    return returnedModule;  

Now we have finished our application, I wanted to add some dependancies like jQuery or underscore. To set up libraries like jQuery as a dependency, we must tell RequireJS the path to find the JavaScript file, and the global variable to use in our main.js

<b>Loading other dependencies</b>

    paths: {
        'jQuery': 'vendor/jquery-1.9.0.min',
        'underscore': 'vendor/underscore-1.9.min'
    shim: {
        'jQuery': {
            exports: '$'
        'underscore': {
            exports: '_'

Then we can use these libraries by adding them into our modules.

require(['user', 'jQuery'], function (u, $) {

    var user = new u()
    // now append user name to the dom using jQuery

I have found another really good intro post on stack overflow showing a basic starter app using requirejs as well as Matthieu Larcher's example tutorial that this post is based on.

3 Responses
Add your response


You should ommit the .js in the script tag data-main attribute.

So the following:
<script data-main="js/main.js" src="js/vendor/require.js"></script>

<script data-main="js/main" src="js/vendor/require.js"></script>

over 1 year ago ·

thanks, fixed it up

over 1 year ago ·

thanks , very good intro.

over 1 year ago ·