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. Let’s name it rconfig.js.

rconfig.jsview raw
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.

main.js for home appview raw
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);
main.js for dashboard appview raw
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!