{"id":232425,"date":"2023-01-12T14:20:00","date_gmt":"2023-01-12T11:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232425"},"modified":"2023-01-12T14:20:08","modified_gmt":"2023-01-12T11:20:08","slug":"come-creare-e-pubblicare-correttamente-uno-strumento-deno-cli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-creare-e-pubblicare-correttamente-uno-strumento-deno-cli\/","title":{"rendered":"Come creare e pubblicare correttamente uno strumento Deno CLI"},"content":{"rendered":"\n

Un aspetto interessante del framework Ember \u00e8 che ha la CLI Ember per generare un componente, un modello o un percorso. \u00c8 un grande risparmio di tempo e, ancora di pi\u00f9, ember generate component<\/code>genera non solo il componente ma anche un file di test per QUnit. Vediamo come creare uno strumento Deno CLI per fare qualcosa di simile per React.<\/p>\n

In questo tutorial Deno, vedremo come creare uno strumento CLI Deno con TypeScript, come caricare le dipendenze dalla libreria standard Deno. Esploreremo come leggere una directory e scrivere un file. Infine, impareremo a pubblicare il nostro modulo Deno su GitHub ed eseguirlo direttamente da quella posizione e anche a installarlo localmente in modo che possa funzionare senza connessione.<\/p>\n

Panoramica<\/h2>\n

Lo strumento CLI che creeremo in questo tutorial di Deno accetter\u00e0 un nome di componente passato attraverso la riga di comando e generer\u00e0 una directory e un file con il codice per un componente funzionale di React.<\/p>\n

Ho creato una versione pi\u00f9 completa di questo che crea anche un foglio di stile SASS e un file di test adatto per Jest ed Enzyme. Presto verranno aggiunte pi\u00f9 personalizzazioni e modelli di componenti (come quelli che usano hook, o Redux, o Router o tutti).<\/p>\n

Per semplicit\u00e0, per\u00f2, questo tutorial di Deno tratter\u00e0 gli elementi essenziali: leggere i parametri e scrivere i file e scriveremo un singolo file. Il resto \u00e8 manipolazione di stringhe e pi\u00f9 scrittura di contenuti, niente di particolarmente speciale. Puoi accedere allo strumento Deno CLI completo per generare un componente React con SASS e Jest nel repository alla fine di questo articolo.<\/p>\n

Installa Deno<\/h2>\n

Per eseguire questo strumento Deno CLI, \u00e8 necessario che il runtime sia installato. Se stai gi\u00e0 utilizzando Homebrew su macOS, puoi installare rapidamente Deno con:<\/p>\n

brew install deno<\/code><\/pre>\n
Se non stai usando Homebrew, puoi installarlo usando CURL:<\/p>\n
curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n
Altri metodi e sistemi di installazione sono descritti nel Manuale Deno<\/a>.<\/p>\n
Leggi i parametri della riga di comando in Deno<\/h2>\n
La cosa pi\u00f9 essenziale di cui abbiamo bisogno per il nostro generatore \u00e8 prendere il nome del componente. Dobbiamo essere in grado di passare il nome del componente allo strumento Deno<\/a>. Crea una directory e aggiungi un file chiamato mod.ts<\/code>e incollalo al suo interno:<\/p>\n
const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n
Ora, quando aggiungi la Deno<\/code>variabile, probabilmente riceverai un avviso, a seconda del tuo editor di codice e del suo supporto TypeScript, dicendo che non riesce a trovare il Deno<\/code>nome. Se sei in VS Code, puoi risolverlo usando l’ estensione ufficiale VS Code per aggiungere il supporto Deno<\/a>. JetBrains ha anche pubblicato un plug-in per fornire il supporto Deno per gli IDE JetBrain<\/a>.<\/p>\n
Ora esegui questo modulo con:<\/p>\n
deno run mod.ts<\/code>Ciao mondo<\/p>\n
Questo risponder\u00e0 con il parametro "HelloWorld" che abbiamo superato:<\/p>\n
Writing component HelloWorld<\/code><\/p>\n
Simpatico! Sta funzionando!<\/p>\n
Scrivi file con Deno<\/h2>\n
Scriviamo ora il file. Per prima cosa abbiamo bisogno del contenuto, quindi aggiungilo al mod.ts<\/code>file. Utilizzeremo i valori letterali del modello JavaScript<\/a> per creare una singola stringa e inserire il nome del componente e persino chiamare un metodo stringa per renderlo minuscolo:<\/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
Per scriverlo in un file, dobbiamo prima verificare se la directory esiste. Useremo la ensureDir<\/code>funzione, parte della libreria standard Deno<\/a>, per questo. Creer\u00e0 la directory o le directory se non esistono. Per dire a Deno di usare questa dipendenza, aggiungi semplicemente questo nella parte superiore del file:<\/p>\n
import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n
Quando eseguiamo il nostro strumento, Deno scaricher\u00e0 questo modulo per usarlo. \u00c8 finalmente il momento di scrivere il file usando writeTestFile<\/code>, un comando nel runtime di Deno. Incolla quanto segue alla fine del file:<\/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
Prova locale<\/h2>\n
Abbiamo finito di codificare il nostro strumento Deno CLI e ora possiamo testarlo. Deno \u00e8 costruito come un runtime sicuro, quindi operazioni come la lettura del filesystem o la scrittura su di esso sono negate per impostazione predefinita. Devi chiedere esplicitamente a Deno di consentire l’accesso al filesystem. \u00c8 separato in accesso in lettura e accesso in scrittura. In questo caso, abbiamo bisogno del permesso di lettura, perch\u00e9 ensureDir<\/code>prima \u00e8 necessario leggere la directory e verificare se esiste. In caso contrario, lo creer\u00e0 e quindi creeremo il file. Per le ultime due attivit\u00e0, abbiamo bisogno del permesso di scrittura. Quindi ecco come puoi eseguirlo:<\/p>\n
deno --allow-read --allow-write mod.ts button<\/code><\/p>\n
E avrai le directory create insieme al file, tutte relative alla cartella in cui lo stai eseguendo, come app\/components\/Button\/index.js<\/code>.<\/p>\n
Pubblica un modulo Deno<\/h2>\n
La distribuzione di un modulo Deno \u00e8 semplice. Ne abbiamo parlato in dettaglio in un post precedente sulla creazione e pubblicazione di un modulo Deno su GitHub<\/a>. Devi inizializzare un repository git locale:<\/p>\n
git init<\/code><\/p>\n
aggiungi e salva i tuoi file:<\/p>\n
git add .<\/code>
\ngit commit -m \"Initial commit\"<\/code><\/p>\n
crea un repository su GitHub o un servizio simile e invialo. Ad esempio, se crei un repository denominato a-deno-module<\/code>su GitHub puoi eseguirlo localmente per inviarlo online:<\/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
Utilizza il modulo pubblicato online<\/h2>\n
Deno pu\u00f2 eseguire moduli direttamente da Internet e installare automaticamente le sue dipendenze. Ora che \u00e8 distribuito, puoi eseguire il nostro strumento Deno CLI direttamente da 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 scaricher\u00e0 lo strumento, controller\u00e0 le dipendenze e le installer\u00e0 se necessario. Il risultato sar\u00e0 lo stesso di sopra, creer\u00e0 le directory e il file.<\/p>\n
Per evitare di dover scrivere tutto questo (o cercarlo nella shell) Deno ti consente di installare questo strumento in modo che funzioni offline:<\/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
Lo strumento si chiamer\u00e0 denomodu<\/code>. Quello che fa \u00e8 creare un file eseguibile con la riga di comando in una determinata directory, come \/Users\/%your-username%\/.deno\/bin<\/code>in macOS. Il suo contenuto \u00e8 il comando per eseguire lo strumento e accettare i parametri:<\/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
Quindi, al termine del processo, se non hai aggiunto il .\/deno\/bin<\/code>percorso alla variabile di ambiente PATH, Deno ti chieder\u00e0 di farlo, in modo da poter eseguire lo strumento.<\/p>\n
Dopo aver aggiunto il percorso alla variabile PATH, ora puoi invocare lo strumento:<\/p>\n
denomodu button<\/code><\/p>\n
\u00c8 molto pi\u00f9 breve e ora funziona senza essere connesso a Internet. Congratulazioni! Hai creato uno strumento Deno CLI, l’hai pubblicato e installato localmente.<\/p>\n
Strumento Deno CLI per generare un componente React<\/h2>\n
Come accennato all’inizio di questo tutorial di Deno, ho creato una versione pi\u00f9 completa di questo e puoi accedere al repository per questo strumento qui:<\/p>\n
https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n
\u00c8 solo un modulo Deno creato su TypeScript e crea questi file:<\/p>\n