Hay momentos en los que la cantidad de librerías JavaScript de terceros que estamos usando en nuestra aplicación es tan grande que se hace necesario poner un poco de orden, bien por legibilidad o por prestaciones para que la carga de las mismas se haga de una forma óptima. Para ello están los gestores de cargas de librerías, y entre ellos RequireJS.
Ya en su momento comentamos Bower y como nos iba a facilitar la vida para gestionar las dependencias de nuestro proyecto. Pues bien, una vez que ya tenemos las librerías hay que integrarlas en nuestro framework favorito y poder hacer uso de ellas.
Estupenda documentación para dar los primeras pasos aquí.
Para ver un poco de tripa vamos a usar el caso práctico de, y como su propio nombre indica reqtangular, la integración entre AngularJS y RequireJS. El primero como framework y el segundo como gestor de carga.
Todo pasa por descargarse la última versión de RequireJS y agregarla como hasta ahora hemos ido haciendo, es decir, que podríamos crear por ejemplo un directorio llamado libs y copiar dentro el fichero require.js.
A continuación hacer referencia en nuestro index.html de la siguiente manera:
<script src="libs/require.js" data-main="scripts/main.js"></script>
atención al atributo data-main, aquí está la madre del cordero, ya que es ahí y solo ahí donde vamos a gestionar el resto de dependencias. El contenido de main.js en reqtangular tiene un aspecto tal que así.Observad que que todo lo que estamos haciendo es construir un objeto JSON que vamos a inyectar en require.config con el nombre y la ruta.
require.config({
paths: {
angular: '../../bower_components/angular/angular',
'angular-animate': '../../bower_components/angular-animate/angular-animate'
...Aquí es donde a mano incluiremos cada una de las líneas, como estamos usando bower, el destino por defecto de las librerías al ser descargadas es bower_components.
Hay veces que los módulos que queremos montar no soportan la arquitectura AMD, o que un módulo depende directamente de otro. En ese caso recurrimos a la configuración shim. En nuestro main.js se puede entender un ejemplo de como 'angular-route' depende directamente de angular:
'angular-route': [
'angular'
]
Y finalmente para hacer ensamblar definitivamente la dependencia en AngularJS emplearemos ya la sintaxis que corresponde y podéis ver al final del fichero.
require([
'angular',
'app',
'angular-route',
...Espero que os sirva de guía para poder empezar RequireJS sin que nos tiemblen las rodillas. ;)
Saludos!
