Reduce duplication of code among RequireJS modules

Question

I use RequireJS and I have the following build profile for r.js. My main file is app.js which imports jquery, ember, handlebars, and underscore. I have another file specific to a page of my application called change_email.js. It imports ember as well.

({
    modules: [{
        name: 'js/app',
        // jQuery is included in the page
        exclude: ['jquery'],
        include: ['ember', 'handlebars', 'underscore']
    }, {
        name: 'js/change_email',
        exclude: ['jquery', 'js/app']
    }],
    mainConfigFile: 'requirejs_config.js'
})

My RequireJS config looks like:

requirejs.config({
    paths: {
        'jquery': 'js/lib/jquery',
        'ember': 'js/lib/ember-1.0.0-rc.6.1',
        'handlebars': 'js/lib/handlebars-1.0.0-rc.4',
        'underscore': 'js/lib/underscore'
    },
    shim: {
        'underscore': {
            exports: '_'
        },
        'ember': {
            deps: ['jquery', 'handlebars'],
            exports: 'Ember'
        },
        'handlebars': {
            exports: 'Handlebars'
        }
    }
});

I noticed that sometimes when I load the page, Ember is run from app.js and sometimes it is run from ember-1.0.0-rc.6.1.js. I assume that this is a race condition. In the case when Ember runs from ember-1.0.0-rc.6.1.js, 2 files containing Ember have been downloaded app.js and ember-1.0.0-rc.6.1.js. This seems counter intuitive because one of the goals of using RequireJS is to cut down on the amount of code that is downloaded.

I thought about making app.js import and then export ember and make other modules import Ember from app.js. I don't really like this idea because it requires me to change my imports to an unnatural style.

What's the most efficient way to remove the duplication?

While your question isn't a duplicate of this one, my [answer here](http://stackoverflow.com/questions/18500478/dynamically-included-javascript-and-dependencies/18500559#18500559) may give you a possible work-around. — Jeremy J Starcher, Aug 29 '13 at 05:52
What modules are currently in app.js? Can you open the built file and list them? — Chris, Sep 04 '13 at 17:52

score 0 · Accepted Answer · answered Sep 04 '13 at 22:09

The mistake was not defining where production code should load modules from. By defining the following in my production config, I got everything working fine.

requirejs.config({
    baseUrl: '/static',
    paths: {
        'jquery': 'js/app',
        'ember': 'js/app',
        'handlebars': 'js/app',
        'underscore': 'js/app',
        'underscore.string': 'js/app'
    }
});

Reduce duplication of code among RequireJS modules

1 Answers1