Estructurando Generadores de Yeoman

¿Qué es Yeoman?

Yeoman

Yeoman es un sistema de generación de proyectos escrito en JavaScript (Node.js) que permite agilizar muchísimo el inicio de nuevas aplicaciones. Esta compuesto de un módulo de Node.js sobre el que construir los generadores y una herramienta de línea de comandos para ejecutarlos, todo empaquetado en un único módulo en npm bajo el nombre de ‘yo’. Los generadores se instalan también a través de npm, lo cual permite que se genere un gran archivo con publicaciones open source tanto individuales como de colectivos.

Hace un tiempo, di un curso interno para Irontec sobre la creación de generadores para Yeoman. Las slides están publicadas en GitHub.

En ellas, están resumidos todos los fundamentos necesarios para comenzar a crear un generador.

Basándome en esas mismas slides, hoy, mostraré cómo estructurar un generador de Yeoman de una forma fácil y legible.

 

Instalación

Comencemos instalando las herramientas necesarias (es necesario haber instalado previamente Node.js)

Esto nos creará un nuevo proyecto con la siguiente estructura de archivos

  • generators

Carpeta contenedora con los generadores. Un generador de Yeoman, puede incluir a su vez un número ilimitado de subgeneradores. Por defecto, lanzará el ubicado en el directorio app.

Para especificar un subgenerador concreto, la sintaxis será:

  • generators/app/

Generador por defecto

  • node_modules/

Dependencias del generador

  • package.json

Fichero de definición del paquete

  • README.md

Aquí explicaremos cómo usar nuestro generador

  • test/

Directorio de tests

 

Estructura de cada generador

En el boilerpate del generador,  está todo reducido a un index.js y un directorio templates.

Esta estructura de un sólo archivo puede llegar a resultar en código difícilmente legible en generadores muy grandes.

Para evitar eso, dividiremos el generador en base a sus funciones:

index.js

Definición del generador

prompts/

Directorio donde programaremos la lógica de preguntas y respuestas

writes/

Directorio donde programaremos la lógica de escritura de archivos  del proyecto

install/ (opcional)

El paso de instalacíon no será necesario separarlo del index.js ya que en la mayoría de las ocasiones se reduce a un simple comando

 

Código fuente

Para este ejemplo, he creado un generador de proyectos con AngularJS + JSPM basado en este tutorial. Las templates las publicaré, junto con el resto del código en un repositorio de github.

Una vez dicho esto, podemos proceder a inspeccionar el código final del generador:

index.js

En el index.js solamente  invocamos al resto de módulos.

prompts/index.js

En la fase de prompts, saludaremos al usuario con yosay y cargaremos los prompts.

Tenemos una función GenerateProjectName para crear distintas variables que usaremos más adelante para definir el nombre del proyecto. Para ello, hemos utilizado un módulo de node llamado stringPuedes instalarlo con un sólo comando.

prompts/prompts.json

Hemos separado los prompts a un fichero json para tenerlos más accesibles

writes/index.js

En el módulo de escritura  incluimos archivos del proyecto y archivos de la aplicación

writes/app.js

En este archivo programaremos todas las tareas destinadas a generar archivos de la aplicación.

writes/project.js

Similar a writes/app.js pero para los archivos de proyecto (package, gulpfile, editorconfig…)

Como se puede apreciar, todo queda mucho más claro y fácilmente modificable, ya que tenemos bien diferenciados los distintos procesos del mismo. De esta forma, tenemos aislado el hilo del diálogo, primera acción a ejecutar por el generador, y la creación del boilerplate en base al resultado del mismo. Estos nuevos archivos, a su vez, podremos descomponerlos en “módulos” más pequeños conforme nuestra aplicación vaya creciendo.

 

Enlaces de Interés

* El código fuente usado para este ejemplo está hosteado en GitHub.

* Getting Started

* Documentación de los generadores



¿Te gusta este post? Es solo un ejemplo de cómo podemos ayudar a tu empresa...
Sobre Aitor Llamas Jiménez

Aitor Llamas Jiménez. Desarrollador Multiplataforma en Irontec SL. Apasionado de JavaScript, la tecnología en general, los videojuegos y la literatura fantástica.

Queremos tu opinión :)