Hygen
Instalación
Hygen es un generador de código escalable que nos permite crear un template de ficheros para agilizar nuestra productividad. Si por ejemplo en nuestro proyecto tenemos que crear un componente y lo tenemos dividido en:
- component.ts | ts | tsx
- style.css
- test.spec.ts | ts | tsx
Tendríamos que crear uno a uno dichos archivos con su respectivo código y aquí es cuando entra en juego Hygen.
Instalación:
En nuestro proyecto instalamos Hygen:
npm i -D Hygen
Configuración:
Debemos crear una estructura de carpetas en nuestro proyecto para que Hygen lea nuestros templates.
📁 ProyectName
├── 📁 _templates
├── 📁 fc
├── 📁 new
- prompt.js: Este archivo hará que al iniciar nuestro comando nos permita crear nuestro componente
module.exports = [
{
type: 'input',
name: 'path',
message: "What path do you want?"
},
{
type: 'input',
name: 'name',
message: "What name do you want?"
},
];
- La ruta donde queremos guardar nuestro componente a partir de src como raíz.
- El nombre de nuestro componente.
Cuando ejecutemos nuestro script para generar el template nos pedirá la ruta (variable path) y el nombre de nuestro componente (variable name). Son los que se muestran en el ejemplo anterior.
- component.ejs.t: Este archivo será el template de nuestro componente.
---
to: src/<%= path %>/<%= name %>/<%= name %>.tsx
---
import * as React from 'react';
export const <%= name %>: React.FC<{}> = () => (
<div className="<%= name %>">
Hello from <%= name %>!
</div>
);
Como podemos ver el ejemplo anterior debemos especificar la ruta donde se creará el archivo por medio de la variable path y el nombre del archivo con la variable name.
Generar template:
Es el momento de crear un script para agilizar el proceso de creación de nuestro componente. En nuestro 📄package.json añadimos nuestro nuevo script: "new:fc“: "node_modules/.bin/hygen fc new“. Cabe destacar que 📁 fc y 📁 new en éste comando hacen referencia a las carpetas creadas anteriormente (hecho para dar semántica, new functional component).
De esta forma podremos crear varios templates añadiendolos en📁 fc/new para que al ejecutar nuestro script se creen todos a la vez. Por ejemplo:
Nuestro archivo .css:
---
to: src/<%= path %>/<%= name %>/<%= name %>.css
---
.<%= name %>{
}