A pattern to use RequireJS config in a separate file

If you have used RequireJS, you most definitely have come across this: Repeatation of requirejs configuration.

You end up repeating the shims and paths in multiple locations. We can minimise this by using requirejs.config(config) method.

requirejs.config() will help you define or override your dependencies configuration.

1

requirejs.config({'baseUrl': '/my/app/url/'});

Here is an examlpe on how I use requirejs.config method for minimising repeatation.

First let us define the reusable configuration file. Lets name it rconfig.js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47


/** Put common requirejs configurations here **/
define([''], function () {
    'use strict';

    return {
        packages: [
            {
                name: 'common-directives',
                location: '/apps/common/directives/'
            },
            {
                name: 'common-filters',
                location: '/apps/common/filters'
            },
            {
                name: 'common-interceptors',
                location: '/apps/common/interceptors'
            }
        ],
        shim: {
            'angular': {
                deps: ['jquery'],
                exports: 'angular'
            },
            'angular-cookies': ['angular'],
            'ui-router': ['angular'],
            'ui-utils': ['angular'],
            'ui-utils-ieshiv': ['angular'],
            'bootstrap': ['jquery'],
            'ui-bootstrap-tpls': ['angular'],
            'ui-bootstrap': ['angular', 'ui-bootstrap-tpls'],
        },
        paths: {
            'jquery': ['/lib/jquery-2.1.1.min'],
            'angular': ['/lib/angular.min'],
            'angular-cookies': ['/lib/angular-cookies'],
            'ui-router': ['/lib/angular-ui/angular-ui-router.min'],
            'ui-utils': ['/lib/angular-ui/ui-utils.min'],
            'ui-utils-ieshiv': ['/lib/angular-ui/ui-utils-ieshiv.min'],
            'bootstrap': ['/lib/bootstrap.min'],
            'ui-bootstrap': ['/lib/angular-ui/ui-bootstrap.min'],
            'ui-bootstrap-tpls': ['/lib/angular-ui/ui-bootstrap-tpls.min'],
            'lodash': ['/lib/lodash.min'],
            'constants': ['/apps/common/constants']
        }
    }
});

Here we have defined the paths for all the common dependencies.

Now let us use it in two different places.

1. main.js for home app

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


(function (requirejs) {
    'use strict';

    // -- RequireJS config --
    requirejs.config({
        // Packages = top-level folders; loads a contained file named 'main.js"
        packages: ['home', 'dashboard',
        {
            'name': 'dashboard-settings',
            'location': '/apps/dashboard/settings'
        }
        ],
        paths: {
            'rconfig': ['/apps/common/rconfig']
        }
    });

    requirejs.onError = function (err) {
        console.log(err);
    };

    // here we are loading rconfig as dependency
    require(['rconfig'], function (rconfig) {
        // update config
        requirejs.config(rconfig);

        // Load the app. This is kept minimal so it doesn't need much updating.
        require(['angular', 'jquery', './home', 'ui-router', 'ui-utils', 'angular-cookies',
            'common-directives', 'common-filters', 'common-interceptors',
            'bootstrap', 'ui-bootstrap', 'ui-bootstrap-tpls'], function (angular, $) {
                angular.bootstrap(document, ['home']);
            });
    });

})(requirejs);

2. main.js for dashboard app

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


(function (requirejs) {
    'use strict';

    // -- RequireJS config --
    requirejs.config({
        // Packages = top-level folders; loads a contained file named 'main.js"
        packages: ['home', 'dashboard',
        {
            'name': 'dashboard-settings',
            'location': '/apps/dashboard/settings'
        }
        ],
        paths: {
            'rconfig': ['/apps/common/rconfig']
        }
    });

    requirejs.onError = function (err) {
        console.log(err);
    };

    // here we are loading rconfig as dependency
    require(['rconfig'], function (rconfig) {
        // update config
        requirejs.config(rconfig);

        // Load the app. This is kept minimal so it doesn't need much updating.
        require(['angular', 'jquery', './dashboard', 'ui-router', 'ui-utils', 'angular-cookies',
            'common-directives', 'common-filters', 'common-interceptors',
            'bootstrap', 'ui-bootstrap', 'ui-bootstrap-tpls'], function (angular, $) {
                angular.bootstrap(document, ['dashboard']);
            });
    });

})(requirejs);

The file-layout here is like the following.

Hope it helps!