Hur man skapar och publicerar ett Deno CLI-verktyg på rätt sätt

En cool sak med Ember-ramverket är att det har Ember CLI för att generera en komponent, en mall eller en rutt. Det är en stor tidsbesparing, och ännu mer ember generate componentgenererar den inte bara komponenten utan också en testfil för QUnit. Låt oss se hur man skapar ett Deno CLI-verktyg för att göra något liknande för React.

I den här Deno-handledningen kommer vi att se hur man skapar ett Deno CLI-verktyg med TypeScript, hur man laddar beroenden från Deno-standardbiblioteket. Vi ska utforska hur man läser en katalog och skriver en fil. Slutligen kommer vi att lära oss att publicera vår Deno-modul till GitHub och köra den direkt från den platsen och även att installera den lokalt så att den kan fungera utan anslutning.

Översikt

CLI-verktyget som vi kommer att bygga i denna Deno-handledning accepterar ett komponentnamn som skickas genom kommandoraden och genererar en katalog och en fil med koden för en funktionskomponent i React.

Jag skapade en mer komplett version av detta som också skapar en SASS-stilmall och en testfil som passar för Jest och Enzyme. Kommer att lägga till fler anpassnings- och komponentmallar (som de som använder krokar, eller Redux, eller Router, eller alla) snart.

Men för enkelhetens skull kommer denna Deno-handledning att täcka det väsentliga: läsa parametrar och skriva filer och vi kommer att skriva en enda fil. Resten är strängmanipulation och mer innehållsskrivande, inget särskilt speciellt. Du kan komma åt hela Deno CLI-verktyget för att generera en React-komponent med SASS och Jest i repet i slutet av denna artikel.

Installera Deno

För att köra detta Deno CLI-verktyg måste du ha körtiden installerad. Om du redan använder Homebrew på macOS kan du snabbt installera Deno med:

brew install deno

Om du inte använder Homebrew kan du installera det med CURL:

curl -fsSL https://deno.land/x/install/install.sh | sh

Andra installationsmetoder och system beskrivs i Deno-manualen.

Läs kommandoradsparametrar i Deno

Det viktigaste vi behöver för vår generator är att ta namnet på komponenten. Vi måste kunna skicka komponentnamnet till Deno- verktyget. Skapa en katalog och lägg till en fil som heter mod.tsoch klistra in denna i den:

const { args: [name] } = Deno;
console.log( `Writing component ${ name }` );

Nu, när du lägger till Denovariabeln, kommer du förmodligen att få en varning, beroende på din kodredigerare och dess TypeScript-stöd, som säger att den inte kan hitta Denonamnet. Om du är i VS Code kan du lösa detta med den officiella VS Code-tillägget för att lägga till Deno-stöd. JetBrains har också publicerat ett plugin för att ge Deno-stöd för JetBrain IDEs.

Kör nu den här modulen med:

deno run mod.tsHej världen

Detta kommer att svara med parametern "HelloWorld" som vi skickade:

Writing component HelloWorld

Trevlig! Det fungerar!

Skriv filer med Deno

Låt oss skriva filen nu. Vi behöver först innehållet för det, så lägg till detta i mod.tsfilen. Vi kommer att använda JavaScript -mallar för att skapa en enda sträng och infoga namnet på komponenten och till och med anropa en strängmetod för att göra den gemen:

const compoContent: string = `import React from 'react';
import PropTypes from 'prop-types';

${name}.propTypes = {

};
function ${name}(props) {
    return();
}
export default ${name};
`;

För att skriva detta till en fil måste vi först kontrollera om katalogen finns. Vi kommer att använda ensureDirfunktionen, en del av Deno standardbiblioteket, för detta. Det kommer att skapa katalogen eller katalogerna om de inte finns. För att tala om för Deno att använda detta beroende, lägg bara till detta överst i filen:

import { ensureDir } from "https://deno.land/std/fs/ensure_dir.ts";

När vi kör vårt verktyg kommer Deno att ladda ner den här modulen för att använda den. Det är äntligen dags att skriva filen med writeTestFile, ett kommando i Deno runtime. Klistra in följande i slutet av filen:

Lokalt test

Vi är klara med att koda vårt Deno CLI-verktyg och vi kan nu testa det. Deno är byggd som en säker-först körning så operationer som att läsa filsystemet eller skriva till det nekas som standard. Du måste uttryckligen be Deno att tillåta filsystemåtkomst. Det är separerat i läsbehörighet och skrivåtkomst. I det här fallet behöver vi läsbehörighet, eftersom vi ensureDirförst måste läsa katalogen och kontrollera om den finns. Om den inte gör det kommer den att skapa den och sedan skapar vi filen. För de två sista uppgifterna behöver vi skrivtillstånd. Så här kan du köra det:

deno --allow-read --allow-write mod.ts button

Och du kommer att skapa katalogerna tillsammans med filen, alla i förhållande till mappen där du kör detta, som app/components/Button/index.js.

Publicera en Deno-modul

Att distribuera en Deno-modul är enkelt. Vi täckte detta i detalj i ett tidigare inlägg om att skapa och publicera en Deno-modul på GitHub. Du måste initiera en lokal git-repo:

git init

lägg till och commit dina filer:

git add .
git commit -m "Initial commit"

skapa ett arkiv på GitHub eller liknande tjänst och tryck på det. Till exempel, om du skapar en repo som heter a-deno-modulepå GitHub kan du köra den här lokalt för att driva den online:

git remote add origin git@github.com:YOUR-GITHUB-USER/a-deno-module.git<br>git push -u origin master

Använd modulen publicerad online

Deno kan köra moduler direkt från Internet och installera dess beroenden automatiskt. Nu när det har distribuerats kan du köra vårt Deno CLI-verktyg direkt från GitHub:

deno run --allow-read --allow-write https://raw.githubusercontent.com/YOUR-GITHUB-USER/a-deno-module/master/mod.ts button

Deno kommer att ladda ner verktyget, kontrollera beroenden och installera dem om det behövs. Resultatet blir detsamma som ovan, det kommer att skapa katalogerna och filen.

För att undvika att behöva skriva allt det (eller leta efter det i skalet) låter Deno dig installera det här verktyget så att det fungerar offline:

deno install --allow-read --allow-write --name denomodu https://raw.githubusercontent.com/YOUR-GITHUB-USER/a-deno-module/master/mod.ts

Verktyget kommer att heta denomodu. Vad detta gör är att skapa en körbar fil med kommandoraden i en viss katalog, som /Users/%your-username%/.deno/bini macOS. Dess innehåll är kommandot för att köra verktyget och acceptera parametrar:

#!/bin/sh

deno "run" "--allow-read" "--allow-write" "https://raw.githubusercontent.com/eliorivero/react-generate-component/master/mod.ts" "$@"

Så när processen är klar, om du inte har lagt till ./deno/binsökvägen till din PATH-miljövariabel, kommer Deno att uppmana dig att göra det, så att du kan köra verktyget.

När du har lagt till sökvägen till din PATH-variabel kan du nu anropa verktyget:

denomodu button

Den är mycket kortare och nu fungerar den utan att vara ansluten till Internet. Grattis! Du har skapat ett Deno CLI-verktyg, du publicerat det och installerat det lokalt.

Deno CLI-verktyg för att generera en React-komponent

Som nämndes i början av denna Deno-handledning skapade jag en mer komplett version av detta, och du kan komma åt repo för detta verktyg här:

https://github.com/eliorivero/react-generate-component

Det är bara en Deno-modul skapad på TypeScript och skapar dessa filer:

• index.js, en React funktionell komponent
• style.scss, dess SASS-stilmall
• test.js, ett enkelt test med hjälp av Jest och Enzyme

Giffen nedan visar hur detta Deno-verktyg fungerar efter att det har installerats:

Den accepterar sammansatta namn separerade med ett bindestreck. Till exempel nav-barskapas en komponent som heter NavBar. Du kan också ange en annan anpassad katalogsökväg än standardsökvägen app/componentseller inte, och fortsätta använda standardsökvägen.