Kuidas Deno CLI tööriista õigesti luua ja avaldada

Üks lahe asi Emberi raamistiku juures on see, et sellel on Ember CLI komponendi, malli või marsruudi genereerimiseks. See säästab palju aega ja veelgi enam, ember generate componentgenereerib QUniti jaoks mitte ainult komponendi, vaid ka testfaili. Vaatame, kuidas luua Deno CLI tööriist, et Reacti jaoks midagi sarnast teha.

Selles Deno õpetuses näeme, kuidas luua TypeScriptiga Deno CLI tööriista, kuidas laadida sõltuvusi Deno standardteegist. Uurime, kuidas lugeda kataloogi ja kirjutada faili. Lõpuks õpime avaldama oma Deno mooduli GitHubis ja käivitama seda otse sellest asukohast ning installima seda kohapeal, et see töötaks ilma ühenduseta.

Ülevaade

CLI tööriist, mille me selles Deno õpetuses ehitame, aktsepteerib käsurealt edastatud komponendi nime ning loob kataloogi ja faili Reacti funktsionaalse komponendi koodiga.

Lõin sellest täielikuma versiooni, mis loob ka SASS-i stiilitabeli ja Jesti ja Enzyme’i jaoks sobiva testfaili. Varsti lisatakse rohkem kohandamis- ja komponentmalle (nagu need, mis kasutavad konkse või Reduxit või ruuterit või kõiki).

Lihtsuse huvides hõlmab see Deno õpetus aga põhilist: parameetrite lugemist ja failide kirjutamist ning me kirjutame ühe faili. Ülejäänu on stringidega manipuleerimine ja rohkem sisu kirjutamine, ei midagi erilist. Saate juurdepääsu täielikule Deno CLI tööriistale, et luua React komponent koos SASSi ja Jestiga selle artikli lõpus olevas repos.

Installige Deno

Selle Deno CLI tööriista käivitamiseks peab teil olema installitud käitusaeg. Kui kasutate juba Homebrew’i macOS-is, saate Deno kiiresti installida järgmisega:

brew install deno

Kui te Homebrew’d ei kasuta, saate selle installida, kasutades CURL-i:

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

Teisi paigaldusviise ja -süsteeme kirjeldatakse Deno käsiraamatus.

Lugege käsurea parameetreid Denos

Kõige olulisem asi, mida meie generaatori jaoks vajame, on võtta komponendi nimi. Peame suutma komponendi nime Deno tööriistale edastada. Looge kataloog ja lisage fail nimega mod.tsja kleepige see:

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

Nüüd saate Denomuutuja lisamisel olenevalt koodiredaktorist ja selle TypeScripti toest tõenäoliselt hoiatuse, mis ütleb, et see ei leia Denonime. Kui kasutate VS-koodi, saate selle lahendada ametliku VS-koodi laienduse abil, et lisada Deno tugi. JetBrains on avaldanud ka pistikprogrammi, mis pakub JetBraini IDE-dele Deno tuge.

Nüüd käivitage see moodul koos:

deno run mod.tsTere, Maailm

See vastab parameetriga "HelloWorld", mille me edastasime:

Writing component HelloWorld

Tore! See töötab!

Kirjutage faile Denoga

Kirjutame kohe faili. Esmalt vajame selle jaoks sisu, nii et lisage see mod.tsfaili. Kasutame JavaScripti malliliteraale, et luua üks string ja sisestada komponendi nimi ja isegi kutsuda stringi meetod, et muuta see väiketähtedega:

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

${name}.propTypes = {

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

Selle faili kirjutamiseks peame esmalt kontrollima, kas kataloog on olemas. Kasutame selleks ensureDirfunktsiooni, mis on osa Deno standardteegist. See loob kataloogi või kataloogid, kui neid pole. Et öelda Denole seda sõltuvust kasutama, lisage lihtsalt see faili ülaossa:

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

Kui me oma tööriista käivitame, laadib Deno selle mooduli selle kasutamiseks alla. Lõpuks on aeg kirjutada fail writeTestFile, kasutades käsku Deno käitusajal. Kleepige faili lõppu järgmine tekst:

Kohalik test

Oleme oma Deno CLI tööriista kodeerimise lõpetanud ja saame nüüd seda testida. Deno on loodud turvaliseks esmalt käituskeskkonnaks, nii et sellised toimingud nagu failisüsteemi lugemine või sinna kirjutamine on vaikimisi keelatud. Peate selgesõnaliselt paluma Denol lubada juurdepääsu failisüsteemile. See on lugemis- ja kirjutamisõigusega eraldatud. Sel juhul vajame lugemisluba, sest ensureDiresmalt peame kataloogi lugema ja kontrollima, kas see on olemas. Kui ei, siis loob see selle ja siis loome faili. Kahe viimase ülesande jaoks vajame kirjutamisluba. Nii et saate seda käivitada järgmiselt:

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

Ja koos failiga luuakse ka kataloogid, mis on seotud kaustaga, kus seda käivitate, näiteks app/components/Button/index.js.

Deno mooduli avaldamine

Deno mooduli levitamine on lihtne. Käsitlesime seda üksikasjalikult eelmises postituses Deno mooduli loomise ja avaldamise kohta GitHubis. Peate lähtestama kohaliku git repo:

git init

lisage ja kinnitage oma failid:

git add .
git commit -m "Initial commit"

looge GitHubis või sarnases teenuses hoidla ja lükake see edasi. Näiteks kui loote a-deno-moduleGitHubis nimega repo, saate selle võrgus edastamiseks kohapeal käitada:

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

Kasutage veebis avaldatud moodulit

Deno saab käivitada mooduleid otse Internetist ja installida oma sõltuvused automaatselt. Nüüd, kui see on juurutatud, saate meie Deno CLI tööriista otse GitHubist käivitada:

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

Deno laadib tööriista alla, kontrollib sõltuvusi ja vajadusel installib need. Tulemus on sama, mis ülal, see loob kataloogid ja faili.

Et seda kõike ei peaks kirjutama (või kestast otsima), lubab Deno selle tööriista installida, et see töötaks võrguühenduseta:

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

Tööriistale antakse nimi denomodu. See loob käivitatava faili käsureaga teatud kataloogis, nagu /Users/%your-username%/.deno/binmacOS-is. Selle sisu on käsk tööriista käivitamiseks ja parameetrite aktsepteerimiseks:

#!/bin/sh

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

Kui te pole protsessi lõppedes ./deno/binoma PATH keskkonnamuutujale teed lisanud, palub Deno teil seda teha, et saaksite tööriista käivitada.

Kui olete oma PATH-muutujale tee lisanud, saate nüüd tööriista käivitada:

denomodu button

See on palju lühem ja töötab nüüd ilma Interneti-ühenduseta. Palju õnne! Olete loonud Deno CLI tööriista, avaldanud selle ja installinud selle kohapeal.

Deno CLI tööriist Reacti komponendi genereerimiseks

Nagu selle Deno õpetuse alguses mainitud, lõin sellest täielikuma versiooni ja selle tööriista repole pääsete juurde siit:

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

See on ainult üks Deno moodul, mis on loodud TypeScriptis ja loob järgmised failid:

• index.js, Reacti funktsionaalne komponent
• style.scss, selle SASS-i stiilileht
• test.js, lihtne test, kasutades Jest ja Enzyme

Allolev gif näitab, kuidas see Deno tööriist pärast installimist töötab:

See aktsepteerib liitnimesid, mis on eraldatud sidekriipsuga. Näiteks nav-barloob läbimine komponendi nimega NavBar. Saate määrata ka kohandatud kataloogitee, mis pole vaiketee app/componentsvõi mitte, ja jätkata vaiketee kasutamist.