La entrada anterior estuvo dedicada a módulos internos, mientras que en esta, seguimos avanzando y hablamos de módulos externos, y para ello, es necesario conocer requireJS.
Módulos externos, segunda versión del ejemplo
Los módulos externos suponen un extra de dificultad, y también otra forma de proceder pues la carga de los módulos se hace a través de require.js, que es un cargador de módulos de Javascript. El hecho de modular el código Javascript se hace con una doble intención: velocidad de carga y calidad de código. La tercera es la reutilización. Otra ventaja fundamental del uso de módulos externos mediante requireJS es el hecho de que cada módulo se encarga de sus dependencias, mientras que con los módulos internos esto no es así.
El motivo fundamental del uso de módulos es porque TypeScript soporta los módulos AMD y CommonJS (para conocer en profundidad qué significa, mejor que leas la documentación en los enlaces).
CommonJS surge de la necesidad de estandarizar las APIs de Javascript, con independencia de si son ejecutadas en el cliente o en el servidor. Además, la especificiación de CommonJS es utilizada también para facilitar las aplicaciones mediante línea de comandos o en aplicaciones cliente-servidor. Por ejemplo, Node.JS utiliza CommonJS, al igual que IO.js.
A diferencia de los módulos internos, en los módulos externos NO utilizamos la palabra module, pero sí que utilizamos export.
En la tercera versión, reescribimos test.ts:
export function test() { console.log('Test')  }Procedemos de igual forma con test2.ts:
</pre> <pre>export function test2() { console.log('Test 2') }Los cambios entre esta última versión y la primera son mínimos: sólo marcar con export aquellas clases y funciones necesarias.
Y también necesitamos modificar app.ts para que importe los módulos externos, y ya no necesitamos las referencias:
import t1 = require('test') import t2 = require('test2') t1.test(); t2.test2();El último cambio significativo es en el código HTML, donde modificamos la referencia de script por require.JS, pero además, debemos de incluirle data-main para indicarle cuál
<!DOCTYPEhtml><htmllang="es"><head><title>Manejando datos - TypeScript</title></head><body><scriptsrc="app.js"></script></body></html>es el módulo inicial.
<!DOCTYPEhtml><htmllang="es"><head><title>Manejando datos - TypeScript</title></head><body><scriptsrc="app.js"></script></body></html>Antes de compilar es importante modificar las condiciones de compilación para que compila utilizando AMD, pues sin este cambio, recibimos un error:
Module App3 error
Modificamos las propiedades del proyecto, donde además, ya no tenemos la necesidad de compilar todo en un único archivo, pues requireJS se encarga de cargarlos al proyecto, tal cual le hemos indicado en app.ts.
Module App3 project settings
Y ahora comprobamos que funciona correctamente usando módulos externos.
Module App 3
El problema de los módulos
Pero a pesar de los beneficios que supone el uso de módulos (sobre todo, por separar el código), aquí tienes la principal dificultad:
Cuando utilizas módulos … o eliges trabajar con módulos externos o con módulos internos, no puedes mezclar
Muchos no son conscientes de esta problemática (bueno, a lo mejor es más simple de esta manera, excluyendo la otra opción), pero para la mayor parte de los proyectos grandes gana por mayoría el uso de módulos externos.
Pero cómo la complicación no termina aquí, existe una tercera alternativa para trabajar con módulos también externos utilizando RequireJS, y que será la siguiente entrada sobre #TypeScript, otra vuelta de tuerca más sobre módulos.
Happy coding!
