So erstellen Sie Ihren Lebenslauf auf NPM

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!