So erstellen und veröffentlichen Sie ein Deno-CLI-Tool richtig

Eine coole Sache am Ember-Framework ist, dass es über die Ember-CLI verfügt, um eine Komponente, eine Vorlage oder eine Route zu generieren. Es ist eine große Zeitersparnis und mehr noch, es ember generate componentgeneriert nicht nur die Komponente, sondern auch eine Testdatei für QUnit. Sehen wir uns an, wie man ein Deno-CLI-Tool erstellt, um etwas Ähnliches für React zu tun.

In diesem Deno-Tutorial erfahren Sie, wie Sie mit TypeScript ein Deno-CLI-Tool erstellen und Abhängigkeiten aus der Deno-Standardbibliothek laden. Wir werden untersuchen, wie man ein Verzeichnis liest und eine Datei schreibt. Schließlich lernen wir, unser Deno-Modul auf GitHub zu veröffentlichen und es direkt von diesem Ort aus auszuführen und es auch lokal zu installieren, damit es ohne Verbindung funktioniert.

Überblick

Das CLI-Tool, das wir in diesem Deno-Tutorial erstellen, akzeptiert einen Komponentennamen, der über die Befehlszeile übergeben wird, und generiert ein Verzeichnis und eine Datei mit dem Code für eine React-Funktionskomponente.

Ich habe eine vollständigere Version davon erstellt, die auch ein SASS-Stylesheet und eine für Jest und Enzyme geeignete Testdatei erstellt. In Kürze werden weitere Anpassungs- und Komponentenvorlagen (wie solche, die Hooks, Redux oder Router oder alle verwenden) hinzugefügt.

Der Einfachheit halber behandelt dieses Deno-Tutorial jedoch das Wesentliche: Lesen von Parametern und Schreiben von Dateien, und wir schreiben eine einzelne Datei. Der Rest ist String-Manipulation und mehr Inhaltsschreiben, nichts besonders Besonderes. Sie können auf das vollständige Deno-CLI-Tool zugreifen, um eine React-Komponente mit SASS und Jest im Repo am Ende dieses Artikels zu generieren.

Deno installieren

Um dieses Deno-CLI-Tool auszuführen, muss die Runtime installiert sein. Wenn Sie Homebrew bereits unter macOS verwenden, können Sie Deno schnell installieren mit:

brew install deno

Wenn Sie Homebrew nicht verwenden, können Sie es mit CURL installieren:

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

Andere Installationsmethoden und -systeme sind im Deno-Handbuch beschrieben .

Befehlszeilenparameter in Deno lesen

Das Wichtigste, was wir für unseren Generator brauchen, ist den Namen der Komponente zu nehmen. Wir müssen in der Lage sein, den Komponentennamen an das Deno- Tool zu übergeben. Erstellen Sie ein Verzeichnis und fügen Sie eine Datei mit dem Namen hinzu mod.tsund fügen Sie diese darin ein:

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

Wenn Sie jetzt die Variable hinzufügen Deno, erhalten Sie je nach Code-Editor und seiner TypeScript-Unterstützung wahrscheinlich eine Warnung, dass der DenoName nicht gefunden werden kann. Wenn Sie sich in VS Code befinden, können Sie dies mit der offiziellen VS Code-Erweiterung lösen, um Deno-Unterstützung hinzuzufügen. JetBrains hat auch ein Plugin veröffentlicht, um Deno-Unterstützung für JetBrain-IDEs bereitzustellen .

Führen Sie nun dieses Modul aus mit:

deno run mod.tsHallo Welt

Dies antwortet mit dem von uns übergebenen Parameter "HelloWorld":

Writing component HelloWorld

Nett! Es funktioniert!

Dateien mit Deno schreiben

Lassen Sie uns jetzt die Datei schreiben. Wir brauchen zuerst den Inhalt dafür, also fügen Sie diesen der mod.tsDatei hinzu. Wir verwenden JavaScript -Vorlagenliterale, um eine einzelne Zeichenfolge zu erstellen und den Namen der Komponente einzufügen, und rufen sogar eine Zeichenfolgenmethode auf, um sie in Kleinbuchstaben zu schreiben:

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

${name}.propTypes = {

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

Um dies in eine Datei zu schreiben, müssen wir zuerst prüfen, ob das Verzeichnis existiert. Dazu verwenden wir die ensureDirFunktion, die Teil der Deno-Standardbibliothek ist. Es erstellt das Verzeichnis oder die Verzeichnisse, wenn sie nicht existieren. Um Deno anzuweisen, diese Abhängigkeit zu verwenden, fügen Sie einfach dies oben in der Datei hinzu:

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

Wenn wir unser Tool ausführen, lädt Deno dieses Modul herunter, um es zu verwenden. Es ist endlich an der Zeit, die Datei mit writeTestFile, einem Befehl in der Deno-Laufzeit, zu schreiben. Fügen Sie am Ende der Datei Folgendes ein:

Lokaler Test

Wir haben unser Deno-CLI-Tool fertig programmiert und können es jetzt testen. Deno ist als Secure-First-Laufzeitumgebung aufgebaut, sodass Operationen wie das Lesen des Dateisystems oder das Schreiben darauf standardmäßig verweigert werden. Sie müssen Deno ausdrücklich bitten, den Zugriff auf das Dateisystem zuzulassen. Es ist in Lesezugriff und Schreibzugriff getrennt. In diesem Fall benötigen wir eine Leseberechtigung, da wir ensureDirzuerst das Verzeichnis lesen und prüfen müssen, ob es existiert. Wenn dies nicht der Fall ist, wird es erstellt, und dann erstellen wir die Datei. Für die letzten beiden Aufgaben benötigen wir eine Schreiberlaubnis. So können Sie es ausführen:

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

Und Sie haben die Verzeichnisse, die zusammen mit der Datei erstellt werden, alle relativ zu dem Ordner, in dem Sie dies ausführen, wie app/components/Button/index.js.

Veröffentlichen Sie ein Deno-Modul

Das Verteilen eines Deno-Moduls ist einfach. Wir haben dies ausführlich in einem früheren Beitrag über das Erstellen und Veröffentlichen eines Deno-Moduls auf GitHub behandelt. Sie müssen ein lokales Git-Repo initialisieren:

git init

füge deine Dateien hinzu und übertrage sie:

git add .
git commit -m "Initial commit"

Erstellen Sie ein Repository auf GitHub oder einem ähnlichen Dienst und übertragen Sie es. Wenn Sie beispielsweise ein a-deno-moduleauf GitHub benanntes Repo erstellen, können Sie dieses lokal ausführen, um es online zu pushen:

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

Verwenden Sie das online veröffentlichte Modul

Deno kann Module direkt aus dem Internet ausführen und ihre Abhängigkeiten automatisch installieren. Jetzt, da es bereitgestellt ist, können Sie unser Deno-CLI-Tool direkt von GitHub ausführen:

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

Deno lädt das Tool herunter, überprüft die Abhängigkeiten und installiert sie bei Bedarf. Das Ergebnis ist dasselbe wie oben, es werden die Verzeichnisse und die Datei erstellt.

Um zu vermeiden, dass Sie all das schreiben (oder in der Shell danach suchen) müssen, ermöglicht Ihnen Deno, dieses Tool zu installieren, damit es offline funktioniert:

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

Das Werkzeug erhält den Namen denomodu. Was dies tut, ist, eine ausführbare Datei mit der Befehlszeile in einem bestimmten Verzeichnis zu erstellen, wie /Users/%your-username%/.deno/binin macOS. Sein Inhalt ist der Befehl zum Ausführen des Tools und zum Akzeptieren von Parametern:

#!/bin/sh

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

Wenn Sie also nach Abschluss des Prozesses den ./deno/binPfad nicht zu Ihrer PATH-Umgebungsvariable hinzugefügt haben, wird Deno Sie dazu auffordern, damit Sie das Tool ausführen können.

Sobald Sie den Pfad zu Ihrer PATH-Variablen hinzugefügt haben, können Sie das Tool jetzt aufrufen:

denomodu button

Es ist viel kürzer und funktioniert jetzt auch ohne Internetverbindung. Herzliche Glückwünsche! Sie haben ein Deno-CLI-Tool erstellt, veröffentlicht und lokal installiert.

Deno CLI-Tool zum Generieren einer React-Komponente

Wie zu Beginn dieses Deno-Tutorials erwähnt, habe ich eine vollständigere Version davon erstellt, und Sie können hier auf das Repo für dieses Tool zugreifen:

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

Es ist nur ein Deno-Modul, das auf TypeScript erstellt wurde und diese Dateien erstellt:

• index.js, eine React-Funktionskomponente
• style.scss, sein SASS-Stylesheet
• test.js, ein einfacher Test mit Jest und Enzyme

Das folgende GIF zeigt, wie dieses Deno-Tool nach der Installation funktioniert:

Es akzeptiert zusammengesetzte Namen, die durch einen Bindestrich getrennt sind. Beispielsweise wird beim Übergeben nav-bareine Komponente mit dem Namen erstellt NavBar. Sie können auch einen anderen benutzerdefinierten Verzeichnispfad als den Standardpfad angeben app/componentsoder nicht und weiterhin den Standardpfad verwenden.