javascript - define - requirejs download
Cargando jQuery, subrayado y columna vertebral utilizando RequireJS 2.0.1 y shim (3)
Estoy experimentando un poco con RequireJS 2.0.1 . Mi objetivo es cargar correctamente jQuery, Underscore y Backbone. Desde el documento RequireJS original, descubrí que el autor J. Burke agregó (a esta nueva versión) una nueva opción de configuración llamada shim .
Luego escribí esto aquí:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Testing time</title>
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
<h1>Testing time</h1>
</body>
</html>
scripts/main.js
requirejs.config({
shim: {
''libs/jquery'': {
exports: ''$''
},
''libs/underscore'': {
exports: ''_''
},
''libs/backbone'': {
deps: [''libs/underscore'', ''libs/jquery''],
exports: ''Backbone''
}
}
});
define(
[''libs/jquery'', ''libs/underscore'', ''libs/backbone''],
function (jQueryLocal, underscoreLocal, backboneLocal) {
console.log(''local'', jQueryLocal);
console.log(''local'', underscoreLocal);
console.log(''local'', backboneLocal);
console.log(''global'', $);
console.log(''global'', _);
console.log(''global'', Backbone);
}
);
Todo parece funcionar bastante bien, pero tengo la sensación de que me estoy perdiendo algo, sé que hay una versión AMDed de jQuery y Underscore, pero si la configuración es tan simple, no entiendo por qué debería usarlos.
Entonces, ¿esta configuración es correcta o me estoy perdiendo algo?
¿Puede realmente evitar "calzar" jquery en el ejemplo original (donde la ruta a jquery está configurada en ''libs / jquery''), ya que jquery agrega el nombre "jquery" en su definición de módulo amd?
define (" jquery ", [], function () {return jQuery;});
Mi experiencia es que necesitas poner jquery.js en el directorio baseurl para obtener el módulo jquery amd definido como se espera, o "simularlo" como en el ejemplo original.
Lo que está haciendo es correcto, pero jQuery no necesita estar en la configuración shim porque exporta un módulo AMD (definición de módulo asíncrono). Underscore eliminó su soporte para AMD / Require.js rápidamente después de agregarlo, consulte: ¿Por qué underscore.js eliminó el soporte para AMD?
Shim está pensado como una conveniencia para usar bibliotecas que no exportan un módulo AMD. Si la biblioteca que está utilizando admite AMD, o tiene 2 versiones (una que admite AMD y una que es una variable global), debe usar la versión de AMD. Debería usar la versión de AMD por las mismas razones que usaría AMD en primer lugar y también porque la biblioteca puede incluir require.js (o Almond ) en su fuente y agregaría un tamaño de archivo innecesario a su proyecto.
Solo necesita usar la configuración "shim" si la biblioteca ya no llama a define() para declarar un módulo. jQuery ya lo hace, por lo que puede eliminarlo de la configuración de la compensación. El código anterior funcionará tal como está, pero la configuración de la compatibilidad de exportación para jQuery se ignorará ya que jQuery llamará define() antes de que se realice el trabajo de actualización.
Las desventajas con el shim frente a la llamada a script define() para definir un módulo:
Es menos portátil / confiable: cada desarrollador necesita hacer la configuración shim y hacer un seguimiento de los cambios en la biblioteca. Si el autor de la biblioteca lo hace en línea en la biblioteca, todos obtendrán los beneficios de manera más eficiente. Las plantillas de código en umdjs/umd pueden ayudar con ese cambio de código.
Carga de código menos óptima: shim config funciona cargando shim deps antes de cargar la biblioteca real. Así que es un poco más secuencial de carga que en paralelo. Es más rápido si todos los scripts se pueden cargar en paralelo, lo que es posible cuando se usa
define(). Si realiza una compilación / optimización para la implementación final y combina todos los scripts en un solo script, entonces esto no es realmente un inconveniente.