BackboneJS and RequireJS configuration

One of the big challenges is getting backbonejs and requirejs working together without jumping through lots of hoops.  After reading quite a few blog posts, stackoverflow answers I finally came up with a simple canonical solution to the problem.

The assumed directory layout is something like:

static/
       app/
           config.js
           main.js
       vendor/
           ...third party stuff like backbone, jquery, etc.etc.

Cutting to the chase here’s the configuration file I use

// This is your: static/app/config.js file
//
require.config({
    deps: ["main"],

    paths: {
        // Libraries
        jquery: "../vendor/jquery",
        underscore: "../vendor/underscore",
        backbone: "../vendor/backbone",
        handlebars: "../vendor/handlebars",
        bootstrap: "../vendor/bootstrap"
    },

    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        handlebars: {
            exports: 'Handlebars'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

With that line in your HTML file and a configuration that is similar to what I’ve show you should be up and running, you can now create your main.js file that has the following simple format that you’ll be extending shortly.

// This is your: static/app/main.js file
//   - this is loaded as the deps: ["main"] in  your configuration
require([
  // Libs
  "jquery",
  "underscore",
  "backbone",
],

function ($, _, Backbone) {
});