Search code examples
backbone.jsrequirejsminifyamduglifyjs

Uglifying a RequireJS/Backbone project into one single .js file?

I worked along the following tutorial to try to optimize my project into one single .js file, but unfortunately I can't seem to get the expected results. I get r.js to create an optimized folder for me, but instead of a single file, I get uglified copies of each individual .js file in their respective folders. Seems like that last concatenation step is somehow missing.

I'm trying to leverage an existing config file instead of using paths, I don't know if that specific step is breaking it.

My build/app.build.js is:

({
  appDir: '../',
  baseUrl: 'js',
  mainConfigFile: '../js/config.js',
  dir: '../../my-app-build',
  modules: [{
    name: 'main'
  }]
})

My main.js file has the config file as its dependency:

require(["config"], function() {
  require(['underscore', [...]
    [...]
  }
}

And the config file is where all of my project dependencies are declared:

require.config({
  baseUrl: "js",
  paths: {[...]},
  shim: {...]},
});

Does anyone have insight into why I might not be getting that single file output that I'm looking for? I tried the other approach in this post, but that only ever produces main.js for me with the config file prepended to it.

Thanks!

Solution

  • The issue was caused by the following option missing from the r.js build configuration file:

    findNestedDependencies: true

    Without it, r.js would not go past the first require in main.js, thus loading only config.js and none of the next level of dependencies. Just for reference (note that it saves the product of optimization in the same source folder, which is not ideal) looks like this:

    ({
  baseUrl: '.',
  mainConfigFile: 'config.js',
  name: 'main',
  out: 'main-build.js',
  findNestedDependencies: true,
})