{"id":231745,"date":"2023-01-12T14:06:00","date_gmt":"2023-01-12T11:06:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231745"},"modified":"2023-01-12T14:07:23","modified_gmt":"2023-01-12T11:07:23","slug":"kuidas-deno-cli-toeoeriista-oigesti-luua-ja-avaldada","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kuidas-deno-cli-toeoeriista-oigesti-luua-ja-avaldada\/","title":{"rendered":"Kuidas Deno CLI t\u00f6\u00f6riista \u00f5igesti luua ja avaldada"},"content":{"rendered":"\n<p>\u00dcks lahe asi Emberi raamistiku juures on see, et sellel on Ember CLI komponendi, malli v\u00f5i marsruudi genereerimiseks. See s\u00e4\u00e4stab palju aega ja veelgi enam, <code>ember generate component<\/code>genereerib QUniti jaoks mitte ainult komponendi, vaid ka testfaili. Vaatame, kuidas luua Deno CLI t\u00f6\u00f6riist, et Reacti jaoks midagi sarnast teha.<\/p>\n<p>Selles Deno \u00f5petuses n\u00e4eme, kuidas luua TypeScriptiga Deno CLI t\u00f6\u00f6riista, kuidas laadida s\u00f5ltuvusi Deno standardteegist. Uurime, kuidas lugeda kataloogi ja kirjutada faili. L\u00f5puks \u00f5pime avaldama oma Deno mooduli GitHubis ja k\u00e4ivitama seda otse sellest asukohast ning installima seda kohapeal, et see t\u00f6\u00f6taks ilma \u00fchenduseta.<\/p>\n<h2>\u00dclevaade<\/h2>\n<p>CLI t\u00f6\u00f6riist, mille me selles Deno \u00f5petuses ehitame, aktsepteerib k\u00e4surealt edastatud komponendi nime ning loob kataloogi ja faili Reacti funktsionaalse komponendi koodiga.<\/p>\n<p>L\u00f5in sellest t\u00e4ielikuma versiooni, mis loob ka SASS-i stiilitabeli ja Jesti ja Enzyme&#8217;i jaoks sobiva testfaili. Varsti lisatakse rohkem kohandamis- ja komponentmalle (nagu need, mis kasutavad konkse v\u00f5i Reduxit v\u00f5i ruuterit v\u00f5i k\u00f5iki).<\/p>\n<p>Lihtsuse huvides h\u00f5lmab see Deno \u00f5petus aga p\u00f5hilist: parameetrite lugemist ja failide kirjutamist ning me kirjutame \u00fche faili. \u00dclej\u00e4\u00e4nu on stringidega manipuleerimine ja rohkem sisu kirjutamine, ei midagi erilist. Saate juurdep\u00e4\u00e4su t\u00e4ielikule Deno CLI t\u00f6\u00f6riistale, et luua React komponent koos SASSi ja Jestiga selle artikli l\u00f5pus olevas repos.<\/p>\n<h2>Installige Deno<\/h2>\n<p>Selle Deno CLI t\u00f6\u00f6riista k\u00e4ivitamiseks peab teil olema installitud k\u00e4itusaeg. Kui kasutate juba Homebrew&#8217;i macOS-is, saate Deno kiiresti installida j\u00e4rgmisega:<\/p>\n<pre><code>brew install deno<\/code><\/pre>\n<p>Kui te Homebrew&#8217;d ei kasuta, saate selle installida, kasutades CURL-i:<\/p>\n<pre><code>curl -fsSL https:\/\/deno.land\/x\/install\/install.sh | sh<\/code><\/pre>\n<p>Teisi paigaldusviise ja -s\u00fcsteeme kirjeldatakse <a href=\"https:\/\/deno.land\/manual\/getting_started\/installation\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Deno k\u00e4siraamatus<\/a>.<\/p>\n<h2>Lugege k\u00e4surea parameetreid Denos<\/h2>\n<p>K\u00f5ige olulisem asi, mida meie generaatori jaoks vajame, on v\u00f5tta komponendi nimi. Peame suutma komponendi nime <a href=\"https:\/\/startfunction.com\/tag\/deno\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Deno<\/a> t\u00f6\u00f6riistale edastada. Looge kataloog ja lisage fail nimega <code>mod.ts<\/code>ja kleepige see:<\/p>\n<pre><code>const { args: [name] } = Deno;\nconsole.log( `Writing component ${ name }` );<\/code><\/pre>\n<p>N\u00fc\u00fcd saate <code>Deno<\/code>muutuja lisamisel olenevalt koodiredaktorist ja selle TypeScripti toest t\u00f5en\u00e4oliselt hoiatuse, mis \u00fctleb, et see ei leia <code>Deno<\/code>nime. Kui kasutate VS-koodi, saate selle lahendada ametliku <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=denoland.vscode-deno\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">VS-koodi laienduse abil, et lisada Deno tugi<\/a>. JetBrains on avaldanud ka pistikprogrammi, mis pakub <a href=\"https:\/\/plugins.jetbrains.com\/plugin\/14382-deno\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JetBraini IDE-dele Deno tuge<\/a>.<\/p>\n<p>N\u00fc\u00fcd k\u00e4ivitage see moodul koos:<\/p>\n<p><code>deno run mod.ts<\/code>Tere, Maailm<\/p>\n<p>See vastab parameetriga &quot;HelloWorld&quot;, mille me edastasime:<\/p>\n<p><code>Writing component HelloWorld<\/code><\/p>\n<p>Tore! See t\u00f6\u00f6tab!<\/p>\n<h2>Kirjutage faile Denoga<\/h2>\n<p>Kirjutame kohe faili. Esmalt vajame selle jaoks sisu, nii et lisage see <code>mod.ts<\/code>faili. Kasutame <a href=\"https:\/\/startfunction.com\/category\/javascript\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">JavaScripti<\/a> malliliteraale, et luua \u00fcks string ja sisestada komponendi nimi ja isegi kutsuda stringi meetod, et muuta see v\u00e4iket\u00e4htedega:<\/p>\n<pre><code>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<p>Selle faili kirjutamiseks peame esmalt kontrollima, kas kataloog on olemas. Kasutame selleks <code>ensureDir<\/code>funktsiooni, mis on osa <a href=\"https:\/\/deno.land\/std\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Deno standardteegist<\/a>. See loob kataloogi v\u00f5i kataloogid, kui neid pole. Et \u00f6elda Denole seda s\u00f5ltuvust kasutama, lisage lihtsalt see faili \u00fclaossa:<\/p>\n<pre><code>import { ensureDir } from \"https:\/\/deno.land\/std\/fs\/ensure_dir.ts\";<\/code><\/pre>\n<p>Kui me oma t\u00f6\u00f6riista k\u00e4ivitame, laadib Deno selle mooduli selle kasutamiseks alla. L\u00f5puks on aeg kirjutada fail <code>writeTestFile<\/code>, kasutades k\u00e4sku Deno k\u00e4itusajal. Kleepige faili l\u00f5ppu j\u00e4rgmine tekst:<\/p>\n<pre><code>const compoPath: string = \".\/app\/components\/\" + compoName + \"\/\";\n\nensureDir(compoPath)\n  .then(() =&gt; {\n    Deno.writeTextFile(compoPath + \"index.js\", compoContent);\n    console.info(\"Done!\");\n});<\/code><\/pre>\n<h2>Kohalik test<\/h2>\n<p>Oleme oma Deno CLI t\u00f6\u00f6riista kodeerimise l\u00f5petanud ja saame n\u00fc\u00fcd seda testida. Deno on loodud turvaliseks esmalt k\u00e4ituskeskkonnaks, nii et sellised toimingud nagu failis\u00fcsteemi lugemine v\u00f5i sinna kirjutamine on vaikimisi keelatud. Peate selges\u00f5naliselt paluma Denol lubada juurdep\u00e4\u00e4su failis\u00fcsteemile. See on lugemis- ja kirjutamis\u00f5igusega eraldatud. Sel juhul vajame lugemisluba, sest <code>ensureDir<\/code>esmalt peame kataloogi lugema ja kontrollima, kas see on olemas. Kui ei, siis loob see selle ja siis loome faili. Kahe viimase \u00fclesande jaoks vajame kirjutamisluba. Nii et saate seda k\u00e4ivitada j\u00e4rgmiselt:<\/p>\n<p><code>deno --allow-read --allow-write mod.ts button<\/code><\/p>\n<p>Ja koos failiga luuakse ka kataloogid, mis on seotud kaustaga, kus seda k\u00e4ivitate, n\u00e4iteks <code>app\/components\/Button\/index.js<\/code>.<\/p>\n<h2>Deno mooduli avaldamine<\/h2>\n<p>Deno mooduli levitamine on lihtne. K\u00e4sitlesime seda \u00fcksikasjalikult eelmises postituses <a href=\"https:\/\/wordpress.mediadoma.com\/et\/avaldage-deno-moodul-kolme-kiire-sammuga\/\" title=\"Deno mooduli loomise ja avaldamise kohta GitHubis\">Deno mooduli loomise ja avaldamise kohta GitHubis<\/a>. Peate l\u00e4htestama kohaliku git repo:<\/p>\n<p><code>git init<\/code><\/p>\n<p>lisage ja kinnitage oma failid:<\/p>\n<p><code>git add .<\/code><br \/>\n<code>git commit -m \"Initial commit\"<\/code><\/p>\n<p>looge GitHubis v\u00f5i sarnases teenuses hoidla ja l\u00fckake see edasi. N\u00e4iteks kui loote <code>a-deno-module<\/code>GitHubis nimega repo, saate selle v\u00f5rgus edastamiseks kohapeal k\u00e4itada:<\/p>\n<p><code>git remote add origin git@github.com:YOUR-GITHUB-USER\/a-deno-module.git&lt;br&gt;git push -u origin master<\/code><\/p>\n<h2>Kasutage veebis avaldatud moodulit<\/h2>\n<p>Deno saab k\u00e4ivitada mooduleid otse Internetist ja installida oma s\u00f5ltuvused automaatselt. N\u00fc\u00fcd, kui see on juurutatud, saate meie Deno CLI t\u00f6\u00f6riista otse GitHubist k\u00e4ivitada:<\/p>\n<pre><code>deno run --allow-read --allow-write https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts button<\/code><\/pre>\n<p>Deno laadib t\u00f6\u00f6riista alla, kontrollib s\u00f5ltuvusi ja vajadusel installib need. Tulemus on sama, mis \u00fclal, see loob kataloogid ja faili.<\/p>\n<p>Et seda k\u00f5ike ei peaks kirjutama (v\u00f5i kestast otsima), lubab Deno selle t\u00f6\u00f6riista installida, et see t\u00f6\u00f6taks v\u00f5rgu\u00fchenduseta:<\/p>\n<pre><code>deno install --allow-read --allow-write --name denomodu https:\/\/raw.githubusercontent.com\/YOUR-GITHUB-USER\/a-deno-module\/master\/mod.ts<\/code><\/pre>\n<p>T\u00f6\u00f6riistale antakse nimi <code>denomodu<\/code>. See loob k\u00e4ivitatava faili k\u00e4sureaga teatud kataloogis, nagu <code>\/Users\/%your-username%\/.deno\/bin<\/code>macOS-is. Selle sisu on k\u00e4sk t\u00f6\u00f6riista k\u00e4ivitamiseks ja parameetrite aktsepteerimiseks:<\/p>\n<pre><code>#!\/bin\/sh\n\ndeno \"run\" \"--allow-read\" \"--allow-write\" \"https:\/\/raw.githubusercontent.com\/eliorivero\/react-generate-component\/master\/mod.ts\" \"$@\"<\/code><\/pre>\n<p>Kui te pole protsessi l\u00f5ppedes <code>.\/deno\/bin<\/code>oma PATH keskkonnamuutujale teed lisanud, palub Deno teil seda teha, et saaksite t\u00f6\u00f6riista k\u00e4ivitada.<\/p>\n<p>Kui olete oma PATH-muutujale tee lisanud, saate n\u00fc\u00fcd t\u00f6\u00f6riista k\u00e4ivitada:<\/p>\n<p><code>denomodu button<\/code><\/p>\n<p>See on palju l\u00fchem ja t\u00f6\u00f6tab n\u00fc\u00fcd ilma Interneti-\u00fchenduseta. Palju \u00f5nne! Olete loonud Deno CLI t\u00f6\u00f6riista, avaldanud selle ja installinud selle kohapeal.<\/p>\n<h2>Deno CLI t\u00f6\u00f6riist Reacti komponendi genereerimiseks<\/h2>\n<p>Nagu selle Deno \u00f5petuse alguses mainitud, l\u00f5in sellest t\u00e4ielikuma versiooni ja selle t\u00f6\u00f6riista repole p\u00e4\u00e4sete juurde siit:<\/p>\n<p><a href=\"https:\/\/github.com\/eliorivero\/react-generate-component\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">https:\/\/github.com\/eliorivero\/react-generate-component<\/a><\/p>\n<p>See on ainult \u00fcks Deno moodul, mis on loodud TypeScriptis ja loob j\u00e4rgmised failid:<\/p>\n<ul>\n<li><code>index.js<\/code>, Reacti funktsionaalne komponent<\/li>\n<li><code>style.scss<\/code>, selle SASS-i stiilileht<\/li>\n<li><code>test.js<\/code>, lihtne test, kasutades Jest ja Enzyme<\/li>\n<\/ul>\n<p>Allolev gif n\u00e4itab, kuidas see Deno t\u00f6\u00f6riist p\u00e4rast installimist t\u00f6\u00f6tab:<\/p>\n<p>See aktsepteerib liitnimesid, mis on eraldatud sidekriipsuga. N\u00e4iteks <code>nav-bar<\/code>loob l\u00e4bimine komponendi nimega <code>NavBar<\/code>. Saate m\u00e4\u00e4rata ka kohandatud kataloogitee, mis pole vaiketee <code>app\/components<\/code>v\u00f5i mitte, ja j\u00e4tkata vaiketee kasutamist.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/startfunction.com\" class=\"external external_icon\">startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Koostame t\u00f6\u00f6riista, mis loob faili Reacti funktsionaalse komponendi jaoks.<\/p>\n","protected":false},"author":1,"featured_media":157660,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,749,729,833,1017,894,842],"tags":[1165],"class_list":["post-231745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-avatud-laehtekoodiga","category-javascript-4","category-juhend-algajatele","category-kasulikud-saidid","category-kood","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/231745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=231745"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/231745\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/157660"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=231745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=231745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=231745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}