Jak prawidłowo stworzyć i opublikować narzędzie Deno CLI

Jedną fajną rzeczą w frameworku Ember jest to, że ma on CLI Ember do generowania komponentu, szablonu lub trasy. To duża oszczędność czasu, a co więcej, ember generate componentgeneruje nie tylko komponent, ale także plik testowy dla QUnit. Zobaczmy, jak stworzyć narzędzie Deno CLI, aby zrobić coś podobnego dla Reacta.

W tym samouczku Deno zobaczymy, jak utworzyć narzędzie Deno CLI za pomocą TypeScript, jak załadować zależności ze standardowej biblioteki Deno. Dowiemy się, jak czytać katalog i zapisywać plik. Na koniec nauczymy się publikować nasz moduł Deno na GitHub i uruchamiać go bezpośrednio z tej lokalizacji, a także instalować go lokalnie, aby mógł działać bez połączenia.

Przegląd

Narzędzie CLI, które zbudujemy w tym samouczku Deno, zaakceptuje nazwę komponentu przekazaną w wierszu poleceń i wygeneruje katalog oraz plik z kodem komponentu funkcjonalnego React.

Stworzyłem pełniejszą wersję tego, która tworzy również arkusz stylów SASS i plik testowy odpowiedni dla Jest i Enzyme. Wkrótce dodamy więcej szablonów dostosowywania i komponentów (takich jak te korzystające z hooków, Redux, Routera lub wszystkich z nich).

Jednak dla uproszczenia ten samouczek Deno omówi podstawowe informacje: odczytywanie parametrów i zapisywanie plików, a my napiszemy jeden plik. Reszta to manipulacja ciągami znaków i więcej pisania treści, nic szczególnego. Możesz uzyskać dostęp do pełnego narzędzia Deno CLI, aby wygenerować komponent React z SASS i Jest w repozytorium na końcu tego artykułu.

Zainstaluj Deno

Aby uruchomić to narzędzie Deno CLI, musisz mieć zainstalowane środowisko wykonawcze. Jeśli korzystasz już z Homebrew na macOS, możesz szybko zainstalować Deno za pomocą:

brew install deno

Jeśli nie używasz Homebrew, możesz zainstalować go za pomocą CURL:

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

Inne metody i systemy instalacji są opisane w Instrukcji Deno.

Przeczytaj parametry wiersza poleceń w Deno

Najważniejszą rzeczą, jakiej potrzebujemy dla naszego generatora, jest przyjęcie nazwy komponentu. Musimy mieć możliwość przekazania nazwy komponentu do narzędzia Deno. Utwórz katalog i dodaj plik o nazwie mod.tsi wklej do niego:

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

Teraz, gdy dodasz Denozmienną, prawdopodobnie otrzymasz ostrzeżenie, w zależności od edytora kodu i jego obsługi TypeScript, mówiące, że nie może znaleźć Denonazwy. Jeśli korzystasz z VS Code, możesz rozwiązać ten problem, korzystając z oficjalnego rozszerzenia VS Code, aby dodać obsługę Deno. JetBrains opublikował również wtyczkę zapewniającą obsługę Deno dla IDE JetBrain.

Teraz uruchom ten moduł z:

deno run mod.tsWitaj świecie

To odpowie parametrem „HelloWorld", który przekazaliśmy:

Writing component HelloWorld

Miły! To działa!

Zapisuj pliki za pomocą Deno

Zapiszmy teraz plik. Najpierw potrzebujemy do tego treści, więc dodaj to do mod.tspliku. Użyjemy literałów szablonu JavaScript, aby utworzyć pojedynczy ciąg i wstawić nazwę komponentu, a nawet wywołamy metodę ciągu, aby zmienić go na małe:

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

${name}.propTypes = {

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

Aby zapisać to do pliku, najpierw musimy sprawdzić, czy katalog istnieje. Wykorzystamy do tego ensureDirfunkcję, część standardowej biblioteki Deno. Utworzy katalog lub katalogi, jeśli nie istnieją. Aby powiedzieć Deno, aby używał tej zależności, po prostu dodaj to na górze pliku:

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

Kiedy uruchomimy nasze narzędzie, Deno pobierze ten moduł, aby z niego korzystać. W końcu nadszedł czas, aby zapisać plik za writeTestFilepomocą polecenia w środowisku wykonawczym Deno. Wklej następujące informacje na końcu pliku:

Test lokalny

Skończyliśmy kodowanie naszego narzędzia Deno CLI i możemy je teraz przetestować. Deno jest zbudowany jako bezpieczne środowisko uruchomieniowe, więc operacje takie jak odczytywanie systemu plików lub zapisywanie do niego są domyślnie zabronione. Musisz wyraźnie poprosić Deno o zezwolenie na dostęp do systemu plików. Jest rozdzielony na dostęp do odczytu i dostęp do zapisu. W tym przypadku potrzebujemy uprawnienia ensureDirdo odczytu, ponieważ najpierw musimy odczytać katalog i sprawdzić, czy istnieje. Jeśli nie, utworzy go, a następnie utworzymy plik. W przypadku dwóch ostatnich zadań potrzebujemy uprawnień do zapisu. Więc tak możesz to uruchomić:

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

I będziesz miał katalogi utworzone wraz z plikiem, wszystkie względem folderu, w którym to wykonujesz, na przykład app/components/Button/index.js.

Opublikuj moduł Deno

Dystrybucja modułu Deno jest prosta. Omówiliśmy to szczegółowo w poprzednim poście dotyczącym tworzenia i publikowania modułu Deno w serwisie GitHub. Musisz zainicjować lokalne repozytorium git:

git init

dodaj i zatwierdź swoje pliki:

git add .
git commit -m "Initial commit"

utwórz repozytorium na GitHub lub podobnej usłudze i wypchnij je. Na przykład, jeśli utworzysz repozytorium o nazwie a-deno-modulena GitHub, możesz uruchomić to lokalnie, aby przesłać je online:

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

Skorzystaj z modułu opublikowanego online

Deno może uruchamiać moduły bezpośrednio z Internetu i automatycznie instalować swoje zależności. Teraz, gdy jest wdrożone, możesz uruchomić nasze narzędzie Deno CLI bezpośrednio z GitHub:

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

Deno pobierze narzędzie, sprawdzi zależności i zainstaluje je w razie potrzeby. Wynik będzie taki sam jak powyżej, utworzy katalogi i plik.

Aby uniknąć konieczności pisania tego wszystkiego (lub szukania tego w powłoce), Deno pozwala zainstalować to narzędzie, aby działało w trybie offline:

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

Narzędzie otrzyma nazwę denomodu. To, co to robi, polega na utworzeniu pliku wykonywalnego z wierszem poleceń w określonym katalogu, na przykład /Users/%your-username%/.deno/binw macOS. Jego treścią jest polecenie uruchomienia narzędzia i zaakceptowania parametrów:

#!/bin/sh

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

Tak więc po zakończeniu procesu, jeśli nie dodałeś ./deno/binścieżki do zmiennej środowiskowej PATH, Deno wyświetli monit, aby to zrobić, aby można było uruchomić narzędzie.

Po dodaniu ścieżki do zmiennej PATH możesz teraz wywołać narzędzie:

denomodu button

Jest znacznie krótszy, a teraz działa bez połączenia z Internetem. Gratulacje! Utworzyłeś narzędzie Deno CLI, opublikowałeś je i zainstalowałeś lokalnie.

Narzędzie Deno CLI do generowania komponentu React

Jak wspomniano na początku tego samouczka Deno, stworzyłem pełniejszą wersję tego i możesz uzyskać dostęp do repozytorium tego narzędzia tutaj:

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

To tylko jeden moduł Deno utworzony na TypeScript i tworzy te pliki:

• index.js, komponent funkcjonalny React
• style.scss, jego arkusz stylów SASS
• test.js, prosty test wykorzystujący Jest i Enzyme

Poniższy gif pokazuje, jak działa to narzędzie Deno po zainstalowaniu:

Akceptuje nazwy złożone oddzielone myślnikiem. Na przykład przekazanie nav-barspowoduje utworzenie komponentu o nazwie NavBar. Możesz również określić niestandardową ścieżkę katalogu inną niż domyślna app/componentslub nie i nadal używać ścieżki domyślnej.