r.js, almond: Is it possible for two .js files containing almond to share dependencies?

Question

Is it possible to use almond with a multipage setup as follows:

common.js is loaded on all pages & contains almond, bootstrap & jquery

main1.js is loaded only on page 1 & contains almond, and app/main1.js which requires jquery. When i run the build for main1.js i am excluding bootstrap & jquery since it is in common.

on page1 common.js & main1.js are loaded but, i get an error: Uncaught Error: app/main1 missing jquery.

Is it possible to do this with almond or am I doing something wrong?

UPDATE: I am useing django-require which converts python objects to command line entries for r.js, further more it renames the supplied modules to 'almond' and adds the named module to the include (this may be what is causing my error?). Also note, django-require does not permit include/exclude for REQUIRE_STANDALONE_MODULES, i added this functionality:

REQUIRE_STANDALONE_MODULES = {

    "common": {
        "out": "common.js",
        "include": ["bootstrap", "jquery"],
        "build_profile": "module.build.js"
    },
    "main1": {
        "out": "main1.js",
        "exclude": ["bootstrap", "jquery"],
        "build_profile": "module.build.js"
    }
}

Main1.js

require(['app/main1']);

This translates to a build file entry like this:

modules = {
    "almond": {
        "out": "common.js",
        "include": ["common", "bootstrap", "jquery"],
        "build_profile": "module.build.js"
    },
    "almond": {
        "out": "main1.js",
        "include:"main1", 
        "exclude": ["bootstrap", "jquery"],
        "build_profile": "module.build.js"
    }
}

Louis Louis · Accepted Answer · 2014-03-20T11:01:37

It is possible. You just need to be clear about your inclusions and exclusions. In the following setup all the modules are stored in the js subdirectory and the output of optimization goes out to build. For the sake of simplicity jQuery is stored as js/jquery.js so there's no need to call require.config.

The files in js are: almond.js, jquery.js, main1.js and main2.js.

Here is the build configuration:

({
    baseUrl: "js",
    optimize: "none", // So that we can see what is going on in the bundles.
    dir: "build",
    removeCombined: true,
    skipDirOptimize: true,
    modules: [
        {
            name: "common",
            create: true,
            include: ["almond", "jquery"]
        },
        {
            name: "main1",
            exclude: ["jquery"],
            insertRequire: ["main1"]
        },
        {
            name: "main2",
            exclude: ["jquery"],
            insertRequire: ["main2"]
        }
    ]
})

The create: true option for the common module is required so that the optimizer creates it. Presumably, a call to require.config would be put in js/common.js and then you'd remove this option.

The results of this optimization are loaded on page 1 with:

<script type="text/javascript" src="build/common.js"></script>
<script type="text/javascript" src="build/main1.js"></script>

Page 2 would load build/main2.js instead.

Loading Bootstrap requires a RequireJS configuration which is the same as the general case and is otherwise treated exactly like jQuery in the code above.

r.js, almond: Is it possible for two .js files containing almond to share dependencies?

1 Answers