Cargando Backbone y Underscore usando RequireJS

Actualización : A partir de la versión 1.3.0 Se eliminó el soporte para AMD (RequireJS) .

Puede usar la bifurcación amdjs/Backbone 0.9.1 y la bifurcación amdjs/Underscore 1.3.1 con soporte AMD de James Burke (el mantenedor de RequireJS).

Más información sobre El soporte de AMD para Underscore y Backbone.

// main.js using RequireJS 1.0.7
require.config({
    paths: {
        'jquery': 'libs/jquery/1.7.1/jquery',
        'underscore': 'libs/underscore/1.3.1-amdjs/underscore', // AMD support
        'backbone': 'libs/backbone/0.9.1-amdjs/backbone', // AMD support
        'templates': '../templates'
    }
});

require([
    'domReady', // optional, using RequireJS domReady plugin
    'app'
], function(domReady, app){
    domReady(function () {
        app.initialize();
    });
});

Los módulos están correctamente registrados y no hay necesidad del complemento order:

// app.js
define([
    'jquery', 
    'underscore',
    'backbone'
], function($, _, Backbone){
    return {
        initialize: function(){
            // you can use $, _ or Backbone here
        }
    };
});

El subrayado es en realidad opcional, porque Backbone ahora obtiene sus dependencias por su cuenta:

// app.js
define(['jquery', 'backbone'], function($, Backbone){
    return {
        initialize: function(){
            // you can use $ and Backbone here with
            // dependencies loaded i.e. Underscore
        }
    };
});

Con algunos AMD sugar también podrías escribirlo así:

define(function(require) {
    var Backbone = require('backbone'),
        $ = require('jquery');

    return {
        initialize: function(){
            // you can use $ and Backbone here with
            // dependencies loaded i.e. Underscore
        }
    };
});

Con respecto al error del optimizador: doble comprobación de la configuración de compilación. Asumo que su configuración de ruta está desactivada. Si tiene una configuración de directorio similar a RequireJS Docs puede usar:

// app.build.js
({
    appDir: "../",
    baseUrl: "js",
    dir: "../../ui-build",
    paths: {
        'jquery': 'libs/jquery/1.7.1/jquery',
        'underscore': 'libs/underscore/1.3.1-amdjs/underscore',
        'backbone': 'libs/backbone/0.9.1-amdjs/backbone',
        'templates': '../templates'
    }, 
    modules: [
        {
            name: "main"
        }
    ]
})

Para referencia, a partir de la versión 1.1.1 (~Feb '13), Backbone también se registra como un módulo AMD. Funcionará con requirejs sin la necesidad de usar su configuración shim. (La bifurcación amdjs de James Burke tampoco se ha actualizado desde 1.1.0)

Escribiré directamente, puede leer la explicación en requirejs.org, usted podría utilizar el siguiente código como un fragmento para su uso diario; (p. s. yo uso yeoman) (desde muchas cosas actualizadas, estoy publicando esto a partir de febrero 2014.)

Asegúrese de incluir script en su índice.html

<!-- build:js({app,.tmp}) scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->

Entonces, en general.js

require.config({
    shim: {
        'backbone': {
            deps: ['../bower_components/underscore/underscore.js', 'jquery'],
            exports: 'Backbone'
        }
    },

    paths: {
        jquery: '../bower_components/jquery/jquery',
        backbone: '../bower_components/backbone/backbone'
    }
});

require(['views/app'], function(AppView){
    new AppView();
});

App.js

/**
 * App View
 */
define(['backbone', 'router'], function(Backbone, MainRouter) {
    var AppView = Backbone.View.extend({
        el: 'body',

        initialize: function() {
            App.Router = new MainRouter();
            Backbone.history.start();
        }
    });

    return AppView;
});

Espero haber sido útil.!

Buenas noticias, Underscore 1.6.0 ahora soporta requirejs define !!!

Las versiones por debajo de esto requieren cuñas, o requieren subrayado.js entonces espera ciegamente que la variable global " _ " no ha sido aplastada (lo cual para ser justo es una apuesta justa)

Simplemente cárgalo por

  requirejs.config({
    paths: {
        "underscore": "PATH/underscore-1.6.0.min",
    }
  });

require.config({
  waitSeconds: 500,
  paths: {
    jquery: "libs/jquery/jquery",
    jqueryCookie: "libs/jquery/jquery.cookie",
    .....
  },

  shim: {
    jqxcore: {
      export: "$",
      deps: ["jquery"]
    },
    jqxbuttons: {
      export: "$",
      deps: ["jquery", "jqxcore"]
    }
    ............
  }
});

require([
 <i> // Load our app module and pass it to our definition function</i>
  "app"
], function(App) {
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});