requirejs: Build settings for a common.js module along with a main.js module where the result will be only two .js files served

Question

When following the general setup of example-multipage provided in the docs the common.js module seems to cause dependencies to make async XMLHttpRequest calls.

my directory structure is:

|-static
   |-core
      |-js
        |-myApp.js
        |-require.js
        |-common.js
        |-app.build.js
        |-app
          |-myApp.js

   |-vendor
      |-js
        |-jquery.js
        |-bootstrap.js
        |-fancybox.js

contents of common.js:

require.config({
    baseUrl: "/static/core/js",
    paths: {
        'jquery':'../../vendor/jquery/1.7.2/jquery',
        'bootstrap':'../../vendor/bootstrap/2.2.2/js/bootstrap',
        'fancybox':'../../vendor/fancybox/2.0.6/jquery.fancybox',
    },
    shim: {
        'bootstrap':['jquery'],
        'fancybox': ['jquery'],
        'app/messages': ["jquery"],
    },
    waitSeconds: 12
});

contents of myApp.js

require(['common'], function (common) {
    require(['app/myApp']);
});

Contents of app/myApp.js (YES I KNOW I AM POLLUTING THE GLOBAL NAMESPACE):

define(function (require) {
    var $ = require('jquery');
    require('fancybox');
    require('app/messages');

    //all my code here
});

My modules are defined as follows in app.build.js:

mainConfigFile: 'common.js',
removeCombined: true,

modules: [
    {
        name: 'common',
        include: ['jquery', 'bootstrap']
    },
    {
        name: 'myApp',
        include: ['app/myApp'],
        exclude: ['common']
    },

],

When i REMOVE the common module from the build, everything works fine. I get one myApp.js file with all the dependencies combined into the one file (perfect!).

When i ADD the common module back in, the resulting js files are loaded: common.js(combined), myApp.js(combined), PLUS I ALSO GET myApp.js, common.js, bootstrap.js, fancybox.js, messages.js and nothing works.

One guess is that because i am creating paths to actual .js files in the require.config it is loading them as dependencies. Where if i only defined paths to directories this would not occur?

UPDATE: Since my common.js is shimmed, looks like i need to follow example-multipage-shim. Getting closer.

Orville

@Louis I cant seem to find a build.txt in my output directory. Where would it be located? – Orville

@Louis I am using django-require so maybe there is something going on there, but i definitely have no build.txt file in my output directory. – Orville

@Louis That was it. REQUIRE_EXCLUDE = ("build.txt",) was the default so i put REQUIRE_EXCLUDE = () in my settings and i got the build .txt. However, my setup is much more involved than my highly abbreviated example above. Plus, see my updated at the bottom of the question. – Orville

@Louis I have actually abandoned this set up after i wrote the question favoring a stand alone module with almond. Again, due to limitations (by design) of dejango-require. Which causes issues with the multipage shim setup. Have you worked with django-require? – Orville

Nope, I've never used django-require. I have a Django project that uses RequireJS but everything is done without special support for RequireJS: make to build the thing, a bunch of ad-hoc Django settings and that's about it. – Surroundings

@Surroundings Thanks for all your help. It's really hard to find knowledgeable people when i comes to requirejs. Pelase take a look at my new setup question. #22416707 – Orville

@Surroundings I'm curious about how you integrated requirejs with django. The only reason i went for require-django was to streamline the build with collectstatic and to handle the url to the cache busted files generated with CachedStaticFilesStorage. Could you give me any references for how you did it? In your last comment you referred to make i'm not sure what that is. – Orville

The project is here but I do not think it will be particularly enlightening. The documentation is sparse and designed only to serve our needs. Make is a build system. – Surroundings