{"id":231932,"date":"2023-01-12T14:23:00","date_gmt":"2023-01-12T11:23:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231932"},"modified":"2023-01-12T14:25:11","modified_gmt":"2023-01-12T11:25:11","slug":"como-crear-y-publicar-correctamente-una-herramienta-cli-de-deno","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/como-crear-y-publicar-correctamente-una-herramienta-cli-de-deno\/","title":{"rendered":"C\u00f3mo crear y publicar correctamente una herramienta CLI de Deno"},"content":{"rendered":"\n

Una cosa interesante sobre el marco de Ember es que tiene la CLI de Ember para generar un componente, una plantilla o una ruta. Es un gran ahorro de tiempo, y a\u00fan m\u00e1s, ember generate component<\/code>genera no solo el componente sino tambi\u00e9n un archivo de prueba para QUnit. Veamos c\u00f3mo crear una herramienta Deno CLI para hacer algo similar para React.<\/p>\n

En este tutorial de Deno, veremos c\u00f3mo crear una herramienta CLI de Deno con TypeScript, c\u00f3mo cargar dependencias desde la biblioteca est\u00e1ndar de Deno. Exploraremos c\u00f3mo leer un directorio y escribir un archivo. Finalmente, aprenderemos a publicar nuestro m\u00f3dulo Deno en GitHub y ejecutarlo directamente desde esa ubicaci\u00f3n y tambi\u00e9n a instalarlo localmente para que pueda funcionar sin conexi\u00f3n.<\/p>\n

Visi\u00f3n general<\/h2>\n

La herramienta CLI que crearemos en este tutorial de Deno aceptar\u00e1 un nombre de componente pasado a trav\u00e9s de la l\u00ednea de comando y generar\u00e1 un directorio y un archivo con el c\u00f3digo para un componente funcional de React.<\/p>\n

Cre\u00e9 una versi\u00f3n m\u00e1s completa de esto que tambi\u00e9n crea una hoja de estilo SASS y un archivo de prueba adecuado para Jest y Enzyme. Pronto agregaremos m\u00e1s personalizaci\u00f3n y plantillas de componentes (como las que usan ganchos, Redux, Router o todos).<\/p>\n

Sin embargo, en aras de la simplicidad, este tutorial de Deno cubrir\u00e1 lo esencial: leer par\u00e1metros y escribir archivos y escribiremos un solo archivo. El resto es manipulaci\u00f3n de cadenas y m\u00e1s escritura de contenido, nada particularmente especial. Puede acceder a la herramienta CLI de Deno completa para generar un componente React con SASS y Jest en el repositorio al final de este art\u00edculo.<\/p>\n

Install Deno<\/h2>\n

Para ejecutar esta herramienta Deno CLI, debe tener instalado el tiempo de ejecuci\u00f3n. Si ya usa Homebrew en macOS, puede instalar r\u00e1pidamente Deno con:<\/p>\n

brew install deno<\/code><\/pre>\n
Si no est\u00e1 usando Homebrew, puede instalarlo usando CURL:<\/p>\n
curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n
Otros m\u00e9todos y sistemas de instalaci\u00f3n se describen en el Manual Deno<\/a>.<\/p>\n
Leer par\u00e1metros de l\u00ednea de comandos en Deno<\/h2>\n
Lo m\u00e1s esencial que necesitamos para nuestro generador es tomar el nombre del componente. Necesitamos poder pasar el nombre del componente a la herramienta Deno .<\/a> Cree un directorio y agregue un archivo llamado mod.ts<\/code>y pegue esto en \u00e9l:<\/p>\n
const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n
Ahora, cuando agregue la Deno<\/code>variable, probablemente recibir\u00e1 una advertencia, dependiendo de su editor de c\u00f3digo y su compatibilidad con TypeScript, diciendo que no puede encontrar el Deno<\/code>nombre. Si est\u00e1 en VS Code, puede resolver esto usando la extensi\u00f3n oficial de VS Code para agregar compatibilidad con Deno<\/a>. JetBrains tambi\u00e9n ha publicado un complemento para brindar compatibilidad con Deno para los IDE de JetBrain<\/a>.<\/p>\n
Ahora ejecute este m\u00f3dulo con:<\/p>\n
deno run mod.ts<\/code>Hola Mundo<\/p>\n
Este responder\u00e1 con el par\u00e1metro \u00abHelloWorld" que le pasamos:<\/p>\n
Writing component HelloWorld<\/code><\/p>\n
\u00a1Agradable! \u00a1Esta funcionando!<\/p>\n
Escribir archivos con Deno<\/h2>\n
Vamos a escribir el archivo ahora. Primero necesitamos el contenido para ello, as\u00ed que agr\u00e9guelo al mod.ts<\/code>archivo. Haremos uso de literales de plantilla de JavaScript<\/a> para crear una sola cadena e insertar el nombre del componente e incluso llamar a un m\u00e9todo de cadena para ponerlo en min\u00fasculas:<\/p>\n
const compoContent: string = `import React from 'react';\nimport PropTypes from 'prop-types';\n\n${name}.propTypes = {\n\n};\nfunction ${name}(props) {\n    return();\n}\nexport default ${name};\n`;<\/code><\/pre>\n
Para escribir esto en un archivo, primero debemos verificar si el directorio existe. Usaremos la ensureDir<\/code>funci\u00f3n, parte de la biblioteca est\u00e1ndar de Deno<\/a>, para esto. Crear\u00e1 el directorio o directorios si no existen. Para decirle a Deno que use esta dependencia, simplemente agregue esto en la parte superior del archivo:<\/p>\n
import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n
Cuando ejecutemos nuestra herramienta, Deno descargar\u00e1 este m\u00f3dulo para utilizarlo. Finalmente es hora de escribir el archivo usando writeTestFile<\/code>, un comando en el tiempo de ejecuci\u00f3n de Deno. Pegue lo siguiente al final del archivo:<\/p>\n
const compoPath: string = \".\/app\/components\/\" + compoName + \"\/\";\n\nensureDir(compoPath)\n  .then(() => {\n    Deno.writeTextFile(compoPath + \"index.js\", compoContent);\n    console.info(\"Done!\");\n});<\/code><\/pre>\n
Prueba local<\/h2>\n
Hemos terminado de codificar nuestra herramienta Deno CLI y ahora podemos probarla. Deno est\u00e1 construido como un primer tiempo de ejecuci\u00f3n seguro, por lo que las operaciones como leer el sistema de archivos o escribir en \u00e9l se niegan de forma predeterminada. Debe pedirle expl\u00edcitamente a Deno que permita el acceso al sistema de archivos. Est\u00e1 separado en acceso de lectura y acceso de escritura. En este caso, necesitamos permiso de lectura, porque ensureDir<\/code>primero hay que leer el directorio y comprobar si existe. Si no lo hace, lo crear\u00e1 y luego crearemos el archivo. Para las dos \u00faltimas tareas, necesitamos permiso de escritura. As\u00ed es como puedes ejecutarlo:<\/p>\n
deno --allow-read --allow-write mod.ts button<\/code><\/p>\n
Y tendr\u00e1 los directorios creados junto con el archivo, todos relacionados con la carpeta donde est\u00e1 ejecutando esto, como app\/components\/Button\/index.js<\/code>.<\/p>\n
Publicar un m\u00f3dulo Deno<\/h2>\n
Distribuir un m\u00f3dulo Deno es simple. Cubrimos esto en detalle en una publicaci\u00f3n anterior sobre la creaci\u00f3n y publicaci\u00f3n de un m\u00f3dulo Deno en GitHub<\/a>. Debe inicializar un repositorio git local:<\/p>\n
git init<\/code><\/p>\n
agregue y confirme sus archivos:<\/p>\n
git add .<\/code>
\ngit commit -m \"Initial commit\"<\/code><\/p>\n
cree un repositorio en GitHub o un servicio similar y emp\u00fajelo. Por ejemplo, si crea un repositorio con un nombre a-deno-module<\/code>en GitHub, puede ejecutarlo localmente para publicarlo en l\u00ednea:<\/p>\n
git remote add origin git@github.com:YOUR-GITHUB-USER\/a-deno-module.git<br>git push -u origin master<\/code><\/p>\n
Utilice el m\u00f3dulo publicado en l\u00ednea<\/h2>\n
Deno puede ejecutar m\u00f3dulos directamente desde Internet e instalar sus dependencias autom\u00e1ticamente. Ahora que est\u00e1 implementada, puede ejecutar nuestra herramienta Deno CLI directamente desde GitHub:<\/p>\n
deno run --allow-read --allow-write https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts button<\/code><\/pre>\n
Deno descargar\u00e1 la herramienta, verificar\u00e1 las dependencias y las instalar\u00e1 si es necesario. El resultado ser\u00e1 el mismo que el anterior, crear\u00e1 los directorios y el archivo.<\/p>\n
Para evitar tener que escribir todo eso (o buscarlo en el shell) Deno te permite instalar esta herramienta para que funcione sin conexi\u00f3n:<\/p>\n
deno install --allow-read --allow-write --name denomodu https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts<\/code><\/pre>\n
La herramienta se llamar\u00e1 denomodu<\/code>. Lo que hace esto es crear un archivo ejecutable con la l\u00ednea de comando en un directorio determinado, como \/Users\/%your-username%\/.deno\/bin<\/code>en macOS. Su contenido es el comando para ejecutar la herramienta y aceptar par\u00e1metros:<\/p>\n
#!\/bin\/sh\n\ndeno \"run\" \"--allow-read\" \"--allow-write\" \"https:\/\/raw.githubusercontent.com\/eliorivero\/react-generate-component\/master\/mod.ts\" \"$@\"<\/code><\/pre>\n
Entonces, cuando finalice el proceso, si no ha agregado la .\/deno\/bin<\/code>ruta a su variable de entorno PATH, Deno le pedir\u00e1 que lo haga para que pueda ejecutar la herramienta.<\/p>\n
Una vez que agregue la ruta a su variable PATH, ahora puede invocar la herramienta:<\/p>\n
denomodu button<\/code><\/p>\n
Es mucho m\u00e1s corto y ahora funciona sin estar conectado a Internet. \u00a1Felicidades! Cre\u00f3 una herramienta CLI de Deno, la public\u00f3 y la instal\u00f3 localmente.<\/p>\n
Herramienta Deno CLI para generar un componente React<\/h2>\n
Como se mencion\u00f3 al comienzo de este tutorial de Deno, cre\u00e9 una versi\u00f3n m\u00e1s completa de esto, y puede acceder al repositorio de esta herramienta aqu\u00ed:<\/p>\n
https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n
Es solo un m\u00f3dulo Deno creado en TypeScript y crea estos archivos:<\/p>\n