Kuinka luoda ja julkaista Deno CLI -työkalu oikein

Yksi hieno asia Ember-kehyksessä on, että siinä on Ember CLI komponentin, mallin tai reitin luomiseksi. Se säästää paljon aikaa, ja vielä enemmän, se ember generate componentluo paitsi komponentin myös testitiedoston QUnitille. Katsotaanpa, kuinka luodaan Deno CLI -työkalu tekemään jotain vastaavaa Reactille.

Tässä Deno-opetusohjelmassa näemme, kuinka luodaan Deno CLI -työkalu TypeScriptillä ja kuinka ladataan riippuvuuksia Denon standardikirjastosta. Tutkimme kuinka lukea hakemistoa ja kirjoittaa tiedosto. Lopuksi opimme julkaisemaan Deno-moduulimme GitHubissa ja suorittamaan sitä suoraan kyseisestä sijainnista sekä asentamaan sen paikallisesti, jotta se voi toimia ilman yhteyttä.

Yleiskatsaus

Tässä Deno-opetusohjelmassa rakentamamme CLI-työkalu hyväksyy komentoriviltä välitetyn komponentin nimen ja luo hakemiston ja tiedoston React-toiminnallisen komponentin koodilla.

Tein tästä täydellisemmän version, joka luo myös SASS-tyylitaulukon ja testitiedoston, joka sopii Jestille ja Enzymelle. Lisää räätälöityjä ja komponenttimalleja (kuten koukkuja tai Reduxia tai Routeria tai kaikkia käyttäviä) pian.

Yksinkertaisuuden vuoksi tämä Deno-opetusohjelma kattaa kuitenkin olennaiset asiat: parametrien lukemisen ja tiedostojen kirjoittamisen, ja kirjoitamme yhden tiedoston. Loput on merkkijonojen manipulointia ja enemmän sisällön kirjoittamista, ei mitään erityistä. Voit käyttää täyttä Deno CLI -työkalua luodaksesi React-komponentin SASS:n ja Jestin kanssa tämän artikkelin lopussa olevassa repossa.

Asenna Deno

Jotta voit käyttää tätä Deno CLI -työkalua, sinulla on oltava ajonaika asennettuna. Jos käytät jo Homebrew’ta macOS:ssä, voit asentaa Denon nopeasti seuraavilla tavoilla:

brew install deno

Jos et käytä Homebrew’ta, voit asentaa sen käyttämällä CURL-osoitetta:

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

Muut asennustavat ja järjestelmät on kuvattu Deno Manual -oppaassa.

Lue komentoriviparametrit Denossa

Olennaisinta, mitä tarvitsemme generaattorillemme, on ottaa komponentin nimi. Meidän on pystyttävä välittämään komponentin nimi Deno- työkalulle. Luo hakemisto ja lisää tiedosto nimeltä mod.tsja liitä siihen tämä:

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

Nyt, kun lisäät Denomuuttujan, saat luultavasti varoituksen koodieditoristasi ja sen TypeScript-tuesta riippuen, että se ei löydä Denonimeä. Jos käytät VS Codea, voit ratkaista tämän käyttämällä virallista VS Code -laajennusta lisätäksesi Deno-tuen. JetBrains on myös julkaissut laajennuksen Deno-tuen tarjoamiseksi JetBrain IDE:ille.

Suorita nyt tämä moduuli seuraavasti:

deno run mod.tsHei maailma

Tämä vastaa parametrilla "HelloWorld", jonka hyväksymme:

Writing component HelloWorld

Kiva! Se toimii!

Kirjoita tiedostoja Denon kanssa

Kirjoitetaan nyt tiedosto. Tarvitsemme ensin sen sisällön, joten lisää tämä mod.tstiedostoon. Käytämme JavaScript -mallin literaaleja luodaksemme yhden merkkijonon ja lisäämällä komponentin nimen ja jopa kutsumalla merkkijonomenetelmää tehdäksesi siitä pieniä kirjaimia:

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

${name}.propTypes = {

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

Jos haluat kirjoittaa tämän tiedostoon, meidän on ensin tarkistettava, onko hakemisto olemassa. Käytämme tähän ensureDirfunktiota, joka on osa Denon standardikirjastoa. Se luo hakemiston tai hakemistot, jos niitä ei ole olemassa. Jos haluat käskeä Denon käyttämään tätä riippuvuutta, lisää tämä tiedoston yläosaan:

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

Kun käytämme työkaluamme, Deno lataa tämän moduulin käyttääkseen sitä. On vihdoin aika kirjoittaa tiedosto writeTestFileDeno-ajonaikaisen komennon avulla. Liitä tiedoston loppuun seuraava:

Paikallinen testi

Deno CLI -työkalumme on koodattu valmiiksi ja voimme nyt testata sitä. Deno on rakennettu turvalliseksi ajonaikaiseksi, joten toiminnot, kuten tiedostojärjestelmän lukeminen tai siihen kirjoittaminen, estetään oletuksena. Sinun on nimenomaisesti pyydettävä Denoa sallimaan tiedostojärjestelmän käyttö. Se on erotettu luku- ja kirjoitusoikeuksilla. Tässä tapauksessa tarvitsemme lukuoikeudet, koska ensureDirensin on luettava hakemisto ja tarkistettava, onko se olemassa. Jos ei, se luo sen ja sitten luomme tiedoston. Kahteen viimeiseen tehtävään tarvitsemme kirjoitusluvan. Joten voit ajaa sen seuraavasti:

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

Ja hakemistot luodaan tiedoston mukana, kaikki suhteessa kansioon, jossa suoritat tämän, kuten app/components/Button/index.js.

Julkaise Deno-moduuli

Deno-moduulin jakelu on helppoa. Käsittelimme tätä yksityiskohtaisesti edellisessä viestissä, jossa käsiteltiin Deno-moduulin luomista ja julkaisemista GitHubissa. Sinun on alustettava paikallinen git repo:

git init

lisää ja sitoa tiedostosi:

git add .
git commit -m "Initial commit"

luo arkisto GitHubissa tai vastaavassa palvelussa ja työnnä se. Jos esimerkiksi luot a-deno-moduleGitHubissa nimetyn repon, voit suorittaa tämän paikallisesti ja siirtää sen verkkoon:

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

Käytä verkossa julkaistua moduulia

Deno voi ajaa moduuleja suoraan Internetistä ja asentaa riippuvuutensa automaattisesti. Nyt kun se on otettu käyttöön, voit käyttää Deno CLI -työkaluamme suoraan GitHubista:

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

Deno lataa työkalun, tarkistaa riippuvuudet ja asentaa ne tarvittaessa. Tulos on sama kuin yllä, se luo hakemistot ja tiedoston.

Jotta sinun ei tarvitse kirjoittaa kaikkea tätä (tai etsiä sitä kuoresta), Deno antaa sinun asentaa tämän työkalun, jotta se toimii offline-tilassa:

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

Työkalun nimeksi tulee denomodu. Tämä luo suoritettavan tiedoston komentorivillä tiettyyn hakemistoon, kuten /Users/%your-username%/.deno/binmacOS:ssä. Sen sisältö on komento suorittaa työkalu ja hyväksyä parametrit:

#!/bin/sh

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

Joten kun prosessi on valmis, jos et ole lisännyt ./deno/binpolkua PATH-ympäristömuuttujaasi, Deno kehottaa sinua tekemään niin, jotta voit suorittaa työkalun.

Kun olet lisännyt polun PATH-muuttujaasi, voit nyt käynnistää työkalun:

denomodu button

Se on paljon lyhyempi ja toimii nyt ilman Internet-yhteyttä. Onnittelut! Olet luonut Deno CLI -työkalun, julkaissut sen ja asentanut sen paikallisesti.

Deno CLI -työkalu React-komponentin luomiseen

Kuten tämän Deno-opetusohjelman alussa mainittiin, loin tästä täydellisemmän version, ja voit käyttää tämän työkalun repoa täältä:

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

Se on vain yksi Deno-moduuli, joka on luotu TypeScriptillä ja luo nämä tiedostot:

• index.js, Reactin toiminnallinen komponentti
• style.scss, sen SASS-tyylitaulukko
• test.js, yksinkertainen testi Jestillä ja Enzymellä

Alla oleva gif näyttää, kuinka tämä Deno-työkalu toimii asennuksen jälkeen:

Se hyväksyy yhdistetyt nimet, jotka on erotettu viivalla. Esimerkiksi hyväksyminen nav-barluo komponentin nimeltä NavBar. Voit myös määrittää mukautetun hakemistopolun, joka ei ole oletuspolku app/componentstai ei, ja jatkaa oletuspolun käyttöä.