javascript - define - Cargando Backbone y Subrayar usando RequireJS

requirejs github

Question

Estoy intentando cargar Backbone y Underscore (así como jQuery) con RequireJS. Con las últimas versiones de Backbone y Underscore, parece un poco complicado. Por un lado, Underscore se registra automáticamente como un módulo, pero Backbone asume que el subrayado está disponible globalmente. También debería tener en cuenta que Backbone no parece registrarse a sí mismo como un módulo que lo hace algo inconsistente con las otras librerías. Este es el mejor main.js con el que pude pensar 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();
})
});

Debo mencionar que, mientras funciona, el optimizador se ahoga. Recibo lo siguiente:

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

¿Hay una mejor manera de manejar esto? ¡Gracias!

Answer 1

¡Buenas noticias, Underscore 1.6.0 ahora soporta requirejs define!

las versiones debajo de esto requieren cuñas, o requiriendo underscore.js luego ciegamente esperando que la "_" variable global no haya sido aplastada (lo que para ser justos es una apuesta justa)

simplemente cargarlo por

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

Answer 2

Como referencia, a partir de la versión 1.1.1 (~ Feb ''13), Backbone también se registra como un módulo AMD . Funcionará con requirejs sin la necesidad de utilizar su configuración shim. ( El tenedor amdjs de James Burke tampoco se ha actualizado desde 1.1.0)

Answer 3

Escribiré directamente, puede leer la explicación en requirejs.org, puede usar el siguiente código como un fragmento para su uso diario; (ps yo uso yeoman) (ya que muchas cosas actualizadas, estoy publicando esto a partir de febrero de 2014.)

Asegúrese de haber incluido el script en su index.html

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

Luego, en 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 haber sido útil!

Answer 4

RequireJS 2.X ahora trata orgánicamente los módulos que no son de AMD, como Backbone & Underscore, mucho mejor, utilizando la nueva configuración de shim .

La configuración de shim es simple de usar: (1) uno establece las dependencias ( deps ), si las hay, (que pueden ser de la configuración de las paths , o pueden ser rutas válidas). (2) (opcionalmente) especifique el nombre de la variable global del archivo que está ajustando, que se debe exportar a las funciones de su módulo que lo requieran. (Si no especifica las exportaciones, tendrá que usar simplemente global, ya que nada pasará a sus funciones requerir / definir).

Aquí hay un ejemplo simple de uso de shim para cargar Backbone. También agrega una exportación para subrayado, aunque no tiene ninguna dependencia.

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 asume que jquery, backbone y guión bajo están en los archivos llamados "jquery.js", "backbone.js" y "underscore.js" en el mismo directorio que este código "principal" (que se convierte en el baseURL para requerir ) Si este no es el caso, deberá usar una configuración de rutas .}

Personalmente creo que con la funcionalidad de shim incorporada, las ventajas de no usar una versión bifurcada de Backbone & Underscore superan los beneficios de usar la horquilla AMD recomendada en la otra respuesta popular, pero funciona de cualquier manera.

Answer 5

Actualización : a partir de la versión 1.3.0, el subrayado eliminó el soporte de AMD (RequireJS) .

Puede usar amdjs / Backbone 0.9.1 y la bifurcación amdjs / Underscore 1.3.1 con soporte de AMD de James Burke (el responsable de RequireJS).

Más información sobre el soporte de AMD para Underscore y 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();
});
});

Los módulos están debidamente registrados y no es necesario el complemento de orden:

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

Underscore es en realidad opcional, porque Backbone ahora obtiene sus dependencias por sí mismo:

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

Con algo de azúcar AMD también podrías escribirlo así:

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

En cuanto al error del optimizador: compruebe dos veces la configuración de su compilación. Supongo que su configuración de ruta está desactivada. Si tiene una configuración de directorio similar a la de RequireJS Docs , puede 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"
}
]
})

Answer 6

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