Dans notre exercice précédent, nous avons construit une extension de navigateur à l'aide de TypeScript. Cela impliquait une série d'étapes, notamment la création d'un projet VITE et la personnaliser pour répondre aux exigences spécifiques des extensions du navigateur. Bien que le processus n'ait pas été particulièrement long ou complexe, nous pouvons le simplifier davantage en l'automatisant avec un CLI de nœud (interface de ligne de commande). Si vous êtes nouveau sur CLIS, laissez-moi vous guider à travers celui que j'ai créé!

Créer un projet de nœud

Naturellement, la première étape consiste à initialiser et à configurer notre projet de nœud. Utilisez les commandes suivantes pour créer un dossier pour notre code et générer un fichier de base.json:

mkdir create-browser-extension-vite && cd create-browser-extension-vite
npm init --yes

Ensuite, j'ai décidé de modifier le package généré.json pour inclure "type": "module". Avec cela, nous informerons le nœud pour interpréter les fichiers .js dans le projet en tant que modules ES plutôt que les modules CommonJS. Voici le package mis à jour.json après avoir fait quelques ajustements.

{
  "name": "create-browser-extension-vite",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
      "cli",
    "create-project"
  ],
  "author": "",
  "license": "ISC",
  "description": "A CLI tool to create browser extensions with Vite",
  "type": "module"
}

Premier pas

Commençons par créer un fichier appelé create-project dans un nouveau dossier nommé bin :

#!/usr/bin/env node

console.log("hello world");

Ce fichier agira comme le point d'entrée de votre commande et pour vous assurer qu'il peut être exécuté directement sur votre ordinateur une fois que le package est installé globalement, ajoutez le champ suivant au pack ]]

"bin": "bin / create-project"

"bin": "bin/create-project"

Il est maintenant temps de tester ce que nous avons construit jusqu'à présent. Tout d'abord, nous installons le package localement en exécutant:

lien NPM Create-Browser-Extension-vite // Exécutez la CLI

"bin": "bin/create-project"

Une fois lié, vous aurez une nouvelle commande CLI appelée Create-Browser-Extension-Vite, qui imprime actuellement «Hello World» à la console.

Et c'est tout ce qu'il faut pour créer une CLI de base! De là, vous pouvez tirer parti de la pleine puissance de l'écosystème du nœud pour construire tout ce que vous pouvez imaginer.

Gestion de la saisie des utilisateurs

faisons un autre pas vers notre objectif! Le but de cette CLI est de générer une extension de navigateur TypeScript entièrement fonctionnelle avec une seule commande. Pour ce faire, la CLI acceptera plusieurs paramètres facultatifs.

• nom : si fourni, un dossier avec le nom spécifié sera créé. Sinon, le dossier actuel contiendra le projet.
• git : si spécifié, un référentiel git sera initialisé pour le projet.
• installer : si spécifié, les dépendances du projet seront installées automatiquement.
• oui : saute toutes les invites et génère le projet avec les paramètres par défaut.

La première étape consiste à créer un nouveau fichier, src / cli.js, qui gérera toute la logique pour collecter les préférences des utilisateurs. Ce nouveau module sera invoqué à partir du fichier actuel

create-project :

#! / USR / bin / env import {cli} depuis "../src/cli.js"; CLI (process.argv);

"bin": "bin/create-project"

Pour rationaliser le processus de collecte des préférences utilisateur, nous utiliserons deux bibliothèques utiles:

npm install @ Inquirer / invits arg

"bin": "bin/create-project"

Arg: un analyseur d'argument puissant pour gérer les entrées de ligne de commande.
@ Inquirer / Invits: une bibliothèque pour créer des interfaces de ligne de commande élégantes et interactives.

Importer Arg à partir de "arg"; import {confirm} de "@ inquirer / invits"; Fonction asynchronisée invitetformmissingOptions (Options) { if (options.skipprompts) { options de retour; } retour { ... Options, git: options.git || (attendre confirm ({message: "Initialiser un référentiel git?"})), }; } fonction parseargumentsInTooptions (rawargs) { const args = arg ( { "--git": booléen, "- help": booléen, "- Oui": booléen, "- install": booléen, "-g": "--git", "-y": "- oui", "-i": "--install", }, { argv: rawargs.slice (2), } )); retour { skipprompts: args ["- oui"] || FAUX, git: args ["- git"] || FAUX, runInstall: args ["- install"] || FAUX, projectName: args ._ [0], }; } Exportation de fonction asynchrone cli (args) { LET OPTIONS = PARSEARGUMENTSIONTOOPSES (ARGS); Options = attendre insidetformIsingOptions (options); console.log (options); }

"bin": "bin/create-project"

Je vous laisserai pour ajouter une option supplémentaire pour afficher un message d'aide de base. Cela impliquera l'introduction d'une nouvelle préférence utilisateur contrôlée par le paramètre - help ou -h. Si ce paramètre est fourni, la CLI doit afficher un manuel simple expliquant l'utilisation de la commande. Vous pouvez vous référer à ma solution dans le référentiel lié ci-dessous.

Créer le projet

Dans cette étape, le projet sera créé en fonction des préférences sélectionnées à l'étape précédente. Nous allons commencer par créer un dossier nommé modèle et en copiant les fichiers qui composeront le projet généré.

La structure du dossier devrait ressembler à ceci, et vous pouvez trouver le contenu de ces fichiers dans mon référentiel GitHub. Si vous êtes curieux de savoir comment ils ont été créés, consultez mon article précédent, où je discute de la construction d'une extension de navigateur avec TypeScript.

Notre code utilisera les fichiers du dossier de modèle pour générer la nouvelle extension du navigateur de l'utilisateur et les packages suivants seront particulièrement utiles pour y parvenir:

npm installer ncp chalk execa pkg-stall list

"bin": "bin/create-project"

NCP: facilite la copie récursive des fichiers.
Chalk: ajoute le style de chaîne de terminal.
execa: simplifie l'exécution de commandes externes comme git.
pkg-install: déclenche automatiquement l'installation de YARN ou NPM Installer en fonction de la préférence de l'utilisateur.
LIST: permet de définir une liste de tâches tout en fournissant une vue d'ensemble de progrès propre pour l'utilisateur.

Nous commencerons par créer un nouveau fichier, src / main.js, pour contenir le code qui génère le projet en copiant les fichiers à partir du dossier de modèle.

import {createProject} de "./main.js"; ... Exportation de fonction asynchrone cli (args) { LET OPTIONS = PARSEARGUMENTSIONTOOPSES (ARGS); Options = attendre insidetformIsingOptions (options); attendre CreateProject (options); }

import { createProject } from "./main.js";

...

export async function cli(args) {
  let options = parseArgumentsIntoOptions(args);
  options = await promptForMissingOptions(options);
  await createProject(options);
}

Importer la craie de "Chalk"; Importer NCP à partir de "NCP"; Importer un chemin à partir de "chemin"; import {promisify} de "util"; import {execa} à partir de "EXECA"; Importer List de "List"; import {projectInstall} à partir de "pkg-stall"; const Copy = promisify (ncp); fonction async CopyTemplateFiles (options) { return copy (options.TemplateDirectory, options.targetDirectory, { Clobber: Faux, }); } Fonction asynchrone InitGit (Options) { const result = attend execa ("git", ["init"], { cwd: options.targetDirectory, }); if (result.failled) { return promed.reject (nouvelle erreur ("Échec de l'initialisation de Git")); } retour; } Exporter la fonction asynchrone CreateProject (Options) { Options = { ... Options, TargetDirectory: options.projectName || process.cwd (), }; const CurrentFileUrl = import.meta.url; const templatedir = path.resolve ( Nouvelle URL (CurrentFileUrl) .Pathname, "../../modèle" )); options.TemplateDirectory = templatedir; Const tasks = new Listr ([[ { Titre: "Copier les fichiers du projet", tâche: () => copyTemplateFiles (options), }, { Titre: "Initialiser Git", tâche: () => initgit (options), activé: () => options.git, }, { Titre: "Installer les dépendances", tâche: () => projectInstall ({ cwd: options.targetDirectory, }), sauter: () => ! Options.Runinstall ? "Passer - installer pour installer automatiquement les dépendances" : indéfini, }, ])); attendre les tâches.run (); Console.log ("% S Project Ready", Chalk.green.Bold ("Done")); Retour Vrai; }

"bin": "bin/create-project"

Le code ci-dessus utilise List pour exécuter la série d'actions nécessaires pour générer le nouveau projet, de la copie de fichiers avec NCP pour configurer le référentiel GIT. Notez également comment nous avons utilisé Promisify pour convertir la méthode de copie basée sur un rappel de NCP en une fonction basée sur les promesses, ce qui rend le code plus lisible et maintenable.

Et c'est tout! Ce sont les étapes que j'ai suivies pour créer mon nouvel outil CLI, celle que j'utiliserai pour rationaliser la création de mes nouvelles extensions de navigateur. Vous pouvez aussi l'utiliser! Parce que je l'ai publié sur NPM pour que quiconque génére ses propres extensions.

https://github.com/ivaneffable/create-browser-extension-vite

Références

Comment construire un CLI avec node.js