Startseite>Webdesign-Tutorial>Javascript-Tutorial

Knoten praktische Entwicklung eines mycli-Befehlszeilentools

Autor：Eve Cole Aktualisierungszeit：2022-06-09 17:33:27
Dieser Artikel gibt Ihnen eine Schritt-für-Schritt-Anleitung zur praktischen Verwendung von Node und erläutert, wie Sie ein mycli-Befehlszeilentool/Gerüst auf Basis von Node erstellen. Ich hoffe, es wird Ihnen hilfreich sein!

Zur Initialisierung

müssen Sie zunächst sicherstellen, dass auf dem Computer eine node.js-Umgebung vorhanden ist

, und den folgenden Code in der Befehlszeile ausführen, um eine package.json Datei zu initialisieren

. 
npm init -y

Zu diesem Zeitpunkt wird definitiv ein Fehler gemeldet Ausführen mycli auf der Befehlszeile.

1.png

Konfigurieren Sie den benutzerdefinierten Befehl

package.json um das bin Feld hinzuzufügen, und verknüpfen Sie mycli -Befehl.

  • Jeder Befehl entspricht einer ausführbaren Datei
„bin“: {
    „mycli“: „./test.js“
  },
  • Erstellen Sie eine neue /test.js
console.log („mycli-Befehl erfolgreich ausgeführt“);
  • der install ist erforderlich, aber das Projekt wurde nicht in npm veröffentlicht. Verwenden Sie daher vorerst den Befehl npm link Ordnen Sie mycli der globalen Welt zu.

Wenn Sie mycli zu diesem Zeitpunkt über die Befehlszeile ausführen, wird der Fehler nicht mehr gemeldet.

2.png

Skriptkonfiguration

test.js-Datei:

console.log("mycli-Befehlsausführung erfolgreich");

Führen Sie dann mycli aus und ein Fehler-Popup-Fenster wird angezeigt.

3.png

Dies liegt daran, dass die Ausführung des mycli -Befehls dem Ausführen der Datei durch den Computer entspricht und das Computersystem die js-Datei nicht direkt ausführen kann . Dies erfordert, dass wir der ersten Zeile des Skriptcodes eine Konfiguration hinzufügen, um node.js auf dem Computer, um diese js-Skriptdatei auszuführen.

#!/usr/bin/env node

Da die Ausführungsumgebung geändert wurde, müssen Sie die zuvor verknüpften Dateien löschen. Der Dateispeicherort lautet möglicherweise C:Program Filesnodejsnode_modules . Suchen Sie nach mycli , löschen Sie es und führen Sie es dann aus npm link noch einmal.

Führen Sie nun mycli erneut auf der Konsole aus und Sie können sehen, dass die Konsole korrekt druckt.

Das zugehörige Toolkit verwendet

  • die Chalk -Befehlszeile, um farbenfrohe Schriftarten auszugeben
  • Ora -Ladeeffekt, ähnlich der interaktiven Funktion Progress Library
  • commander Design Command
  • inquirer (z. B. Fragen stellen ...)

Chalk-

  • Installation
npm install [email protected] -S
  • Test verwenden .js
const chalk = require("chalk");

// Kreide
// const hello = chalk.red("hello");
// const hello = chalk.blue.bgRed("hello");
// const hello = chalk.blue.bgYellow("hello");
const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello");
console.log(Hallo);

4.png

Ora

  • -Installation
npm install [email protected] -S
  • use test.js
const ora = require("ora");

// ora
const spinner = ora({
  Text: „Installieren...“
});
spinner.start();
setTimeout(() => {
  // spinner.stop();
  spinner.succeed("Installation erfolgreich");
  // console.log("Installation erfolgreich");
}, 2000)
  • Häufig verwendete API „
    • start “ startet den Ladevorgang,
    • stop stoppt den Ladevorgang“ und
    • succeed beendet den Ladevorgang“ im Erfolgsstil

5.gif

Befehle, die häufig in der

Commander

-Entwicklung verwendet werden, wie z. B. vue -V git --version vue create und andere Befehle, müssen zur Implementierung solcher Befehle die Commander -Bibliothek verwenden.

-V --help usw., nachdem der Befehl verwendet wurde, können als Parameter des Befehls verstanden werden. Dann müssen wir diese Parameter erhalten und verschiedene Ereignisse behandeln, indem wir die Unterschiede in den Parametern beurteilen.

In der Knotenumgebung kann dieser Parameter über process.argv abgerufen werden. Die Commander -Bibliothek hilft uns, einige Methoden zu kapseln, ohne dass wir die Anweisungen der Benutzereingaben beurteilen müssen.

  • Installieren Sie
npm install [email protected] -S
  • mit
const commander = require("commander");
// ...
commander.parse(process.argv); // Nach

Abschluss der Installation stellt uns Commander automatisch einige Befehle zur Verfügung, z. B. --help . Testen wir es unten:

mycli --help
  • bietet eine Möglichkeit, die Versionsnummer
des Commanders
festzulegen 
. version("1.0.0");

Führen Sie mycli -V aus und Sie können sehen, dass die Konsole die Versionsnummer 1.0.0 ausgibt.

Die benutzerdefinierte Befehlsmethode

commander.option(指令名, 描述, 回调函数)

  • konfiguriert einige der oben beschriebenen Funktionen für den Befehl --init :
commander.option("--init", "this is init", () => {
  // Kreide
  // const hello = chalk.red("hello");
  // const hello = chalk.blue.bgRed("hello");
  // const hello = chalk.blue.bgYellow("hello");
  const hello = chalk.rgb(200, 200, 200).bgRgb(0, 200, 3)("hello");
  console.log(Hallo);

  // ora
  const spinner = ora({
    Text: „Installieren...“
  });
  spinner.start();
  setTimeout(() => {
    // spinner.stop();
    spinner.succeed("Installation erfolgreich");
    // console.log("Installation erfolgreich");
  }, 1000)
})

Führen Sie nun mycli --init test aus:

6.gif

  • Die Möglichkeit, Parameter im Befehl zu übergeben,
ist commander.option("--number <num>", "log a number", (num) => {
  console.log(num);
})

<参数名> gibt die Parameter an, die übergeben werden müssen, und [参数名] gibt die Parameter an, die nicht übergeben werden müssen. Geben Sie mycli --number 100 in die Konsole ein und drücken Sie die Eingabetaste. Sie können sehen 100 ausgegeben wird.

Benutzerdefinierte Befehlsmethode

commander.command("create <projectName>").action((projectName)=>{
  console.log(Projektname);
})

Führen Sie mycli create xx aus und drücken Sie die Eingabetaste. Sie können sehen xx auf der Konsole ausgegeben wird.

Sehen Sie sich die Hilfe an

, indem Sie mycli --help ausführen. Sie können sehen, dass die Anweisungen und Befehle, die wir gerade konfiguriert haben, in der Hilfeliste angezeigt werden.

7.png

„Inquirer“

  • -Installation
npm install „inquirer -S“
  • prompt zum Fragen von
„inquirer.prompt([
    {
      Typ: „Eingabe“,
      Name: „Benutzername“,
      Nachricht: „Bitte geben Sie den Benutzernamen ein:“
    }
  ]).then((answer)=>{

  })

type gibt den Typ der Frage an und der Wert kann sein: input , number , password , editor usw.

answer ist {username: 输入的值}

  • Der Typ ist input des Eingabetyps.
const discoverer = require("inquirer");

commander.command("Benutzer hinzufügen").action(() => {
  discoverer.prompt([
    {
      Typ: „Eingabe“,
      Name: „Benutzername“,
      Nachricht: „Bitte geben Sie den Benutzernamen ein:“
    }
  ]).then((Antwort) => {
    console.log(answer);
  })
})
  • Typ ist confirm
commander.command("testcon").action(() => {
  discoverer.prompt([
    {
      Typ: „Bestätigen“,
      Name: „Alter“,
      Nachricht: „Sind Sie über 18 Jahre alt?“
    }
  ]).then((Antwort) => {
    console.log(answer);
  })
})

Geben Sie y oder n ein, um ein Urteil zu fällen.

8.png

  • Typ ist eine list
commander.command("testlist").action(() => {
  discoverer.prompt([
    {
      Typ: „Liste“,
      Name: „lib“,
      Nachricht: „Wählen Sie das zu verwendende Framework aus:“,
      Auswahlmöglichkeiten: [
        „vue2“,
        „vue3“,
        "reagieren",
        „schlank“,
      ]
    }
  ]).then((Antwort) => {
    console.log(answer);
  })
})

Führen Sie den Befehl mycli testlist aus:

9.png

Download-Vorlage

  • download-git-repo ist ein Tool zum Abrufen von Code.

  • Installieren Sie

npm install [email protected] -S
  • mit
const downgit = require("download-git-repo");

downgit("github:kongcodes/vue3-vant", downUrl, { clone: ​​​​false }, function (err) {
    console.log(fehler)
})

Der erste Parameter in der downgit -Methode ist das Herunterladen der vue3-vant -Projektvorlage des Kongcodes-Benutzers von Github. Der zweite Parameter downUrl ist das Verzeichnis, in das die Vorlage heruntergeladen werden soll. Der dritte clone ist, ob git clone zum Herunterladen verwendet werden soll. Der vierte Parameter enthält einige Dinge, die ausgeführt werden sollen, wenn der Download abgeschlossen ist.

  • command
commander.command("create <projectName>").action((projectName) => {
in Verbindung mit der Befehlsmethode
  const spinner = ora({
    text: „https://github.com/kongcodes/vue3-vant wird heruntergeladen …“
  });
  spinner.start();
  fs.mkdirSync(`./${projectName}`);
  const downUrl = `${process.cwd()}\${projectName}`;
  downgit("github:kongcodes/vue3-vant", downUrl, { clone: ​​​​false }, function (err) {
    if (err) throw err;
    spinner.stop();
    console.log(chalk.green("downgit success"));
  })
})

Führen Sie mycli create pro aus und drücken Sie die Eingabetaste. Das pro -Verzeichnis wird im aktuellen Verzeichnis erstellt und vue3-vant -Vorlage wird in dieses Verzeichnis heruntergeladen.

Codeadresse

https://github.com/kongcodes/mycli
Ähnliche Artikel