2012-01-11 14 views
5

Estoy actualizando un proyecto de Dojo 1.6.1 usando AMD y RequireJS a Dojo 1.7.1 con su nuevo cargador AMD. Tengo que lidiar con archivos JavaScript antiguos, no escritos como módulos AMD, y tengo que cargarlos en el orden correcto.El complemento RequireJS order y Dojo 1.7.1

Antes de usar el complemento de orden RequireJS, pero parece que no funciona con Dojo AMD Loader. No puedo encontrar nada al respecto en la documentación del cargador o en la documentación de Dojo Build System.

¿Alguna idea de esto? Si no hay un complemento de orden, ¿cómo debo manejar los archivos JavaScript simples junto con Dojo 1.7? ¿Debo manejarlos por separado o hay una funcionalidad para esto en el cargador o en el sistema de compilación?

+0

¿Estás hablando de archivos de módulo o módulos, menos síncronos viejo estilo? – hugomg

+0

Solo archivos JavaScript comunes, como jQuery (no se usa como módulo AMD), escritos en el estilo que sean. –

Respuesta

4

sólo estoy aprendiendo sobre esto mismo, pero la documentación que encontré se refiere a Generic Script Injection

cargar las secuencias de comandos genéricos como se describe en la documentación, mientras especifica {asíncrono: 0} como una opción de configuración para require() . Esto, a mi entender, no cargue las secuencias de comandos en el orden que se especifica en el segundo parámetro (la matriz que contiene los nombres de archivo de script/caminos)

Mi ejemplo:

require({async:0},['test1.js','test2.js','test3.js'],function(){ 
    //do stuff with reference to loaded scripts 

}); 

Mis pruebas locales muestran si Cambio la configuración a {async: 1}. Los scripts se cargan en un orden diferente al especificado. Hasta ahora no he rastreado esto en el código del cargador dojo, pero parece tener sentido, y funciona, y no es un truco.

+0

¡Acepto esta respuesta, porque funciona! Creé un "módulo de dependencia" de esta manera: 'define ([" require "], function (require) {require ({async: 0}, [" script1.js "," script2.js "," script3.js " ]);}); '. Creo que es una buena solución. ¡Gracias! –

+0

Una advertencia, sin embargo. No lo he investigado más, pero parece (al menos cuando carga los scripts en un módulo aparte como se mencionó anteriormente) que los scripts se cargan en un ámbito diferente al que se carga a través de una etiqueta de script convencional. Por ejemplo, tuve que reemplazar 'var uglyGlobal = true' con' window.uglyGlobal = true'. –

+0

El método de inyección de scripts para la configuración '{async: 1}' carga los scripts utilizando una etiqueta '

2

No creo que los complementos sean generalmente compatibles con los cargadores AMD. No es óptimo, ¡pero probablemente puedas usar dojo/texto! con un eval Eso alinearía el contenido en tiempo de construcción.

+0

¿Te refieres a esto? 'define ([" texto! myScript "," texto! myScript2 "], función (s, s2) {eval (s); eval (s2)})' –

+0

Funciona, y lo estoy usando en una prueba de doh , pero soy reacio a marcarlo como la respuesta aceptada, es un truco =) –

3

Me gustaría proponer otro enfoque para dicho módulo de dependencia como se menciona en los comentarios anteriores. El problema es que define no acepta un parámetro async. El uso de un simple require dentro de la función define introduce una condición de carrera debido a que el código de los módulos requeridos aún no se ha ejecutado.

Ejemplo (MAL):
oldCode.js

 
window.foo = function(){}; 

legacyWrapper.js

 
define(["require"],function(require){ 
    require({async:0},["./oldCode"]); 
}) 

code.js

 
define(["./legacyWrapper"],function(){ 
    window.foo(); //throws exception, foo has not been loaded yet. 
}) 

(jsFiddle demo)

Sin embargo, hay una solución a este problema. Debe devolver un Deferred que se resuelve tan pronto como se carguen todos los módulos. El siguiente ejemplo carga a, b, c, d en orden.

 
define(["require","dojo/Deferred"],function(require,Deferred){ 
    var def = new Deferred(); 
    require({async:0}, 
      ["./moduleA", 
      "./moduleB", 
      "./moduleC", 
      "./moduleD"], 
      function(){ 
     def.resolve(); 
    }); 
    return def; 
}) 

Para acceder a las propiedades definidas en moduleA, ahora se puede utilizar

 
require(["legacyDeps"],function(legacyDeps){ 
    legacyDeps.then(function(){ 
     //It's save to assume that all legacy modules have been loaded here. 
    }); 
});