Carregando Backbone e Sublinhado usando RequireJS

Estou tentando carregar o Backbone e o Underscore (assim como o jQuery) com o RequireJS. Com as versões mais recentes do Backbone e Underscore, parece meio complicado. Por um lado, o Underscore se registra automaticamente como um módulo, mas o Backbone assume que o Underscore está disponível globalmente. Devo também observar que o Backbone não parece se registrar como um módulo, o que o torna meio inconsistente com as outras bibliotecas. Este é o melhor main.js que eu poderia criar que funciona:

require(
{
    paths: {
        'backbone': 'libs/backbone/backbone-require',
        'templates': '../templates'
    }
},
[
    // jQuery registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',

    // Underscore registers itself as a module.
    'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js'
], function() {

    // These nested require() calls are just due to how Backbone is built.  Underscore basically says if require()
    // is available then it will automatically register an "underscore" module, but it won't register underscore
    // as a global "_".  However, Backbone expects Underscore to be a global variable.  To make this work, we require
    // the Underscore module after it's been defined from within Underscore and set it as a global variable for
    // Backbone's sake.  Hopefully Backbone will soon be able to use the Underscore module directly instead of
    // assuming it's global.
    require(['underscore'], function(_) {
        window._ = _;
    });

    require([
        'order!http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js',
        'order!app'
    ], function(a, app) {
        app.initialize();
    })
});

Devo mencionar que, enquanto funciona, o otimizador engasga com isso. Eu recebo o seguinte:

Tracing dependencies for: main
js: "/home/httpd/aahardy/requirejs/r.js", line 7619: exception from uncaught JavaScript throw: Error: Error: Error evaluating module "undefined" at location "/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js":
JavaException: java.io.FileNotFoundException: /home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js (No such file or directory)
fileName:/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js
lineNumber: undefined
http://requirejs.org/docs/errors.html#defineerror
In module tree:
    main

Existe uma maneira melhor de lidar com isso? Obrigado!

O RequireJS 2.X agora aborda organicamente os módulos não-AMD, como Backbone & Underscore, muito melhor, usando a nova shimconfiguração.

A shimconfiguração é simples de usar: (1) afirma-se as dependências ( deps), se houver, (que podem ser da pathsconfiguração ou podem ser caminhos válidos). (2) (opcionalmente) especifique o nome da variável global do arquivo que você está exibindo, que deve ser exportado para as funções de seu módulo que exigem isso. (Se você não especificar as exportações, precisará usar apenas o global, pois nada será passado para suas funções de exigência / definição.)

Aqui está um exemplo simples de shimcomo carregar o Backbone. Ele também adiciona uma exportação para sublinhado, mesmo que não tenha nenhuma dependência.

require.config({
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});

//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) {   // or, you could use these deps in a separate module using define

});

^{Nota: este código simplificado assume que jquery, backbone e underscore estão em arquivos denominados "jquery.js", "backbone.js" e "underscore.js" no mesmo diretório que este código "principal" (que se torna a baseURL para requerer ) Se não for esse o caso, você precisará usar uma configuração de caminhos .}

Pessoalmente, acho que com a shimfuncionalidade incorporada, as vantagens de não usar uma versão bifurcada do Backbone & Underscore superam os benefícios do uso do garfo AMD recomendado na outra resposta popular, mas de qualquer maneira funciona.

Atualização : A partir da versão 1.3.0, o Underscore removeu o suporte AMD (RequireJS) .

Você pode usar o amdjs / Backbone 0.9.1 e o garfo amdjs / Underscore 1.3.1 com suporte da AMD de James Burke (o mantenedor do RequireJS).

Mais informações sobre o suporte da AMD para Underscore e 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();
    });
});

Os módulos estão registrados corretamente e não há necessidade do plug-in de pedido:

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

Sublinhado é realmente opcional, porque o Backbone agora obtém suas dependências por conta própria:

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

Com um pouco de açúcar AMD, você também pode escrever assim:

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

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

Em relação ao erro do otimizador: verifique novamente sua configuração de compilação. Presumo que a configuração do seu caminho esteja desativada. Se você tiver uma configuração de diretório semelhante ao RequireJS Docs, poderá 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 referência, a partir da versão 1.1.1 (~ fev '13), o Backbone também se registra como um módulo AMD . Ele funcionará com requirejs sem a necessidade de usar sua configuração de shim. ( O garfo amdjs de James Burke também não foi atualizado desde 1.1.0)

Boas notícias, o Underscore 1.6.0 agora suporta requirejs define !!!

as versões abaixo disso requerem calços ou exigem underscore.js, esperando cegamente que a variável global "_" não tenha sido esmagada (o que ser justo é uma aposta justa)

basta carregá-lo

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

Escreverei diretamente, você pode ler a explicação em requirejs.org, você pode usar o código abaixo como um trecho para o seu uso diário; (ps eu uso yeoman) (como muitas coisas foram atualizadas, estou publicando isso em fevereiro de 2014.)

Certifique-se de incluir o script no seu index.html

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

Então, no main.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 ter sido útil.!

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();
});