Chargement de colonne vertébrale et le trait de soulignement en utilisant RequireJS

Question

Je suis en train de charger épine Dorsale et le trait de Soulignement (ainsi que jQuery) avec RequireJS. Avec les dernières versions de l'épine Dorsale et le trait de Soulignement, il semble un peu difficile. Pour l'un, trait de Soulignement s'enregistre automatiquement dans un module, mais épine Dorsale suppose trait de Soulignement est disponible dans le monde entier. Je tiens également à noter que la Dorsale ne semble pas s'inscrire en tant que module qui en fait une sorte d'incohérence avec les autres libs. C'est le meilleur main.js je pouvais venir qui fonctionne:

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

Je dois mentionner que, même si elle fonctionne, l'optimiseur étouffe. J'ai le message suivant:

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

Est-il une meilleure façon de gérer cela? Merci!

Answer 1

RequireJS 2.X maintenant organiquement adresses non-AMD modules tels que l'épine Dorsale Et le trait de Soulignement beaucoup mieux, à l'aide de la nouvelle - shim configuration.

L' shim configuration est simple à utiliser: (1) l'un des états les dépendances (deps), le cas échéant, (qui peut être de l' paths configuration, ou peut-être valable chemins eux-mêmes). (2) (facultatif) spécifiez le nom de la variable globale à partir du fichier de calage, qui doit être exportées vers votre module de fonctions qui en ont besoin. (Si vous ne spécifiez pas les exportations, alors vous aurez besoin d'utiliser l'échelle mondiale, que rien ne sera transmis à votre besoin/définir des fonctions.)

Voici un exemple simple d'utilisation de shim à la charge de la colonne vertébrale. Il ajoute également un export pour souligner, même si elle n'a pas de dépendances.

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

});

^{Remarque: cette simplifié de code suppose que jquery, backbone et le trait de soulignement sont dans les fichiers nommés "jquery.js", "backbone.js" et "underscore.js" dans le même répertoire que cette "main" du code, qui devient le baseURL pour exiger). Si ce n'est pas le cas, vous aurez besoin d'utiliser un des chemins de config.}

Personnellement, je pense qu'avec le haut- shim fonctionnalités, les avantages de ne pas utiliser un fork de la version de l'épine Dorsale Et Soulignent l'emportent sur les avantages de l'utilisation de l'AMD fourche recommandée dans l'autre réponse, mais de toute façon œuvres.

Answer 2

Mise à jour: à partir de la version 1.3.0 de Soulignement supprimé AMD (RequireJS) de soutien.

Vous pouvez utiliser le amdjs/Backbone 0.9.1 et la amdjs/trait de Soulignement 1.3.1 fourche avec support AMD de James Burke (le responsable de RequireJS).

Plus d'infos sur le support AMD pour Souligner et de la colonne vertébrale.

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

Les modules sont correctement enregistrés et il n'est pas nécessaire pour la commande du plugin:

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

Trait de soulignement est en fait facultatif, en raison de la Dorsale obtient ses dépendances sur son propre:

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

Avec certains AMD sucre vous pouvez aussi l'écrire comme ceci:

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

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

Concernant l'optimiseur d'erreur: de façon optimale votre configuration de build. Je suppose que votre configuration de chemin d'accès est éteint. Si vous avez un répertoire de configuration similaire à la RequireJS Docs , vous pouvez utiliser:

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

Answer 3

Pour référence, à partir de la version 1.1.1 (~ 13 Fev), épine dorsale aussi enregistre lui-même en tant que module d’AMD. Il travaillera avec requirejs sans avoir besoin d’utiliser sa config shim. (Égalementfourche amdjs de James Burke qui n’a pas été actualisé depuis 1.1.0)

Answer 4

Je vais écrire vers le bas de directlym vous pouvez lire l’explication sur requerejs.org, vous pouvez utiliser code ci-dessous un extrait de code pour votre usage quotidien ; (p.s. j’utilise yeoman) (depuis beaucoup de choses à jour, im ce détachement à compter de 2014 Feb.)

Assurez-vous que vous avez inclus le script dans votre index.html

Puis, en main.js

App.js

J’espère que j’étais utile. !

Answer 5

Bonne nouvelle, trait de soulignement 1.6.0 maintenant définir les supports requirejs !!!

les versions ci-dessous cela requièrent cales, ou nécessitant une underscore.js puis aveuglément dans l’espoir que la variable globale « _ » n’a pas été brisée (pour être juste est un pari juste)

Chargez simplement dedans par