{"id":231746,"date":"2023-01-12T14:10:00","date_gmt":"2023-01-12T11:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231746"},"modified":"2023-01-12T14:10:12","modified_gmt":"2023-01-12T11:10:12","slug":"hur-man-skapar-och-publicerar-ett-deno-cli-verktyg-paa-raett-saett","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/hur-man-skapar-och-publicerar-ett-deno-cli-verktyg-paa-raett-saett\/","title":{"rendered":"Hur man skapar och publicerar ett Deno CLI-verktyg p\u00e5 r\u00e4tt s\u00e4tt"},"content":{"rendered":"\n

En cool sak med Ember-ramverket \u00e4r att det har Ember CLI f\u00f6r att generera en komponent, en mall eller en rutt. Det \u00e4r en stor tidsbesparing, och \u00e4nnu mer ember generate component<\/code>genererar den inte bara komponenten utan ocks\u00e5 en testfil f\u00f6r QUnit. L\u00e5t oss se hur man skapar ett Deno CLI-verktyg f\u00f6r att g\u00f6ra n\u00e5got liknande f\u00f6r React.<\/p>\n

I den h\u00e4r Deno-handledningen kommer vi att se hur man skapar ett Deno CLI-verktyg med TypeScript, hur man laddar beroenden fr\u00e5n Deno-standardbiblioteket. Vi ska utforska hur man l\u00e4ser en katalog och skriver en fil. Slutligen kommer vi att l\u00e4ra oss att publicera v\u00e5r Deno-modul till GitHub och k\u00f6ra den direkt fr\u00e5n den platsen och \u00e4ven att installera den lokalt s\u00e5 att den kan fungera utan anslutning.<\/p>\n

\u00d6versikt<\/h2>\n

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\u00f6r en funktionskomponent i React.<\/p>\n

Jag skapade en mer komplett version av detta som ocks\u00e5 skapar en SASS-stilmall och en testfil som passar f\u00f6r Jest och Enzyme. Kommer att l\u00e4gga till fler anpassnings- och komponentmallar (som de som anv\u00e4nder krokar, eller Redux, eller Router, eller alla) snart.<\/p>\n

Men f\u00f6r enkelhetens skull kommer denna Deno-handledning att t\u00e4cka det v\u00e4sentliga: l\u00e4sa parametrar och skriva filer och vi kommer att skriva en enda fil. Resten \u00e4r str\u00e4ngmanipulation och mer inneh\u00e5llsskrivande, inget s\u00e4rskilt speciellt. Du kan komma \u00e5t hela Deno CLI-verktyget f\u00f6r att generera en React-komponent med SASS och Jest i repet i slutet av denna artikel.<\/p>\n

Installera Deno<\/h2>\n

F\u00f6r att k\u00f6ra detta Deno CLI-verktyg m\u00e5ste du ha k\u00f6rtiden installerad. Om du redan anv\u00e4nder Homebrew p\u00e5 macOS kan du snabbt installera Deno med:<\/p>\n

brew install deno<\/code><\/pre>\n
Om du inte anv\u00e4nder Homebrew kan du installera det med CURL:<\/p>\n
curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n
Andra installationsmetoder och system beskrivs i Deno-manualen<\/a>.<\/p>\n
L\u00e4s kommandoradsparametrar i Deno<\/h2>\n
Det viktigaste vi beh\u00f6ver f\u00f6r v\u00e5r generator \u00e4r att ta namnet p\u00e5 komponenten. Vi m\u00e5ste kunna skicka komponentnamnet till Deno-<\/a> verktyget. Skapa en katalog och l\u00e4gg till en fil som heter mod.ts<\/code>och klistra in denna i den:<\/p>\n
const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n
Nu, n\u00e4r du l\u00e4gger till Deno<\/code>variabeln, kommer du f\u00f6rmodligen att f\u00e5 en varning, beroende p\u00e5 din kodredigerare och dess TypeScript-st\u00f6d, som s\u00e4ger att den inte kan hitta Deno<\/code>namnet. Om du \u00e4r i VS Code kan du l\u00f6sa detta med den officiella VS Code-till\u00e4gget f\u00f6r att l\u00e4gga till Deno-st\u00f6d<\/a>. JetBrains har ocks\u00e5 publicerat ett plugin f\u00f6r att ge Deno-st\u00f6d f\u00f6r JetBrain IDEs<\/a>.<\/p>\n
K\u00f6r nu den h\u00e4r modulen med:<\/p>\n
deno run mod.ts<\/code>Hej v\u00e4rlden<\/p>\n
Detta kommer att svara med parametern "HelloWorld" som vi skickade:<\/p>\n
Writing component HelloWorld<\/code><\/p>\n
Trevlig! Det fungerar!<\/p>\n
Skriv filer med Deno<\/h2>\n
L\u00e5t oss skriva filen nu. Vi beh\u00f6ver f\u00f6rst inneh\u00e5llet f\u00f6r det, s\u00e5 l\u00e4gg till detta i mod.ts<\/code>filen. Vi kommer att anv\u00e4nda JavaScript<\/a> -mallar f\u00f6r att skapa en enda str\u00e4ng och infoga namnet p\u00e5 komponenten och till och med anropa en str\u00e4ngmetod f\u00f6r att g\u00f6ra den gemen:<\/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
F\u00f6r att skriva detta till en fil m\u00e5ste vi f\u00f6rst kontrollera om katalogen finns. Vi kommer att anv\u00e4nda ensureDir<\/code>funktionen, en del av Deno standardbiblioteket<\/a>, f\u00f6r detta. Det kommer att skapa katalogen eller katalogerna om de inte finns. F\u00f6r att tala om f\u00f6r Deno att anv\u00e4nda detta beroende, l\u00e4gg bara till detta \u00f6verst i filen:<\/p>\n
import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n
N\u00e4r vi k\u00f6r v\u00e5rt verktyg kommer Deno att ladda ner den h\u00e4r modulen f\u00f6r att anv\u00e4nda den. Det \u00e4r \u00e4ntligen dags att skriva filen med writeTestFile<\/code>, ett kommando i Deno runtime. Klistra in f\u00f6ljande i slutet av filen:<\/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
Lokalt test<\/h2>\n
Vi \u00e4r klara med att koda v\u00e5rt Deno CLI-verktyg och vi kan nu testa det. Deno \u00e4r byggd som en s\u00e4ker-f\u00f6rst k\u00f6rning s\u00e5 operationer som att l\u00e4sa filsystemet eller skriva till det nekas som standard. Du m\u00e5ste uttryckligen be Deno att till\u00e5ta filsystem\u00e5tkomst. Det \u00e4r separerat i l\u00e4sbeh\u00f6righet och skriv\u00e5tkomst. I det h\u00e4r fallet beh\u00f6ver vi l\u00e4sbeh\u00f6righet, eftersom vi ensureDir<\/code>f\u00f6rst m\u00e5ste l\u00e4sa katalogen och kontrollera om den finns. Om den inte g\u00f6r det kommer den att skapa den och sedan skapar vi filen. F\u00f6r de tv\u00e5 sista uppgifterna beh\u00f6ver vi skrivtillst\u00e5nd. S\u00e5 h\u00e4r kan du k\u00f6ra det:<\/p>\n
deno --allow-read --allow-write mod.ts button<\/code><\/p>\n
Och du kommer att skapa katalogerna tillsammans med filen, alla i f\u00f6rh\u00e5llande till mappen d\u00e4r du k\u00f6r detta, som app\/components\/Button\/index.js<\/code>.<\/p>\n
Publicera en Deno-modul<\/h2>\n
Att distribuera en Deno-modul \u00e4r enkelt. Vi t\u00e4ckte detta i detalj i ett tidigare inl\u00e4gg om att skapa och publicera en Deno-modul p\u00e5 GitHub<\/a>. Du m\u00e5ste initiera en lokal git-repo:<\/p>\n
git init<\/code><\/p>\n
l\u00e4gg till och commit dina filer:<\/p>\n
git add .<\/code>
\ngit commit -m \"Initial commit\"<\/code><\/p>\n
skapa ett arkiv p\u00e5 GitHub eller liknande tj\u00e4nst och tryck p\u00e5 det. Till exempel, om du skapar en repo som heter a-deno-module<\/code>p\u00e5 GitHub kan du k\u00f6ra den h\u00e4r lokalt f\u00f6r att driva den 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
Anv\u00e4nd modulen publicerad online<\/h2>\n
Deno kan k\u00f6ra moduler direkt fr\u00e5n Internet och installera dess beroenden automatiskt. Nu n\u00e4r det har distribuerats kan du k\u00f6ra v\u00e5rt Deno CLI-verktyg direkt fr\u00e5n 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 kommer att ladda ner verktyget, kontrollera beroenden och installera dem om det beh\u00f6vs. Resultatet blir detsamma som ovan, det kommer att skapa katalogerna och filen.<\/p>\n
F\u00f6r att undvika att beh\u00f6va skriva allt det (eller leta efter det i skalet) l\u00e5ter Deno dig installera det h\u00e4r verktyget s\u00e5 att det fungerar 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
Verktyget kommer att heta denomodu<\/code>. Vad detta g\u00f6r \u00e4r att skapa en k\u00f6rbar fil med kommandoraden i en viss katalog, som \/Users\/%your-username%\/.deno\/bin<\/code>i macOS. Dess inneh\u00e5ll \u00e4r kommandot f\u00f6r att k\u00f6ra verktyget och acceptera parametrar:<\/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
S\u00e5 n\u00e4r processen \u00e4r klar, om du inte har lagt till .\/deno\/bin<\/code>s\u00f6kv\u00e4gen till din PATH-milj\u00f6variabel, kommer Deno att uppmana dig att g\u00f6ra det, s\u00e5 att du kan k\u00f6ra verktyget.<\/p>\n
N\u00e4r du har lagt till s\u00f6kv\u00e4gen till din PATH-variabel kan du nu anropa verktyget:<\/p>\n
denomodu button<\/code><\/p>\n
Den \u00e4r 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.<\/p>\n
Deno CLI-verktyg f\u00f6r att generera en React-komponent<\/h2>\n
Som n\u00e4mndes i b\u00f6rjan av denna Deno-handledning skapade jag en mer komplett version av detta, och du kan komma \u00e5t repo f\u00f6r detta verktyg h\u00e4r:<\/p>\n
https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n
Det \u00e4r bara en Deno-modul skapad p\u00e5 TypeScript och skapar dessa filer:<\/p>\n