¿La mejor manera de concatenar archivos de JavaScript con dependencias y darlos como un módulo?

Question

Sé que esta pregunta surgió en variaciones similares a menudo, pero ninguna solución parece ajustarse completamente a mis necesidades. Tengo el siguiente problema:

En desarrollo utilizo varios archivos JS (un único archivo por cada "objeto"). Estos archivos JS tienen varias dependencias entre sí, algunos dependen de otros y necesito cargarlos primero. Actualmente utilizo RequireJS para cargar cada archivo JS en el orden correcto, por lo que defino un módulo para cada archivo. Fino y elegante. Pero ahora quiero concatenar todos mis archivos JS en un gran archivo JS que debería ser un módulo en sí mismo. Yo uso el optimizador RequireJS r.js para hacer eso. Mi problema: Todos los archivos JS se concatenan en un archivo JS grande, pero se incluye la definición del módulo para cada objeto. No tengo un gran módulo en un archivo grande, sino muchos módulos en un archivo grande.

Después de eso probé ronco para concatenar, que funciona bien, pero ignora las dependencias de los archivos. Simplemente concatena todos los archivos en orden alfabético o tengo que codificar el orden en mi gruntfile.

¿Cómo puedo solucionar esto?

Sólo como ilustración a mi problema: He siguientes archivos (pseudo código):

FileA 
- define FileA module 
- depends on FileB 
- FileA Logic 

FileB 
- define FileB module 
- FileB Logic 

Y quiero que esta salida:

LibFile 
- define LibFile module 
- FileB Logic, FileA Logic 

Pero conseguir esto con r.js (módulo de definición de FILEA y FILEB se copia):

LibFile 
- define FileB module 
- FileB Logic 
- define FileA module 
- depends on FileB 
- FileA Logic 

y consigo esta w ronco ITH (orden incorrecto):

LibFile 
- FileA Logic 
- FileB Logic 

Tal vez que preguntas es un poco estúpida, pero simplemente no puede resolver esto con las herramientas que todo el mundo parece utilizar ... Probé el plugin ronco-RequireJS, también. Pero arroja varios errores que no pude resolver.

Gracias, Pipo

Answer 1

voy a moverlo a una respuesta. Solo para que el código sea un poco más claro.

Estoy haciendo esto por memoria (ya que no puedo probarlo ahora) por lo que algunas cosas pequeñas pueden no ser del todo precisas.

Depende, por supuesto, de cómo empaquetar sus módulos, pero una forma es registrar todos los módulos más pequeños en un módulo más grande:

Archivo A.js

define([], function() { 
    // do something 
    return A; 
}); 

Archivo B.js

define(['path/to/A'], function(A){ 
    // do something with A and more 
    return B; 
}); 

a continuación, se empaqueta juntos:

mibiblioteca archivo.js

define(['path/to/A', 'path/to/B'], function(A, B){ 
    return { 
     A : A, 
     B : B 
    } 
} 

A continuación, puede apuntar su perfil acumulación de mylib.js y se combinarán en un archivo grande. No será un módulo que lo encapsula todo, pero tendrá un módulo de entrada que hace referencia a todo lo demás. A continuación, puede usarlo de esta manera:

require.config({ 
    paths : { 
     'path/to/mylib' : 'real/path/to/mylib/on/server' 
    } 
}); 
require(['path/to/mylib'], function(Lib) { 
    // do something using Lib.A or Lib.B 
} 

la única cosa que prestar atención es el ID de su archivo de gran módulo. De forma predeterminada, RequireJS build da ID que coincide con la ruta física (desde appDir IIRC) y usted tiene que coincidir con eso cuando carga su dependencia. En pocas palabras, si el archivo resultante mylib.js tiene un módulo principal que recibió el nombre 'path/to/mylib', deberá emparejarlo y cargarlo con la misma ID (usando require.config.paths) o jugar con los mapas y tal (algunos de los cuales requieren RequireJS 2.0).

La siguiente es la razón por la que te pregunté ¿por qué quieres hacer lo "módulo grande"

Otra cosa de la nota es que todos sus módulos más pequeños interiores también reciben identificadores emparejan su ruta física y puede utilizar estos identificadores cuando se utiliza el módulo de paquete grande (para que pueda acceder a ellos no sólo a través Lib.A) si mylib.js se ha cargado:

require(['path/to/A'], function(A) { 
    // do something using A 
}