Les programmes en ligne de commande sont des logiciels utilisés pour interagir avec l’ordinateur via le terminal. Dans ce didacticiel, vous apprendrez à créer des applications en ligne de commande à l’aide de React et Node.js.
Une interface de ligne de commande (CLI) est un programme informatique qui traite les commandes sous la forme d’entrées de texte et exécute à son tour des fonctions système. Aux débuts de l’informatique, la seule façon d’interagir avec un ordinateur passait par le terminal. Mais aujourd’hui, de nombreux utilisateurs interagissent avec l’ordinateur via une interface utilisateur graphique (GUI). En tant que développeur de logiciels, vous avez probablement utilisé une CLI. Si vous êtes un développeur Node.js ou React, vous utilisez (presque) tous les jours la CLI npm.
Vous avez probablement utilisé une CLI pour installer ou configurer des logiciels ou automatiser des tâches répétitives. Il existe de nombreux cas d’utilisation pour créer une CLI et savoir comment le faire avec vos compétences JavaScript et React.js peut être productif.
Comprendre le projet du Tutorial
Ce tutoriel vous montrera comment créer une CLI en utilisant Node.js et React. La CLI sera utilisée pour créer un projet de microservice Node.js. Cela ressemblera au fonctionnement de create-react-app dans la mesure où vous pouvez l’exécuter à l’aide de npx ou simplement l’installer en tant que package global.
Prérequis
Pour suivre ce tutoriel, vous devez savoir comment utiliser React et Node.js. Vous devez également avoir installé Node.js et npm.
Configurer le projet CLI
Vous allez construire la CLI en utilisant Encrer, une bibliothèque basée sur des composants React pour créer des CLI interactives. Il utilise Yoga construire Boîte flexible mises en page dans le terminal, de sorte que la plupart des accessoires de type CSS sont également disponibles dans Ink. Ink est simplement un moteur de rendu React pour le terminal, donc toutes les fonctionnalités de React sont prises en charge. Pas besoin d’apprendre une nouvelle syntaxe spécifique à Ink.
Exécutez les commandes ci-dessous pour créer le projet.
mkdir create-micro-service && cd create-micro-service
npx create-ink-app
Une fois la commande traitée, les fichiers de projet et les dépendances doivent être installés et un lien symbolique créé pour la CLI. Ouvrez votre terminal et lancez la commande create-micro-service. Vous devriez recevoir le message « Bonjour étranger » imprimé. Si tu cours create-micro-service --helpvous devriez recevoir le message d’aide suivant.
Usage
$ create-micro-service
Options
--name Your name
Examples
$ create-micro-service --name=Jane
Hello, Jane
Traitement des arguments et des drapeaux
Il y a deux fichiers importants dans le répertoire du projet, à savoir cli.js et ui.js. Le fichier cli.js est le point d’entrée dans l’application, et ui.js est le composant React qui rend le message Bonjour étranger. Dans cli.js vous trouverez le code suivant :
#!/usr/bin/env node
"use strict";
const React = require("react");
const importJsx = require("import-jsx");
const { render } = require("ink");
const meow = require("meow");
const ui = importJsx("./ui");
const cli = meow(`
Usage
$ create-micro-service
Options
--name Your name
Examples
$ create-micro-service --name=Jane
Hello, Jane
`);
render(React.createElement(ui, cli.flags));
Vous remarquerez qu’il utilise meow pour lire la commande et les drapeaux. Ensuite, il passe les drapeaux au interface utilisateur composant et le rend. Miaou est une bibliothèque d’aide pour analyser les arguments. Le texte est passé à meow() est le texte d’aide qui s’affiche lorsque vous appelez create-micro-service --help.
Modifier le texte d’aide
La CLI acceptera un --name indicateur à utiliser comme nom de répertoire pour le projet à échafauder. Modifions le texte d’aide pour l’indiquer. Ouvrez cli.js et mettez à jour les instructions des lignes 10 à 20 avec le code ci-dessous.
const cli = meow(`
Usage
$ create-micro-service
Options
--name Your project's name.
Examples
$ create-micro-service --name=order-service
`);
C’est tout ce qu’il faut pour l’instant. L’étape suivante consiste à créer le répertoire avec les fichiers et dépendances nécessaires.
Copiez les fichiers du projet et installez les dépendances
Lorsque la CLI s’exécute, elle doit créer un nouveau répertoire et y cloner un modèle de projet Node.js. Ensuite, il installera certaines dépendances nécessaires au projet. Commençons par cloner les fichiers du projet. Il existe différentes manières de procéder, par exemple en démarrant un processus enfant et en exécutant une commande Git pour cloner le projet. Pour ce tutoriel, vous allez utiliser des vies. degit fera une copie locale d’un dépôt Git sans copier l’historique Git.
Installez degit en exécutant la commande npm i degit.
Créer un nouveau fichier nommé init.js et collez-y le code ci-dessous.
const degit = require("degit");
exports.clone = async (name) => {
const emitter = degit("github:kazi-faas/function-template-js");
await emitter.clone(`./${name}`);
};
Le code ci-dessus initialise le module degit avec le nom du dépôt Git à cloner. Il est fonction-modèle-js dépôt sous le travail-faas organisme. La valeur de chaîne est préfixée par github: afin qu’il connaisse le serveur Git à utiliser. Si vous utilisez GitLab, ce sera gitlab:.
La cloner() La fonction clonera alors les fichiers dans le répertoire spécifié. Le nom du répertoire sera le --name drapeau depuis la ligne de commande. Vous pouvez trouver le référentiel GitHub du modèle sur github.com/kazi-faas/function-template-js.
Une fois le modèle cloné, un fichier package.json sera ajouté. Vous pouvez simplement utiliser le fs module pour créer et écrire dans ce fichier. Pour ce tutoriel, vous allez utiliser le écrire-pkg paquet npm pour cela. Son seul but est de créer des fichiers package.json.
Ouvrez votre terminal et lancez la commande npm i write-pkg@4 pour installer le paquet.
Ajoutez ensuite les instructions require suivantes dans init.js.
const { join } = require("path");
const writePackage = require("write-pkg");
Copiez et collez le addPackageJson() fonction ci-dessous au même fichier.
exports.addPackageJson = async (name) => {
const pkg = {
name,
description: "A function which responds to HTTP requests",
main: "index.js",
scripts: {
start: "micro",
dev: "micro-dev",
},
};
await writePackage(join(process.cwd(), name, "package.json"), pkg);
};
La addPackageJson() va créer un fichier package.json pour le projet. Il utilisera le name paramètre comme nom de package, et il comprend deux scripts, à savoir début et développeur.
Après avoir ajouté le fichier package.json, la CLI doit installer les dépendances requises pour exécuter l’application. Les dépendances qu’il installera sont :
- micro: Une bibliothèque pour les microservices HTTP asynchrones.
- micro-dev : C’est la même chose que micro mais spécifiquement à des fins de développement.
Vous allez utiliser pkg-install pour installer les packages npm. pkg-install facilite l’installation des packages npm quel que soit le gestionnaire de packages. Ouvrez le terminal et exécutez npm i pkg-install pour l’installer.
Une fois installé, ouvrez init.js et importez la bibliothèque.
const { install } = require("pkg-install");
Ensuite, copiez et collez également la fonction ci-dessous dans init.js.
exports.installDependencies = async (name) => {
const dir = join(process.cwd(), name);
await install({ micro: "^9.3.4" }, { cwd: dir });
await install({ "micro-dev": "^3.0.0" }, { cwd: dir, dev: true });
};
La install La fonction est appelée avec le nom et la version du package, ainsi que le répertoire à installer. Vous avez utilisé deux appels différents pour install() parce que nous voulons installer micro-dev en tant que devDependency (voir le dev: true option).
Mettre à jour le composant React
Vous allez mettre à jour ui.js pour échafauder un nouveau projet et montrer la progression de cette action dans le terminal. Vous utiliserez liste des tâches d’encre, un composant de liste de tâches pour Ink, pour afficher une liste de tâches et leur progression. Vous devez installer ce composant pour l’utiliser.
Ouvrez votre terminal et lancez la commande npm i ink-task-list pour l’installer. Après cela, ouvrez ui.js et les instructions requises suivantes
const { Task, TaskList } = require("ink-task-list");
const { addPackageJson, clone, installDependencies } = require("./init");
Modifiez la valeur par défaut du name accessoire de Stranger à micro-service. La CLI doit utiliser micro-service comme nom de répertoire/projet si aucun n’est fourni par l’utilisateur.
Mettre à jour le App composant fonctionnel avec le code ci-dessous.
const App = ({ name = "micro-service" }) => {
const [tasks, setTasks] = React.useState([
{ state: "loading", label: "Downloading files." },
]);
React.useEffect(() => {
async function scaffold() {
await clone(name);
setTasks([
{ state: "success", label: "Downloaded files." },
{ state: "loading", label: "Adding package.json." },
]);
await addPackageJson(name);
setTasks((prevState) => [
{ ...prevState[0] },
{ state: "success", label: "Added package.json." },
{ state: "loading", label: "Installing dependencies." },
]);
await installDependencies(name);
setTasks((prevState) => [
{ ...prevState[0] },
{ ...prevState[1] },
{ state: "success", label: "Installed dependencies." },
]);
}
scaffold();
}, []);
return (
<TaskList>
{tasks.map(({ label, state }, index) => (
<Task key={index} label={label} state={state} />
))}
</TaskList>
);
};
Le composant appelle le clone(), addPackageJson() et addPackageJson() fonctions respectivement, et met à jour l’état après chaque appel de fonction. La tasks variable est un tableau d’objets avec state et label Propriétés. Ces propriétés sont utilisées pour rendre l’étiquette et une icône qui indique si une tâche est en cours ou terminée.
Votre CLI en action
Vous avez maintenant tout le code nécessaire pour le projet de ce tutoriel. Essayons-le et voyons que cela fonctionne. Ouvrez votre terminal et lancez la commande create-micro-service --name=demo. Cela échafaudera un projet de microservice que vous trouverez dans le démo annuaire.
Et ensuite ?
Maintenant que vous avez créé une CLI pour échafauder des projets de microservices, n’hésitez pas à donner libre cours à vos idées et à créer des CLI pour automatiser votre flux de travail. Vous pouvez commencer par étendre le projet que vous avez construit en suivant ce didacticiel. Vous pouvez l’étendre pour inclure un indicateur pour choisir si les dépendances doivent être installées à l’aide de npm ou de fil. Le module pkg-install a une option pour définir le gestionnaire de paquets préféré.
Il existe d’autres bibliothèques de ligne de commande pour vous aider. Vous pouvez en trouver quelques-uns dans la liste génial-nodejs Référentiel GitHub. Je vous recommanderai également de lire les directives sur clig.dev. C’est un guide open-source pour vous aider à écrire de meilleurs programmes en ligne de commande.
Vous pouvez obtenir le code de ce tutoriel sur GitHub—github.com/pmbanugo/create-micro-service-tutorial.
N’hésitez pas à me contacter si vous avez des questions. Je suis heureux de vous aider ou de vous orienter dans la bonne direction.
Source link