it-swarm.com.de

Laden von Backbone und Unterstrich mit RequireJS

Ich versuche, Backbone und Underscore (sowie jQuery) mit RequireJS zu laden. Mit den neuesten Versionen von Backbone und Underscore erscheint es irgendwie schwierig. Zum einen registriert sich Underscore automatisch als Modul, Backbone geht jedoch davon aus, dass Underscore global verfügbar ist. Ich sollte auch beachten, dass Backbone sich nicht als ein Modul zu registrieren scheint, das es irgendwie inkonsistent mit den anderen Bibliotheken macht. Dies ist das beste main.js, das mir dazu einfällt:

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

Ich sollte erwähnen, dass, während es funktioniert, der Optimierer drosselt. Ich erhalte folgendes: 

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

Gibt es einen besseren Weg, damit umzugehen? Vielen Dank!

172
Aaronius

RequireJS 2.X adressiert jetzt nicht-AMD-Module wie Backbone & Underscore wesentlich besser mit der neuen shim -Konfiguration. 

Die shim-Konfiguration ist einfach zu verwenden: (1) Man gibt gegebenenfalls die Abhängigkeiten (deps) an (die möglicherweise aus der paths-Konfiguration stammen oder selbst gültige Pfade sein können). (2) (optional) Geben Sie den globalen Variablennamen aus der Datei an, die Sie verschieben, die in die Modulfunktionen exportiert werden soll, für die dies erforderlich ist. (Wenn Sie die Exporte nicht angeben, müssen Sie nur das globale Element verwenden, da nichts an Ihre Bedarfs-/Definitionsfunktionen übergeben wird.)

Hier ist ein einfaches Beispiel für die Verwendung von shim zum Laden von Backbone. Es wird auch ein Export für Unterstrich hinzugefügt, auch wenn er keine Abhängigkeiten hat. 

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

});

Hinweis: Dieser vereinfachte Code setzt voraus, dass Jquery, Backbone und Unterstrich in Dateien mit den Namen "jquery.js", "backbone.js" und "underscore.js" im selben Verzeichnis wie dieser "main" -Code (der zu die baseURL für erfordern). Ist dies nicht der Fall, müssen Sie eine pfade config verwenden.

Ich persönlich denke, mit der eingebauten shim-Funktionalität überwiegen die Vorteile der Verwendung einer gegabelten Version von Backbone & Underscore die Vorteile der Verwendung der AMD-Gabel, die in der anderen gängigen Antwort empfohlen wird.

293
Ben Roberts

Update: Ab der Version 1.3.0 Unterstützt AMD (RequireJS) Unterstützung .

Sie können den amdjs/Backbone 0.9.1 und den amdjs/Underscore 1.3.1 Gabel mit AMD-Unterstützung von James Burke (dem Betreuer von RequireJS) verwenden.

Weitere Informationen zur AMD-Unterstützung für Underscore und 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();
    });
});

Die Module sind ordnungsgemäß registriert und es ist kein Bestell-Plugin erforderlich:

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

Underscore ist eigentlich optional, da Backbone jetzt seine Abhängigkeiten selbst erhält:

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

Mit etwas AMD-Zucker könnte man es auch so schreiben:

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

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

Fehler beim Optimierer: Überprüfen Sie Ihre Build-Konfiguration. Ich gehe davon aus, dass Ihre Pfadkonfiguration deaktiviert ist. Wenn Sie ein Verzeichnis eingerichtet haben, das dem RequireJS Docs ähnelt, können Sie Folgendes verwenden:

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

Zu Referenzzwecken ist Backbone ab Version 1.1.1 (~ Feb '13) auch registriert sich als AMD-Modul . Es funktioniert mit requirjs, ohne dass die Shim-Konfiguration verwendet werden muss. ( James Burkes amdjs fork wurde seit 1.1.0 auch nicht aktualisiert.)

5
biril

Ich werde direkt aufschreiben, Sie können die Erklärung auf requiredjs.org nachlesen. Sie könnten den Code als Schnipsel für den täglichen Gebrauch verwenden. (p.s. ich benutze yeoman) (da viele Dinge aktualisiert wurden, bin ich seit Februar 2014 hier.)

Stellen Sie sicher, dass Sie ein Skript in Ihre index.html aufgenommen haben

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

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

Ich hoffe ich war nützlich.!

4
STEEL

Gute Nachrichten, Unterstützt 1.6.0 unterstützt jetztjajs definieren !!!

versionen darunter erfordern Shims oder erfordern Unterstriche.

laden Sie es einfach durch

  requirejs.config({
    paths: {
        "underscore": "PATH/underscore-1.6.0.min",
    }
  });
4
aqm
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();
});
0
Sumesh TG