In unserer vorherigen Übung haben wir eine Browser -Erweiterung mit TypeScript erstellt. Dies umfasste eine Reihe von Schritten, darunter das Erstellen eines vite -Projekts und das Anpassen der spezifischen Anforderungen der Browser -Erweiterungen. Obwohl der Prozess nicht besonders langwierig oder komplex war, können wir ihn weiter vereinfachen, indem wir ihn mit einem Knoten -CLI (Befehlszeilenschnittstelle) automatisieren. Wenn Sie neu in CLIS sind, lassen Sie mich Sie durch die, die ich erstellt habe!

Erstellen Sie ein Knotenprojekt

Natürlich besteht der erste Schritt darin, unser Knotenprojekt zu initialisieren und einzurichten. Verwenden Sie die folgenden Befehle, um einen Ordner für unseren Code zu erstellen und eine grundlegende Package zu generieren. JSON -Datei:

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

Als nächstes habe ich beschlossen, das generierte paket.json so zu ändern, dass "Typ": "Modul" einbezogen werden. Damit informieren wir den Knoten, um .js -Dateien im Projekt eher als ES -Module als als CommonJS -Module zu interpretieren. Hier ist das aktualisierte paket.json nach einigen Anpassungen.

{
  "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"
}

Erste Schritte

Beginnen wir zunächst eine Datei mit dem Namen create-project in einem neuen Ordner namens bin :

#!/usr/bin/env node

console.log("hello world");

Diese Datei fungiert als Einstiegspunkt für Ihren Befehl und um sicherzustellen ] "bin": "bin/create-project"

Jetzt ist es Zeit zu testen, was wir bisher gebaut haben. Zunächst installieren wir das Paket lokal durch Ausführen:

"bin": "bin/create-project"

npm link Create-browser-otsion-vite // die CLI ausführen

Sobald Sie verknüpft sind, erhalten Sie einen neuen CLI-Befehl namens Create-browser-Extension-Vite, der derzeit nur „Hallo Welt“ in die Konsole druckt.

npm link
create-browser-extension-vite // execute the CLI 

Und das ist alles, was es braucht, um eine grundlegende CLI zu erstellen! Von hier aus können Sie die volle Kraft des Knotenökosystems nutzen, um alles zu erstellen, was Sie sich vorstellen können.

Verwaltung der Benutzereingabe

Lass uns einen weiteren Schritt in Richtung unseres Ziels machen! Ziel dieser CLI ist es, eine voll funktionsfähige Typscript -Browser -Erweiterung mit einem einzigen Befehl zu generieren. Um dies zu erreichen, akzeptiert die CLI mehrere optionale Parameter.

name

: Wenn angegeben, wird ein Ordner mit dem angegebenen Namen erstellt. Andernfalls enthält der aktuelle Ordner das Projekt.
• git
: Wenn angegeben, wird ein Git -Repository für das Projekt initialisiert.
• install
: Wenn angegeben, werden die Projektabhängigkeiten automatisch installiert.
• yes
: überspringt alle Aufgaben und generiert das Projekt mit Standardeinstellungen.
• Der erste Schritt besteht darin, eine neue Datei, SRC/Cli.js, zu erstellen, mit der die gesamte Logik für das Sammeln von Benutzereinstellungen verarbeitet wird. Dieses neue Modul wird aus der aktuellen
create-project

Datei:

aufgerufen:
#!/usr/bin/envknoten import {cli} aus "../src/cli.js"; CLI (process.argv);

#!/usr/bin/env node

import { cli } from "../src/cli.js";

cli(process.argv);

npm install @Inquirer/fordert arg

"bin": "bin/create-project"

ARG: Ein kraftvolles Argument-Parser für die Bearbeitung von Befehlszeileneingaben.

• @Inquirer/Eingabeaufforderungen: Eine Bibliothek zum Erstellen eleganter und interaktiver Befehlszeilenschnittstellen.
import arg aus "arg"; import {bestätigen} aus "@Inquirer/Eingabeaufforderungen"; Async -Funktion forderformissingoptions (Optionen) { if (options.skipprompts) { Rückgabeoptionen; } zurückkehren { ... Optionen, Git: Optionen.git || (Warten Sie bestätigen ({Nachricht: "Ein Git -Repository initialisieren?"}),), }; } Funktion ParseargumentsIntoopions (Rawargs) { const args = arg ( { "-Git": boolean, "-HELP": Boolean, "-ja": boolean, "-installieren": boolean, "-g": "-git", "-y": "-ja", "-i": "-Installation", }, { Argv: Rawargs.Slice (2), } ); zurückkehren { SkipPrompts: Args ["-Ja"] || FALSCH, Git: Args ["-Git"] || FALSCH, runinstall: args ["-install"] || FALSCH, ProjectName: args ._ [0], }; } Exportieren Sie die asynchronisierte Funktion cli (args) { options = parSeargumenteIntoopions (args); Optionen = Warten Sie forderFormissingoptions (Optionen); console.log (Optionen); }

import arg from "arg";
import { confirm } from "@inquirer/prompts";

async function promptForMissingOptions(options) {
  if (options.skipPrompts) {
    return options;
  }

  return {
    ...options,
    git:
      options.git ||
      (await confirm({ message: "Initialize a git repository?" })),
  };
}

function parseArgumentsIntoOptions(rawArgs) {
  const args = arg(
    {
      "--git": Boolean,
      "--help": Boolean,
      "--yes": Boolean,
      "--install": Boolean,
      "-g": "--git",
      "-y": "--yes",
      "-i": "--install",
    },
    {
      argv: rawArgs.slice(2),
    }
  );

  return {
    skipPrompts: args["--yes"] || false,
    git: args["--git"] || false,
    runInstall: args["--install"] || false,
    projectName: args._[0],
  };
}

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

Erstellen des Projekts

In diesem Schritt wird das Projekt basierend auf den in der vorherigen Phase ausgewählten Einstellungen erstellt. Wir werden zunächst einen Ordner namens Vorlage erstellen und in die Dateien kopieren, aus denen das generierte Projekt besteht.

Die Ordnerstruktur sollte so aussehen, und Sie finden den Inhalt dieser Dateien in meinem Github -Repository. Wenn Sie neugierig sind, wie sie erstellt wurden, lesen Sie meinen vorherigen Beitrag, in dem ich diskutiere, dass ich eine Browser -Erweiterung mit TypeScript erstellen kann.

Unser Code verwendet die Dateien im Vorlagenordner, um die neue Browsererweiterung des Benutzers zu generieren, und die folgenden Pakete sind besonders nützlich, um dies zu erreichen:

npm install NCP Chalk execa pkg-install listal

"bin": "bin/create-project"

NCP: Erleichtert rekursives Kopieren von Dateien.

• Kreide: Fügt Terminal String Styling hinzu.
• Execa: vereinfacht das Ausführen externer Befehle wie Git.
• PKG-Installation: Triggert automatisch entweder Garn install oder npm installieren basierend auf der Präferenz des Benutzers.
• LISTR: Ermöglicht das Definieren einer Liste von Aufgaben und bietet gleichzeitig einen sauberen Fortschrittsüberblick für den Benutzer.
Wir werden zunächst eine neue Datei erstellen, src/main.js, um den Code zu enthalten, der das Projekt durch Kopieren der Dateien aus dem Vorlagenordner generiert.

import {createReject} aus "./main.js"; ... Exportieren Sie die asynchronisierte Funktion cli (args) { options = parSeargumenteIntoopions (args); Optionen = Warten Sie forderFormissingoptions (Optionen); Warten Sie CreeProject (Optionen); }

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

...

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

import chalk from "chalk";
import ncp from "ncp";
import path from "path";
import { promisify } from "util";
import { execa } from "execa";
import Listr from "listr";
import { projectInstall } from "pkg-install";

const copy = promisify(ncp);

async function copyTemplateFiles(options) {
  return copy(options.templateDirectory, options.targetDirectory, {
    clobber: false,
  });
}

async function initGit(options) {
  const result = await execa("git", ["init"], {
    cwd: options.targetDirectory,
  });
  if (result.failed) {
    return Promise.reject(new Error("Failed to initialize git"));
  }
  return;
}

export async function createProject(options) {
  options = {
    ...options,
    targetDirectory: options.projectName || process.cwd(),
  };

  const currentFileUrl = import.meta.url;
  const templateDir = path.resolve(
    new URL(currentFileUrl).pathname,
    "../../template"
  );
  options.templateDirectory = templateDir;

  const tasks = new Listr([
    {
      title: "Copy project files",
      task: () => copyTemplateFiles(options),
    },
    {
      title: "Initialize git",
      task: () => initGit(options),
      enabled: () => options.git,
    },
    {
      title: "Install dependencies",
      task: () =>
        projectInstall({
          cwd: options.targetDirectory,
        }),
      skip: () =>
        !options.runInstall
          ? "Pass --install to automatically install dependencies"
          : undefined,
    },
  ]);

  await tasks.run();
  console.log("%s Project ready", chalk.green.bold("DONE"));
  return true;
}

.

Und das ist es! Dies sind die Schritte, die ich aus geführte CLI -Tools erstellt habe, die ich verwenden werde, um die Erstellung meiner neuen Browser -Erweiterungen zu optimieren. Sie können es auch verwenden! Weil ich es auf NPM veröffentlicht habe, damit jeder seine eigenen Erweiterungen generiert.

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

Referenzen

wie man eine cli mit node.js

erstellt