requirejs: requiring an r.js optimized file

Question

I've built a web app using require.js, and successfully used r.js to combine all module definitions into a single file.

Once the r.js optimized file has been created, I expected to just be able to require the optimized file on its own, but it fails to execute any of code after loading and defining the modules:

require([
    'app1/optimizedAppFile'
], function (optimizedApp) {

    //optimizedApp is undefined, even though it loaded 
    //the file and executed the module definitions in debugger

});

Is it appropriate to load / instantiate the app by defining the path to the top level module of the optimized file in require.config.js, and then requiring that in main.js? i.e.

requirejs.config({

    paths: {
        'optimizedApp.topLevelModule' : 'app1/optimizedAppFile'
        //optimizedApp.topLevelModule is the full module name
        //app1/optimizedAppFile is the combined file from r.js
    }

});

Now your question suffers from being vague. 1. Is your application working at all if you don't optimize it? Determining this should really be the first step towards resolution. If it works without optimization then you know that optimization is the problem. If not, then you have a much more basic issue. 2. "optimizedAppFile is undefined" Well, there is nothing that defines it in the code you show in your question. Your code has a variable named optimizedApp not optimizedAppFile. — Louis
RequireJS pushes dependencies, in order, to the function's arguments, so I expected the dependencies defined in optimizedAppFile to map to the first argument of the function. Non-optimized RequireJS modules (one module per file) are working, and send their output to the function arguments. Your answer is helping me piece it together, though-- there must not be anything in RequireJS that's telling optimizedAppFile to return an object to send to the function, although my expectation was to see something along the lines of optimizedApp.module1, optimizedApp.module2, etc. — Drew Howard Bollinger

Chihung Yu Chihung Yu · Accepted Answer · 2014-04-24T07:06:40

Yes, after optimized your code via rjs, you can just require that file.

However, I had this problem today as well. After spending hours debugging I found out the current 1.1.2 backbone version has a piece of code detecting if AMD (the function "define" exists).

after removing it, backbone looks like this

//     Backbone.js 1.1.2

//     (c) 2010-2014 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
//     Backbone may be freely distributed under the MIT license.
//     For all details and documentation:
//     http://backbonejs.org

(function(root, factory) {
  root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender ||     root.$));
}(this, function(root, Backbone, _, $) {

So basically what I did is make it globally accessible and add shim for it

 require.config({
  baseUrl: "/static/src/scripts/js",
  paths: {
    jquery: 'vendors/jquery/jquery',
    underscore: 'vendors/underscore/underscore',
    backbone: 'vendors/backbone/backbone',
    marionette: 'vendors/backbone/backbone.marionette'
  },
  shim: {
    jquery: {
      exports: "jQuery"
    },
    underscore: {
      exports: "_"
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    marionette: {
      deps: ['backbone'],
      exports: 'Marionette'
    }
  }
});

Inspect element and check your console and see what it complains, and turns of optimize by setting the optimize option to false for the rjs and look for which part it errors out.

requirejs: requiring an r.js optimized file

1 Answers