{"id":232290,"date":"2023-01-12T13:36:00","date_gmt":"2023-01-12T10:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232290"},"modified":"2023-01-12T13:37:05","modified_gmt":"2023-01-12T10:37:05","slug":"kuinka-luoda-ja-julkaista-deno-cli-tyoekalu-oikein","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-luoda-ja-julkaista-deno-cli-tyoekalu-oikein\/","title":{"rendered":"Kuinka luoda ja julkaista Deno CLI -ty\u00f6kalu oikein"},"content":{"rendered":"\n

Yksi hieno asia Ember-kehyksess\u00e4 on, ett\u00e4 siin\u00e4 on Ember CLI komponentin, mallin tai reitin luomiseksi. Se s\u00e4\u00e4st\u00e4\u00e4 paljon aikaa, ja viel\u00e4 enemm\u00e4n, se ember generate component<\/code>luo paitsi komponentin my\u00f6s testitiedoston QUnitille. Katsotaanpa, kuinka luodaan Deno CLI -ty\u00f6kalu tekem\u00e4\u00e4n jotain vastaavaa Reactille.<\/p>\n

T\u00e4ss\u00e4 Deno-opetusohjelmassa n\u00e4emme, kuinka luodaan Deno CLI -ty\u00f6kalu TypeScriptill\u00e4 ja kuinka ladataan riippuvuuksia Denon standardikirjastosta. Tutkimme kuinka lukea hakemistoa ja kirjoittaa tiedosto. Lopuksi opimme julkaisemaan Deno-moduulimme GitHubissa ja suorittamaan sit\u00e4 suoraan kyseisest\u00e4 sijainnista sek\u00e4 asentamaan sen paikallisesti, jotta se voi toimia ilman yhteytt\u00e4.<\/p>\n

Yleiskatsaus<\/h2>\n

T\u00e4ss\u00e4 Deno-opetusohjelmassa rakentamamme CLI-ty\u00f6kalu hyv\u00e4ksyy komentorivilt\u00e4 v\u00e4litetyn komponentin nimen ja luo hakemiston ja tiedoston React-toiminnallisen komponentin koodilla.<\/p>\n

Tein t\u00e4st\u00e4 t\u00e4ydellisemm\u00e4n version, joka luo my\u00f6s SASS-tyylitaulukon ja testitiedoston, joka sopii Jestille ja Enzymelle. Lis\u00e4\u00e4 r\u00e4\u00e4t\u00e4l\u00f6ityj\u00e4 ja komponenttimalleja (kuten koukkuja tai Reduxia tai Routeria tai kaikkia k\u00e4ytt\u00e4vi\u00e4) pian.<\/p>\n

Yksinkertaisuuden vuoksi t\u00e4m\u00e4 Deno-opetusohjelma kattaa kuitenkin olennaiset asiat: parametrien lukemisen ja tiedostojen kirjoittamisen, ja kirjoitamme yhden tiedoston. Loput on merkkijonojen manipulointia ja enemm\u00e4n sis\u00e4ll\u00f6n kirjoittamista, ei mit\u00e4\u00e4n erityist\u00e4. Voit k\u00e4ytt\u00e4\u00e4 t\u00e4ytt\u00e4 Deno CLI -ty\u00f6kalua luodaksesi React-komponentin SASS:n ja Jestin kanssa t\u00e4m\u00e4n artikkelin lopussa olevassa repossa.<\/p>\n

Asenna Deno<\/h2>\n

Jotta voit k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 Deno CLI -ty\u00f6kalua, sinulla on oltava ajonaika asennettuna. Jos k\u00e4yt\u00e4t jo Homebrew’ta macOS:ss\u00e4, voit asentaa Denon nopeasti seuraavilla tavoilla:<\/p>\n

brew install deno<\/code><\/pre>\n
Jos et k\u00e4yt\u00e4 Homebrew’ta, voit asentaa sen k\u00e4ytt\u00e4m\u00e4ll\u00e4 CURL-osoitetta:<\/p>\n
curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n
Muut asennustavat ja j\u00e4rjestelm\u00e4t on kuvattu Deno Manual -oppaassa<\/a>.<\/p>\n
Lue komentoriviparametrit Denossa<\/h2>\n
Olennaisinta, mit\u00e4 tarvitsemme generaattorillemme, on ottaa komponentin nimi. Meid\u00e4n on pystytt\u00e4v\u00e4 v\u00e4litt\u00e4m\u00e4\u00e4n komponentin nimi Deno-<\/a> ty\u00f6kalulle. Luo hakemisto ja lis\u00e4\u00e4 tiedosto nimelt\u00e4 mod.ts<\/code>ja liit\u00e4 siihen t\u00e4m\u00e4:<\/p>\n
const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n
Nyt, kun lis\u00e4\u00e4t Deno<\/code>muuttujan, saat luultavasti varoituksen koodieditoristasi ja sen TypeScript-tuesta riippuen, ett\u00e4 se ei l\u00f6yd\u00e4 Deno<\/code>nime\u00e4. Jos k\u00e4yt\u00e4t VS Codea, voit ratkaista t\u00e4m\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4 virallista VS Code -laajennusta lis\u00e4t\u00e4ksesi Deno-tuen<\/a>. JetBrains on my\u00f6s julkaissut laajennuksen Deno-tuen tarjoamiseksi JetBrain IDE:ille<\/a>.<\/p>\n
Suorita nyt t\u00e4m\u00e4 moduuli seuraavasti:<\/p>\n
deno run mod.ts<\/code>Hei maailma<\/p>\n
T\u00e4m\u00e4 vastaa parametrilla "HelloWorld", jonka hyv\u00e4ksymme:<\/p>\n
Writing component HelloWorld<\/code><\/p>\n
Kiva! Se toimii!<\/p>\n
Kirjoita tiedostoja Denon kanssa<\/h2>\n
Kirjoitetaan nyt tiedosto. Tarvitsemme ensin sen sis\u00e4ll\u00f6n, joten lis\u00e4\u00e4 t\u00e4m\u00e4 mod.ts<\/code>tiedostoon. K\u00e4yt\u00e4mme JavaScript<\/a> -mallin literaaleja luodaksemme yhden merkkijonon ja lis\u00e4\u00e4m\u00e4ll\u00e4 komponentin nimen ja jopa kutsumalla merkkijonomenetelm\u00e4\u00e4 tehd\u00e4ksesi siit\u00e4 pieni\u00e4 kirjaimia:<\/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
Jos haluat kirjoittaa t\u00e4m\u00e4n tiedostoon, meid\u00e4n on ensin tarkistettava, onko hakemisto olemassa. K\u00e4yt\u00e4mme t\u00e4h\u00e4n ensureDir<\/code>funktiota, joka on osa Denon standardikirjastoa<\/a>. Se luo hakemiston tai hakemistot, jos niit\u00e4 ei ole olemassa. Jos haluat k\u00e4ske\u00e4 Denon k\u00e4ytt\u00e4m\u00e4\u00e4n t\u00e4t\u00e4 riippuvuutta, lis\u00e4\u00e4 t\u00e4m\u00e4 tiedoston yl\u00e4osaan:<\/p>\n
import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n
Kun k\u00e4yt\u00e4mme ty\u00f6kaluamme, Deno lataa t\u00e4m\u00e4n moduulin k\u00e4ytt\u00e4\u00e4kseen sit\u00e4. On vihdoin aika kirjoittaa tiedosto writeTestFile<\/code>Deno-ajonaikaisen komennon avulla. Liit\u00e4 tiedoston loppuun seuraava:<\/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
Paikallinen testi<\/h2>\n
Deno CLI -ty\u00f6kalumme on koodattu valmiiksi ja voimme nyt testata sit\u00e4. Deno on rakennettu turvalliseksi ajonaikaiseksi, joten toiminnot, kuten tiedostoj\u00e4rjestelm\u00e4n lukeminen tai siihen kirjoittaminen, estet\u00e4\u00e4n oletuksena. Sinun on nimenomaisesti pyydett\u00e4v\u00e4 Denoa sallimaan tiedostoj\u00e4rjestelm\u00e4n k\u00e4ytt\u00f6. Se on erotettu luku- ja kirjoitusoikeuksilla. T\u00e4ss\u00e4 tapauksessa tarvitsemme lukuoikeudet, koska ensureDir<\/code>ensin on luettava hakemisto ja tarkistettava, onko se olemassa. Jos ei, se luo sen ja sitten luomme tiedoston. Kahteen viimeiseen teht\u00e4v\u00e4\u00e4n tarvitsemme kirjoitusluvan. Joten voit ajaa sen seuraavasti:<\/p>\n
deno --allow-read --allow-write mod.ts button<\/code><\/p>\n
Ja hakemistot luodaan tiedoston mukana, kaikki suhteessa kansioon, jossa suoritat t\u00e4m\u00e4n, kuten app\/components\/Button\/index.js<\/code>.<\/p>\n
Julkaise Deno-moduuli<\/h2>\n
Deno-moduulin jakelu on helppoa. K\u00e4sittelimme t\u00e4t\u00e4 yksityiskohtaisesti edellisess\u00e4 viestiss\u00e4, jossa k\u00e4siteltiin Deno-moduulin luomista ja julkaisemista GitHubissa<\/a>. Sinun on alustettava paikallinen git repo:<\/p>\n
git init<\/code><\/p>\n
lis\u00e4\u00e4 ja sitoa tiedostosi:<\/p>\n
git add .<\/code>
\ngit commit -m \"Initial commit\"<\/code><\/p>\n
luo arkisto GitHubissa tai vastaavassa palvelussa ja ty\u00f6nn\u00e4 se. Jos esimerkiksi luot a-deno-module<\/code>GitHubissa nimetyn repon, voit suorittaa t\u00e4m\u00e4n paikallisesti ja siirt\u00e4\u00e4 sen verkkoon:<\/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
K\u00e4yt\u00e4 verkossa julkaistua moduulia<\/h2>\n
Deno voi ajaa moduuleja suoraan Internetist\u00e4 ja asentaa riippuvuutensa automaattisesti. Nyt kun se on otettu k\u00e4ytt\u00f6\u00f6n, voit k\u00e4ytt\u00e4\u00e4 Deno CLI -ty\u00f6kaluamme suoraan GitHubista:<\/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 lataa ty\u00f6kalun, tarkistaa riippuvuudet ja asentaa ne tarvittaessa. Tulos on sama kuin yll\u00e4, se luo hakemistot ja tiedoston.<\/p>\n
Jotta sinun ei tarvitse kirjoittaa kaikkea t\u00e4t\u00e4 (tai etsi\u00e4 sit\u00e4 kuoresta), Deno antaa sinun asentaa t\u00e4m\u00e4n ty\u00f6kalun, jotta se toimii offline-tilassa:<\/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
Ty\u00f6kalun nimeksi tulee denomodu<\/code>. T\u00e4m\u00e4 luo suoritettavan tiedoston komentorivill\u00e4 tiettyyn hakemistoon, kuten \/Users\/%your-username%\/.deno\/bin<\/code>macOS:ss\u00e4. Sen sis\u00e4lt\u00f6 on komento suorittaa ty\u00f6kalu ja hyv\u00e4ksy\u00e4 parametrit:<\/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
Joten kun prosessi on valmis, jos et ole lis\u00e4nnyt .\/deno\/bin<\/code>polkua PATH-ymp\u00e4rist\u00f6muuttujaasi, Deno kehottaa sinua tekem\u00e4\u00e4n niin, jotta voit suorittaa ty\u00f6kalun.<\/p>\n
Kun olet lis\u00e4nnyt polun PATH-muuttujaasi, voit nyt k\u00e4ynnist\u00e4\u00e4 ty\u00f6kalun:<\/p>\n
denomodu button<\/code><\/p>\n
Se on paljon lyhyempi ja toimii nyt ilman Internet-yhteytt\u00e4. Onnittelut! Olet luonut Deno CLI -ty\u00f6kalun, julkaissut sen ja asentanut sen paikallisesti.<\/p>\n
Deno CLI -ty\u00f6kalu React-komponentin luomiseen<\/h2>\n
Kuten t\u00e4m\u00e4n Deno-opetusohjelman alussa mainittiin, loin t\u00e4st\u00e4 t\u00e4ydellisemm\u00e4n version, ja voit k\u00e4ytt\u00e4\u00e4 t\u00e4m\u00e4n ty\u00f6kalun repoa t\u00e4\u00e4lt\u00e4:<\/p>\n
https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n
Se on vain yksi Deno-moduuli, joka on luotu TypeScriptill\u00e4 ja luo n\u00e4m\u00e4 tiedostot:<\/p>\n