Desarrolladores: Trucos semanales

Usa Browserify para gestionar módulos web

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
09:12
  Añadir a marcadores

Transcripción

Escribir código en módulos o tener nuestro proyecto modularizado es una práctica común que nos facilita, tanto el crecimiento de la aplicación como el mantenimiento de la misma. Para lograr este manejo, a través de módulos, podemos usar Browserify, el cual es una herramienta open source que nos permitirá crear y manejar módulos en el cliente usando la sintaxis que usamos en Node de require. Esto, poniéndolo entre paréntesis y enviándole el nombre del módulo que queremos insertar. La gran ventaja es que, además de poder usar nuestros propios módulos, podremos usar módulos de terceros, lo cual nos permitirá consumir aquellos publicados en npm, por ejemplo. Browserify tiene en su core, o parte más esencial, una réplica del funcionamiento de Node para que solo necesitemos de un navegador y comencemos a usar nuestra app o sitio web. Una de las ideas principales es que no tengas que estar insertando las referencias a tus archivos en el index.html, sino que simplemente, desde tu código JavaScript, invoques los módulos como si fueran librerías o encabezados que se usan regularmente en C, C++, Java, Ruby o algún otro tipo de lenguaje. Es importante comentar que Browserify se integra muy bien con herramientas como Gulp o Grunt al momento de automatizar tareas, pues va a ser un gran facilitador de los módulos que se vayan requiriendo. Aprendamos cómo configurar Browserify, e integrarlo a nuestro flujo de trabajo. Lo primero, es que conozcas el sitio de browserify.org. Una vez que entras al sitio, verás el icono característico y muchas de la información con la cual puedes trabajar. Por ejemplo, puedes encontrar artículos de ayuda, algunos demos y la documentación. Si tú entras a alguno de estos artículos, por ejemplo, podrás ver algunos casos de uso o material que puede servirte para sacar mejor provecho de Browserify. Incluso, también puedes ver algunos de los comandos de la documentación para que puedas sacar más provecho del comando. Por ahora, vamos a generar una primera aplicación con Browserify para que veas lo sencillo que es integrarlo. Lo primero que tenemos que hacer es instalar Browserify. Y, para eso, vamos a ocupar npm install -g --para que esté de manera global-- browserify. Mientras esto se instala, veamos los archivos que tenemos para este ejercicio. En este caso, tenemos un archivo app.js, el cual al momento en que lo abrimos, este se encuentra vacío. Tenemos un archivo index.html y una cascada de estilos. La cascada de estilos casi no la vamos a utilizar, pero el archivo index.html, sí. Aquí, en este caso, estamos apuntando a un script que se llama bundle.js. Eso quiere decir, que si yo ejecuto mi aplicación, me va a indicar ahorita que ese archivo no existe. Ese es el archivo que va a generar Browserify. Una vez que yo ya tengo listo esto, voy a ir a mi archivo apps.js y voy a utilizar un comando muy singular. Vamos a escribir la palabra var angular, para que este angular esté disponible igual a, require('angular'). Esto me va a indicar que va a consumir la librería de Angular, pero siempre y cuando yo la tenga instalada en mi computadora. Para poderla instalar, en este caso, voy a utilizar Node. Entonces, podría ejecutar el comando npm install angular. Pero, para este caso, vamos a probar inmediatamente una cuestión antes de que nosotros trabajemos con esto. Lo primero que vamos a hacer es generar el archivo que nos hace falta, que en este caso es el bundle.js. Para poderlo generar, simplemente, vamos a escribir el comando browserify, el archivo original donde estamos trabajando, y el archivo final, adonde va a llegar toda la información. En este caso, el archivo original donde estamos trabajando se llama app.js. Una vez que ya tenemos lista esta parte, simplemente vamos a pulsar Enter. Cuando lo ejecutamos, inmediatamente genera el archivo bundle.js, pero lo genera vacío porque nos generó aquí un error. Aquí lo que nos dice es que simplemente no encontró lo que necesitaba instanciar. ¿Qué quiere decir? Que nos hace falta Angular. Entonces, vamos a hacer el procedimiento de instalación, npm install angular. Esto va hacer la instalación y va a generar aquí una carpeta llamada node_modules. Browserify navega directamente a esa carpeta y ya me va a poder generar las instancias necesarias y generar el archivo. Vamos a limpiar pantalla y, nuevamente, vamos a ejecutar el comando browserify de app y que tenga una salida hacia bundle.js. Cuando yo regreso, ahora sí veo bundle.js que se ha generado de manera dinámica. Una manera en la cual yo puedo trabajar más rápido, es decir, sin tener que estar ejecutando este comando continuamente, es utilizando un paquete que se llama watchify. Este, lo vamos a instalar de esta manera: npm install watchify -g. Watchify pone atención en los archivos que nosotros le indiquemos, y cuando detectó un cambio invoca a Browserify para generar todo este nuevo archivo. Realmente, toda la parte de Angular y todo se encuentra dentro de app.js. Si te das cuenta, no hemos insertado ningún otro script a menos de bundle. Ahora sí, nosotros ya podemos estar utilizando en este caso, watchify. Y para que esto funcione vamos a invocarlo desde la función watchify app.js y que apunte a bundle. Y listo. Se va a quedar aquí trabajando. Si llega a haber algún error, cada vez que yo haga un cambio se genera el nuevo archivo y se actualiza el archivo bundle.js. Ahora sí, vamos de regreso a app.js y ya podemos utilizar Angular. Así también, puedes hacerle, si necesitas más librerías. En este caso, vamos a generar una aplicación muy rápida de Angular, que se llame ng-app, Vamos a ponerle de nombre a esta cuestión, myApp. Aquí vamos a utilizar un poco de los snippets para poder trabajar y decir ng1, vamos a generar aquí un controlador. Este controlador se va a llamar myApp que es como le acabo de poner. Vamos a quitar esta dependencia de aquí que no se está utilizando. Y, aquí, en esta función activate vamos a mandar un mensaje a consola, console.log y vamos a poner "Browserify works". Esto solamente para que veamos que ya funciona el controlador y que funciona obviamente Browserify, requiriendo lo que necesita. Ahora sí, lo único que nos falta hacer, es ir a index.html y seleccionar una etiqueta que vaya a utilizar el controlador. Vamos a pegarlo aquí y vamos a ponerle que lo trate como vm. Ahora sí, probamos nuevamente nuestro código. Actualizamos la página y vemos cómo ya dice "Browserify works". Quiere decir que aquí, yo ya pude utilizar este framework sin ningún problema. Ahora, qué pasa si yo necesito trabajar con alguna otra variable. Por ejemplo, supongamos que vamos a trabajar con Mongoose. Entonces simplemente digo mongoose igual a require y aquí adentro mando el nombre del paquete, mongoose. Recuerda que este nombre de paquete debe ser idéntico al nombre del paquete que instalaste. Vemos cómo aquí abajo, en la barra de errores, me indica que el proceso de Browserify no se pudo ejecutar porque simplemente no existe el paquete. Entonces, ¿qué vamos a hacer? En este caso, yo voy a abrir aquí una instancia nueva de la pestaña y vamos a hacer npm install mongoose. Así ya, me descarga directamente en la carpeta de node_modules, lo que yo voy a necesitar. Y, simplemente, puedo empezar a trabajar Ahora, en este caso, me indica que no encontró la parte que nosotros estábamos buscando de Mongoose. Vamos a revisar rápidamente. Vamos a actualizar esta ventana. Y listo, sí. Sí la encontró. Y aquí tenemos la carpeta de mongoose. Quiere decir que esto se instaló adecuadamente. Si de pronto tienes alguna duda con los archivos que se instalan o no, simplemente pulsa el botón Actualizar. Y ahora sí, vamos a hacer algún cambio para que invoque esta generación y, simplemente, se va a poder levantar. En dado caso de que llegara a quedar atorado, podemos cerrarlo y volver a invocarlo nuevamente. Si esto funciona y todo va adecuadamente, vamos a quedarnos con esta parte, y quiere decir que yo puedo ejecutar nuevamente mi archivo y todo va a funcionar muy bien. Vamos a corregir solamente esta parte, porque debe decir "Browserify". Listo. Probamos. Actualizamos y listo, aquí lo tenemos. Como ves, utilizar este tipo de invocaciones como si fueran módulos en tipo Node, es muchísimo más rápido y eficiente que estar incrustando aquí un nuevo script cada vez que necesitemos un archivo. En el caso de Angular o de React, cada vez que tengamos una o más librerías las podemos insertar de esta manera y es un resultado muy eficiente.