2012-01-04 3 views
6

Soy un novato RequireJS. Cuando uso "require.config" e incluyo una ruta a jQuery con un nombre diferente a jQuery, los resultados no son los esperados.En RequireJS: no se puede alias el nombre de jQuery en la ruta

Aquí hay un ejemplo muy simple para ayudar a explicar mi problema.

Estructura de los archivos

root 
├── Index.htm 
└── scripts 
    ├── libs 
    │   ├── jquery-1.7.1.js 
    │   └── require.js 
    ├── main.js 
    └── someModule.js 

index.htm

<html> 
<head> 
    <title>BackboneJS Modular app with RequireJS</title> 
    <script data-main="scripts/main" src="scripts/libs/require.js"></script> 
</head> 
<body> 
    <h3>BackboneJS is awesome</h3> 
</body> 
</html> 

Aquí las referencias etiqueta script requieren en los scripts/libs. Cuando se ejecuta require, se debe ejecutar el archivo JavaScript llamado main.js en el directorio de scripts.

main.js

require.config({ 
    "paths": { 
      "mod1": "someModule" 
    } 
}); 
require(["mod1"], function (sm) { 
    console.log(sm.someValue); 
}); 

En mi experiencia, el "mod1" puede ser cualquier cosa, siempre y cuando se hace referencia a la misma en el camino require.config y en el método requiere.

someModule.js

define([], function() { 
    console.log(); 
    return { someValue: "abcd" }; 
}); 

simplemente para la corrección que incluía someModule.js

La inconstancia percibida se produce cuando incluyo jQuery.

En el siguiente main.js agregué jQuery a la configuración y al método require.

main.js

require.config({ 
    "paths": { 
     "jquery": "libs/jquery-1.7.1" 
     ,"mod1": "someModule" 
    } 
}); 

require(["mod1", "jquery"], function (sm, $) { 
    console.log(sm.someValue); 
    console.log($); 
}); 

Con el adicional de jQuery todo parece todavía funciona. El "console.log ($)" escribe la función jQuery.

Ahora el pateador. En el siguiente código cambio "jQuery" a "jqueryA", tanto en los caminos y requieren

require.config({ 
    "paths": { 
     "jqueryA": "libs/jquery-1.7.1" 
     ,"mod1": "someModule" 
    } 
}); 

require(["mod1", "jqueryA"], function (sm, $) { 
    console.log(sm.someValue); 
    console.log($); 
}); 

Ahora "console.log ($)", escribe nula.

¿Se debe esperar esto? ¿Hay alguna razón por la cual el nombre debe ser jquery, pero para mod1 puede ser cualquier cosa?

Puedo solucionar este problema sin problemas, pero este problema parece extraño. Sé que puedo usar el archivo combinado RequireJS y jQuery, pero cuando jQuery tiene una actualización no quiero depender de RequireJS para incluir el nuevo jQuery.

Respuesta

9

En jQuery 1.7 que decidieron apoyar AMD carga. Para hacer esto, define un módulo llamado 'jquery' que devuelve una referencia al objeto jQuery. Cuando defines tu ruta a jquery con otro nombre (por ejemplo, 'jqueryA'), las cosas no se rompen exactamente como crees que son.

El script jQuery siempre se define como un módulo denominado 'jquery', que se ha registrado en requerirá para su aplicación.Cuando nombraste el acceso directo de tu ruta 'jquery' y 'jquery' se cargó como una dependencia, require estaba haciendo referencia al módulo 'jquery' definido por jquery-1.7.1.js, que devuelve la referencia correcta. Cuando nombra su atajo de módulo jqueryA, ahora está haciendo referencia a una referencia indefinida, porque el script jquery en sí no devuelve una referencia, excepto a través del módulo llamado 'jquery'. Es tonto, lo sé.

El script jquery define el módulo como 'jquery' y espera que simplemente lo referenciará como 'jquery'. Si desea hacer referencia a ella como otro nombre (y como un bono, evitar que se entra en conflicto con otras bibliotecas de jQuery cargados), utilice este método:

Use requirejs and jquery, without clobbering global jquery?

+0

gracias por la explicación! con este conocimiento resolví mi propio problema jquery/requirejs. – bunnyhero

2

Creo que encontré la respuesta a mi problema.

Opcionalmente llamar AMD define() para registrar el módulo https://github.com/documentcloud/underscore/pull/338#issuecomment-3253751

He aquí una cita desde el enlace anterior. Aunque se trata de subrayado, creo que se relaciona con JQuery también.

todos los cargadores de AMD permitir la asignación de un identificador de módulo a un ruta parcial, por lo general la configuración se llama 'caminos', por lo que para hacer lo que queremos:

requirejs.config ({ caminos: guión bajo: 'js/libs/underscore-1.2.3.min' }}); require (['subrayado'], función() {}); Desde subrayado es utilizado por otros módulos de nivel superior, como columna vertebral, una dependencia común nombre debe ser utilizado para comunicar una dependencia común en subrayado, y tiene sentido para llamar a esa dependencia 'subrayar'. La configuración caminos da una manera de hacer la asignación a una URL específica que desea utilizar para esa dependencia.

Aquí es una diatriba que hace un muy buen trabajo de describir los problemas con AMD y módulos con nombre.

módulos con AMD define con nombre. Tanto dolor por lo que ganar? http://dvdotsenko.blogspot.com/2011/12/amd-modules-with-named-defines-so-much.html

Cita desde el enlace anterior

Si la única manera de consumir el módulo correctamente es forzar al extremo desarrollador se codifican su nombre nuevo en un archivo de configuración, en el punto de consumo, (solo a ese respecto) por qué perder tiempo, esfuerzo y codificar el nombre en el módulo en primer lugar (y mucho menos causar duelo a los desarrolladores que DEBEN cargar el módulo bajo nombre/de fuentes alternativas)?

En esta publicación James Burk recomienda no utilizar el módulo de nombre. https://github.com/jrburke/requirejs/wiki/Updating-existing-libraries#wiki-anon

Normalmente no debería registrar un módulo llamado, pero en lugar registrarse como un módulo en el anonimato:

Esto permite a los usuarios de su código para cambiar el nombre su biblioteca a un nombre adecuado para su diseño del proyecto. También les permite planifica tu módulo a un nombre de la dependencia que es utilizado por otros bibliotecas. Por ejemplo, se puede mapear Zepto.js para cumplir con el deber del módulo para el ID del módulo 'jquery'.

Hay algunas excepciones notables que se registren como módulos con nombre:

• jQuery • subrayan

Excepción chupar. Las excepciones dificultan los noobs.

+0

Mira mi respuesta. Con suerte, aclarará las cosas para usted. –

4

aquí está mi solución, basada en la aplicación leo de Require.JS 2.1.0:

define.amd.jQuery = false; 

require.config({ 
    ... 

    shim: { 
     "jQuery-1.8.2": { 
      exports: "jQuery" 
     } 
    } 

    ... 
}); 
Cuestiones relacionadas