4
votes

I'm using require.js for the first time and all is working pretty for the moment. However, I started wanting to make a build. The idea is to create one file with ALL my js and templates. However, every time I use r.js it just includes the dependencies of my main module.

here is my app.build.js:

({
appDir: "public/javascripts",
baseUrl: ".",
dir: "build",
paths: {
    "hbs": "lib/hbs",
    "jquery": "lib/jquery",
    "Handlebars": "lib/Handlebars",
    "Backbone": "lib/backbone",
    "underscore": "lib/underscore",
    "bootstrap": "lib/bootstrap.min.js"
},
modules: [{name: "main"}],
shim: {
    "bootstrap": {
      deps: ["jquery"],
      exports: "$.fn.popover"
    },
    underscore: {
      exports: '_'
    },
    'Handlebars': {
      exports: 'Handlebars'
    },
    Backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
}}) 

the beginning of main.js:

require.config({
 paths: {
    "hbs": "lib/hbs",
    "Handlebars": "lib/Handlebars",
    "Backbone": "lib/backbone",
    "underscore": "lib/underscore",
    "jquery": "lib/jquery",
    "bootstrap": "lib/bootstrap.min.js"
  },
  hbs: {
    disableI18n: true
  },
  shim: {
    "bootstrap": {
      deps: ["jquery"],
      exports: "$.fn.popover"
    },
    underscore: {
      exports: '_'
    },
    'Handlebars': {
      exports: 'Handlebars'
    },
    Backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});

require(['jquery', 'Backbone', 'videos'], function($, Backbone, Videos) { // Whatever });

In this case the final file created in my build 'main.js' only contains: jquery, underscore, backbone and videos. How can I make sure it also includes the dependencies of the module videos namely: the template 'hbs!template/videos/show'. How can I also make sure that bootstrap.min.js is also added even though it's not required anywhere? Finally should I remove the require.config as it will define paths that are not supposed to be anymore as all the modules are in the final file?

2

2 Answers

3
votes

In you app.build.js include link to your main config file and you can remove specified modules, this should include all dependencies used by main module.

({
  ...
  mainConfigFile: 'main.js',
  ...
})

You may also skip paths and shim, since that is already specified in main. Bellow is sample config that I'm using in one of my projects and works like a charm:

({
    name: 'main',
    baseUrl: '../',
    // optimize: 'none',
    optimize: 'uglify2',
    exclude: ['jquery'],
    paths: {
        requireLib: 'require'
    },
    mainConfigFile: '../main.js',
    out: '../main.min.js',
    // A function that if defined will be called for every file read in the
    // build that is done to trace JS dependencies.
    // Remove references to console.log(...)
    onBuildRead: function (moduleName, path, contents) {
        return contents;
        // return contents.replace(/console.log(.*);/g, '');
    }
})
8
votes

To have the optimizer include all the nested dependencies, include this option in your build file or command line:

{
     findNestedDependencies: true
}

This makes it work as you'd expect, and you won't have to include all your dependencies in your main file. It's kind of a secret ... I never saw this in the docs but I read it on a random blog somewhere.