RequireJS Kullanarak Omurga ve Alt Çizgi Yükleme

RequireJS ile omurga ve alt çizgi (yanı sıra jQuery) yüklemeye çalışıyorum. Backbone ve Underscore'un en son sürümleriyle biraz zor görünüyor. Birincisi, Underscore kendini otomatik olarak bir modül olarak kaydeder, ancak Omurga, Underscore'un küresel olarak kullanılabilir olduğunu varsayar. Ayrıca, Backbone'un kendisini diğer kütüphanelerle tutarsız hale getiren bir modül olarak kaydetmediğini de belirtmeliyim. Bu işe yarayabilir en iyi main.js:

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

Şunu da belirtmeliyim ki, çalışırken optimizatör bunu boğuyor. Aşağıdakileri alıyorum:

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

Bunu ele almanın daha iyi bir yolu var mı? Teşekkürler!

RequireJS 2.X artık yeni shimyapılandırmayı kullanarak Backbone & Undercore gibi AMD olmayan modülleri organik olarak daha iyi ele alıyor .

shimYapılandırma kullanımı basittir: (1) bir bağımlılıkları belirtmektedir ( depseğer varsa), (arasında olabilir ki pathsyapılandırma ya da geçerli bir yollarının kendilerini olabilir). (2) (isteğe bağlı), küçültmekte olduğunuz dosyadan, gerektiren modül işlevlerinize aktarılması gereken genel değişken adını belirtin. (Dışa aktarmaları belirtmezseniz, gereksinim / tanım işlevlerinize hiçbir şey geçmeyeceğinden, yalnızca global olanı kullanmanız gerekir.)

İşte shimomurga yüklemek için basit bir örnek kullanım . Herhangi bir bağımlılığı olmasa da alt çizgi için bir ihracat ekler.

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

});

^{Not: Bu basitleştirilmiş kod, jquery, omurga ve alt çizginin "jquery.js", "backbone.js" ve "underscore.js" adlı dosyalarda bu "ana" kodla aynı dizinde olduğunu varsayar ( ). Bu durumda, bir yollar yapılandırması kullanmanız gerekir .}

Kişisel olarak yerleşik shimişlevsellik ile düşünüyorum , Backbone & Undercore'un çatallı bir versiyonunu kullanmamanın avantajları, diğer popüler cevapta önerilen AMD çatalını kullanmanın avantajlarından daha ağır basar, ancak her iki şekilde de çalışır.

Güncelleme : Sürüm 1.3.0'dan itibaren Alt çizgi AMD (RequireJS) desteğini kaldırdı .

Sen kullanabilirsiniz amdjs / Omurga 0.9.1 ve amdjs / Altı çizili 1.3.1 James Burke AMD desteği (RequireJS ait sürdürme) ile çatalı.

Alt çizgi ve omurga için AMD desteği hakkında daha fazla bilgi .

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

Modüller uygun şekilde kaydedilmiştir ve sipariş eklentisine gerek yoktur:

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

Alt çizgi aslında isteğe bağlıdır, çünkü Omurga şimdi bağımlılıklarını kendi başına alır:

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

Bazı AMD şekeri ile de şöyle yazabilirsiniz:

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

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

Optimize edici hatasıyla ilgili olarak: derleme yapılandırmanızı iki kez kontrol edin. Yol yapılandırmanızın kapalı olduğunu varsayıyorum. RequireJS Dokümanlarına benzer bir dizin kurulumunuz varsa şunları kullanabilirsiniz:

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

Referans olarak, 1.1.1 sürümünden (~ Feb '13) itibaren, Backbone kendisini bir AMD modülü olarak kaydeder . Şim yapılandırmasını kullanmaya gerek kalmadan requirjs ile çalışacaktır. ( James Burke'ün amdjs çatalı da 1.1.0'dan beri güncellenmedi)

İyi haber, Alt çizgi 1.6.0 şimdi gerektirir tanımlamak destekler !!!

bunun altındaki sürümler şimler gerektirir veya underscore.js gerektirir, ardından körü körüne "_" global değişkeninin parçalanmadığını umar (bu adil olmak adil bir bahistir)

sadece tarafından yükleyin

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

Ben doğrudan yazacağım, requirjs.org açıklamasını okuyabilir, günlük kullanımınız için bir kod parçası olarak aşağıdaki kodu kullanabilirsiniz; (ps i use yeoman) (birçok şey güncellendiğinden, bunu Şubat 2014'ten itibaren gönderiyorum.)

İndex.html dosyasına komut dosyası eklediğinizden emin olun

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

Sonra main.js'de

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

Umarım faydalı olmuştur.!

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