3

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"
    }
}
Arctelix
  • 4,478
  • 3
  • 27
  • 38

1 Answers1

2

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.

Louis
  • 146,715
  • 28
  • 274
  • 320
  • See my update in the orig question. I have the same build settings as you. Also note that my common module actually exists as common.js so there is no need for me to create=true and the require calls are made within common, main1, and main2 so there should not be a need for insert require. @Louis – Arctelix Mar 20 '14 at 18:07
  • The main1.js calls `require(['app/main1'])` and this is the module that is not found. However, the code for this module does exist in the built file. So possibly the renaming of main1 to almond is causing the issue? – Arctelix Mar 20 '14 at 18:14
  • @louis hey, looks like i forgot to accept this excellent answer. My apologies for the delay. – Arctelix Nov 05 '15 at 21:03
  • @arctelix Glad to have been helpful! – Louis Nov 05 '15 at 21:04