Caricamento di Backbone e Underscore mediante RequireJS

Sto cercando di caricare Backbone e Underscore (così come jQuery) con RequireJS. Con le ultime versioni di Backbone e Underscore, sembra un po 'complicato. Per uno, Underscore si registra automaticamente come modulo, ma Backbone presuppone che Underscore sia disponibile a livello globale. Dovrei anche notare che Backbone non sembra registrarsi come un modulo che lo rende in qualche modo incompatibile con le altre librerie. Questo è il miglior main.js che ho potuto inventare che funziona:

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 dire che, mentre funziona, l'ottimizzatore lo soffoca. Ricevo quanto segue:

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

C'è un modo migliore di gestirlo? Grazie!

RequireJS 2.X ora risolve molto meglio i moduli non AMD come Backbone e Underscore, usando il nuovoshim configurazione.

La shimconfigurazione è semplice da usare: (1) uno indica le dipendenze ( deps), se presenti, (che possono provenire dapaths configurazione o possono essere percorsi validi stessi). (2) (facoltativamente) specifica il nome della variabile globale dal file che stai scagliando, che dovrebbe essere esportato nelle funzioni del tuo modulo che lo richiedono. (Se non specifichi le esportazioni, dovrai semplicemente utilizzare il globale, poiché nulla verrà passato nelle tue funzioni di richiesta / definizione.)

Ecco un semplice esempio di utilizzo shimper caricare Backbone. Aggiunge inoltre un'esportazione per il carattere di sottolineatura, anche se non ha dipendenze.

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: questo codice semplificato presuppone che jquery, backbone e underscore siano nei file denominati "jquery.js", "backbone.js" e "underscore.js" nella stessa directory di questo codice "main" (che diventa il baseURL per richiedere ). In caso contrario, dovrai utilizzare una configurazione dei percorsi .}

Personalmente penso con la shimfunzionalità integrata, i vantaggi di non utilizzare una versione biforcuta di Backbone e Underscore superano i vantaggi dell'utilizzo del fork AMD raccomandato nell'altra risposta popolare, ma in entrambi i casi funziona.

Aggiornamento : dalla versione 1.3.0 Underscore ha rimosso il supporto AMD (RequireJS) .

Puoi usare amdjs / Backbone 0.9.1 e il fork amdjs / Underscore 1.3.1 con il supporto AMD di James Burke (il manutentore di RequireJS).

Ulteriori informazioni sul supporto AMD per 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();
    });
});

I moduli sono registrati correttamente e non è necessario il plug-in dell'ordine:

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

Underscore è in realtà facoltativo, perché Backbone ora ottiene le sue dipendenze da solo:

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

Con un po 'di zucchero AMD potresti anche scriverlo in questo modo:

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

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

Per quanto riguarda l'errore di ottimizzazione: ricontrollare la configurazione della build. Presumo che la configurazione del tuo percorso sia disattivata. Se si dispone di un'impostazione di directory simile a Documenti RequireJS, è possibile utilizzare:

// 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"
        }
    ]
})

Per riferimento, a partire dalla versione 1.1.1 (~ Feb '13), Backbone si registra anche come modulo AMD . Funzionerà con requestjs senza la necessità di usare la sua configurazione shim. ( Anche il fork degli amdjs di James Burke non è stato aggiornato dalla 1.1.0)

Buone notizie, Underscore 1.6.0 ora supporta Requisito Definisci !!!

le versioni sottostanti richiedono spessori o richiedono underscore.js sperando poi ciecamente che la variabile globale "_" non sia stata distrutta (che per essere onesti è una scommessa giusta)

caricalo semplicemente da

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

Scriverò direttamente, puoi leggere la spiegazione su requestjs.org, potresti usare il codice qui sotto come frammento per il tuo uso quotidiano; (ps io uso yeoman) (dal momento che molte cose sono state aggiornate, lo sto pubblicando da febbraio 2014.)

Assicurati di aver incluso lo script in index.html

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

Quindi, in 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;
});

Spero di esserti stato utile.!

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