Erst gestern teilte Ali Churcher eine nette M?glichkeit, einen Lebenslauf mit einem CSS -Gitterlayout zu machen. Erstellen wir das ein wenig, indem wir eine Vorlage erstellen, die wir immer dann drehen k?nnen, wenn wir die Befehlszeile verwenden m?chten. Das Coole daran ist, dass Sie es mit nur einem Befehl ausführen k?nnen.

Ich wei?, dass die Befehlszeile einschüchternd sein kann, und ja, wir werden ein bisschen in Node.js arbeiten. Wir werden die Dinge in kleine Schritte unterteilt, um es einfacher zu machen, mitzumachen.

Wie bei vielen Projekten gibt es ein kleines Setup. Erstellen Sie zun?chst einen leeren Ordner in Ihrem Arbeitsverzeichnis und initialisieren Sie ein Projekt mit NPM oder Garn.

 mkdir your-project && cd "$ _"

## npm
npm init

## Garn
Garn init

Welchen Namen Sie für "Ihr Projekt" verwenden, ist der Name Ihres Pakets in der NPM-Registrierung.

Der n?chste Schritt besteht darin, eine Eintragsdatei für die Anwendung zu erstellen, die in diesem Fall index.js ist. Wir ben?tigen auch einen Ort, an dem wir Daten speichern k?nnen. Erstellen Sie daher eine andere Datei namens Data.json. Sie k?nnen diese aus der Befehlszeile ?ffnen, sobald Sie sie erstellt haben:

 Touch Index.js && touch Data.json

Erstellen der Befehlszeilenschnittstelle

Der gro?e Vorteil, den wir durch das Erstellen dieser App erhalten, ist, dass sie uns eine halbvisuelle M?glichkeit bietet, einen Lebenslauf direkt in der Befehlszeile zu erstellen. Wir brauchen ein paar Dinge, um das in Gang zu bringen:

• Das Objekt zum Speichern der Daten
• Eine interaktive Befehlszeilenschnittstelle (die wir mit dem Inquirer.js erstellen)

Beginnen wir mit diesem ersten. CRACK DATA.JSON CRACK UND Fügen Sie Folgendes hinzu:

 {
  "Ausbildung": [
    "Einige Infos",
    "Weniger wichtige Informationen",
    "Usw. usw."
  ],
  "Erfahrung": [
    "Einige Infos",
    "Weniger wichtige Informationen",
    "Usw. usw."
  ],
  "Kontakt": [
    "Eine M?glichkeit, Sie zu kontaktieren"
  ]
}

Dies ist nur ein Beispiel, das die Objekte und Schlüssel definiert, die für jeden Schritt in der Schnittstelle verwendet werden. Sie k?nnen es vollst?ndig an Ihren eigenen Bedürfnissen ?ndern.

Das ist das erste, was wir brauchten. Die zweite Sache ist die interaktive Schnittstelle. Inquirer.js wird 90% davon übernehmen. Lesen Sie gerne mehr über dieses Paket, denn Sie k?nnen fortgeschrittenere Schnittstellen erstellen, da Sie mit den Ins'Ts -Outs mehr vertraut sind.

 Garn Fügen Sie Inquirer -Kreide hinzu

Was ist das für eine Kreide? Es handelt sich um eine Bibliothek, die uns hilft, unsere Terminalausgabe anzupassen, indem wir etwas Farbe und Styling für eine bessere Erfahrung hinzufügen.

?ffnen wir nun index.js und fügen Sie den folgenden Code ein:

 #!/usr/bin/envknoten

"Strikt verwenden";

const Inquirer = fordert ("Inquirer");
const chalk = fordern ("kreide");
const data = require ("./ data.json");

// Antwortfarbe hinzufügen
const response = Chalk.bold.Blue;

const resumeOptions = {
  Typ: "Liste",
  Name: "Lebensl?ufe",
  Nachricht: "Was m?chten Sie wissen",
  Auswahlm?glichkeiten: [... Object.Keys (Daten), "Beenden"]
};

Funktion showResume () {
  console.log ("Hallo, das ist mein Lebenslauf");
  Handleresume ();
}

Funktion Handleresume () {
  Inquirer.prompt (Lebensl?ufe) .then (Antwort => {
    if (Antwort.

    const options = data [`$ {Antwort.ResumeOptions}`]
    if (Optionen) {
      console.log (Antwort (neuer Inquirer.separator ()));
      Optionen.foreach (info => {
        console.log (Antwort ("| =>" Info));
      });
      console.log (Antwort (neuer Inquirer.separator ()));
    }

    Inquirer
      .prompt({
        Typ: "Liste",
        Name: "Exitback",
        Nachricht: "Geh zurück oder beenden Sie?",
        Auswahl: ["zurück", "Beenden"]
      }). Dann (Auswahl => {
        if (choice.exitback == "zurück") {
          Handleresume ();
        } anders {
          zurückkehren;
        }
      });
  }). catch (err => console.log ('ooops,', err))
}

showResume ();

Zoikes! Das ist ein gro?er Code. Lassen Sie es uns ein wenig abrei?en, um zu erkl?ren, was los ist.

Oben in der Datei importieren wir alle notwendigen Dinge, die für die Ausführung der App erforderlich sind, und setzen Sie die Farbstile mit der Kreidebibliothek fest. Wenn Sie mehr über Farben und Anpassungen interessiert sind, lesen Sie die Kreidedokumentation, da Sie mit Dingen ziemlich kreativ werden k?nnen.

 const Inquirer = fordert ("Inquirer");
const chalk = fordern ("kreide");
const data = require ("./ data.json");

// Antwortfarbe hinzufügen
const response = Chalk.bold.Blue;

Als n?chstes erstellt Code unsere Liste der Lebenslaufoptionen. Dies sind das, was nach dem Eingeben unseres Befehls in Terminal angezeigt wird. Wir nennen es Lebenslauf, damit wir genau wissen, was es tut.

 const resumeOptions = {
  Typ: "Liste",
  Name: "Lebensl?ufe",
  Nachricht: "Was m?chten Sie wissen",
  Auswahlm?glichkeiten: [... Object.Keys (Daten), "Beenden"]
};

Wir interessieren uns haupts?chlich für das Feld Auswahl, da es die Schlüssel aus unserem Datenobjekt ausmacht und uns die M?glichkeit bietet, die App zu ?beenden“, wenn wir müssen.

Danach erstellen wir die Funktion showResume (), die unsere Hauptfunktion sein wird, die gleich nach dem Start ausgeführt wird. Es zeigt eine Art Willkommensnachricht an und führt unsere Funktion "Handleresume () aus.

 Funktion showResume () {
  console.log ("Hallo, das ist mein Lebenslauf");
  Handleresume ();
}

OK, jetzt für die gro?e Funktion: Die HandleSume () -Funktion. Der erste Teil ist eine bedingte Prüfung, um sicherzustellen, dass wir die App nicht verlassen haben, und die registrierten Optionen aus unserem Datenobjekt anzuzeigen, wenn alles gut ist. Mit anderen Worten, wenn die ausgew?hlte Option beendet ist, kündigen wir das Programm. Andernfalls holen wir die Liste der Optionen, die uns unter dem gew?hlten Schlüssel zur Verfügung stehen.

Sobald die App best?tigt hat, dass wir nicht beendet sind, erhalten wir eine Antwort. Diejenigen, die wir definierten, waren Bildung, Erfahrung und Kontakt.

Das bringt uns zum Sachen von Inquirer.js. Es k?nnte am einfachsten sein, wenn wir diese Stücke auflisten:

Haben Sie festgestellt, dass der neue Inquirer.separator () in der Optionsausgabe funktioniert? Dies ist eine Funktion von Inquirer.js, die einen visuellen Separator zwischen Inhalten bietet, um die Dinge ein wenig aufzubrechen und die Schnittstelle ein wenig zu lesen.

Okay, wir zeigen die Liste der Optionen! Jetzt müssen wir AA Weg zum vorherigen Bildschirm zurückkehren lassen. Zu diesem Zweck erstellen wir einen weiteren Inquirer. Es wird uns das Versprechen mit Antworten zurückgeben, die wir tun müssen. Wenn die ausgew?hlte Option zurück ist, führen wir Handleresume () aus, was bedeutet, dass wir unseren Hauptbildschirm wieder mit den Optionen ?ffnen. Wenn wir Exit w?hlen, geben wir die Funktion zurück.

Zuletzt werden wir die Catch -Anweisung hinzufügen, um m?gliche Fehler zu fangen. Gute Praxis. :)

Ver?ffentlichung zu NPM

Glückwunsch! Versuchen Sie, Node Index.js auszuführen, und Sie sollten in der Lage sein, die App zu testen.

Das ist gro?artig und alles, aber es w?re sch?ner, wenn es jedes Mal direkt in der Arbeit sein muss. Dies ist viel einfacher als die Funktionen, die wir uns gerade angesehen haben.

1. Registrieren Sie ein Konto bei NPMJS.com, wenn Sie keine haben.
2. Fügen Sie Ihrem CLI einen Benutzer hinzu, indem Sie den NPM -Adduser ausführen.
3. Geben Sie den Benutzernamen und das Passwort an, mit dem Sie das NPM -Konto registriert haben.
4. Gehen Sie zu Package.json und fügen Sie folgende Zeilen hinzu:

    "Bin": {
     "Your-Package-name": "./index.js"
   }

5. Fügen Sie eine readme.md -Datei hinzu, die auf der NPM -Seite der App angezeigt wird.
6. Ver?ffentlichen Sie das Paket.

 NPM Publish -Access = ?ffentlich

Immer wenn Sie das Paket aktualisieren, k?nnen Sie diese auf NPM drücken. Lesen Sie hier mehr über NPM Versioning.

 NPM -Version Patch // 1.0.1
NPM -Version Minor // 1.1.0
NPM -Version Major // 2.0.0

Und um die Updates auf NPM zu bringen:

 NPM Publish

Nehmen Sie Magie wieder!

Das war's! Jetzt k?nnen Sie die Magie erleben, NPX Your-Package-Namen in die Befehlszeile einzugeben und Ihren Lebenslauf genau dort zu erstellen. NPX ist übrigens der Weg, um Befehle auszuführen, ohne sie lokal auf Ihrem Computer zu installieren. Es ist automatisch für Sie verfügbar, wenn Sie NPM installiert haben.

Dies ist nur eine einfache Terminal -App, aber wenn Sie die Logik hinter den Kulissen verstehen, k?nnen Sie erstaunliche Dinge erstellen, und dies ist Ihr erster Schritt auf dem Weg dazu.

Quellcode

Happy Coding!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Ihren Lebenslauf auf NPM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!