RequireJS Optimizer - what does it actually do?

Question

I was under the impression that the RequireJS Optimizer would look through the defined dependencies and gather up all of the referenced js files in an application and bundle them up into a single, large js file.

You'd then be able to reference that single file in your html script include.

But this doesn't seem to be the case. When I run this, I get a large file, but it includes the original main.js file that includes paths to files in a directory structure.

What is the point of that? Why does the new large file contain paths outside of itself if everything needed is contained within? It seems like the optimizer would rewrite the paths to point to "./" or something.

When I bundle up the entire app and reference that in the page, I'm getting errors about missing files that ARE included in the large js file:

Uncaught object                                                     require.js:70
GET http://localhost/ui/js/modules/mod_limeLight.js 404 (Not Found) require.js:729
Uncaught Error: Script error for: mod_limelight
http://requirejs.org/docs/errors.html#scripterror 

build.js:

({
    baseUrl: "./src/ui/scripts",
    name: "main",
    mainConfigFile : "src/ui/scripts/main.js",
    out: "dist/ui/scripts/main-built.js"
})

main.js

'use strict';
require.config({
    "paths": {
        "jquery":               "libs/jquery-1.11.0.min",
        "twitter_bootstrap":    "../bower_components/bootstrap/dist/js/bootstrap.min",
        "respondjs":            "../bower_components/respond/dest/respond.min",
        "debouncejs":           "libs/dw-debounce",
        "carousel":             "libs/jquery.carouFredSel-6.2.1-packed",
        "swipe":                "libs/jquery.touchSwipe.min",

        "app":                  "app",
        "OOo_config":           'libs/oo_conf_entry-ck', // Opinion Lab pop-up

        //modules
        "addthis":              "//s7.addthis.com/js/300/addthis_widget",
        "mod_addThis":          "modules/mod_AddThis",
        "limelight":            "//assets.delvenetworks.com/player/embed",
        "mod_limelight":        "modules/mod_limeLight"
    },
    "shim": {
        "twitter_bootstrap": ["jquery"],
        "carousel": ["jquery"],
        "swipe": ["jquery"],
        "packeryjs": ["jquery"]
    }
});

require([
    "jquery",
    "app",
    "OOo_config",
    "respondjs",
    "mod_addThis",
    "mod_limelight"
], function ($, app) {

    app.init();

});

example module starts off like:

define([
    "jquery", "debouncejs", "limelight"
],
function ($) {
    'use strict';

    var playerElement = ...
});

Then running:

node r.js -o build.js

What am I missing? Why is it trying to fetch files that are contained in that large js file?

Thanks, Scott

Answer 1

It identifies the included modules using their usual paths, because that’s simple and unambiguous, and it works. The files aren’t fetched, of course.