Geekly articles weekly

13 npm Tricks, um Zeit zu sparen

Jeden Tag wenden sich Millionen von Entwicklern beim Erstellen ihrer JavaScript-Anwendungen an npm (oder an Yarn). Das Ausführen von Befehlen wie npm init oder npx create-react-app ist eine vertraute Methode, um mit der Arbeit an fast jedem JavaScript-Projekt zu beginnen. Dies kann ein Server, ein Client oder sogar eine Desktop-Anwendung sein.

Das Dienstprogramm npm kann jedoch nicht nur Projekte initialisieren oder Pakete installieren. Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, möchte über 13-npm-Tricks sprechen, mit denen Sie alles herausholen können, was mit diesem System möglich ist. Hier werden Techniken verschiedener Größen betrachtet - von der Verwendung von Verknüpfungen bis zur Anpassung des Verhaltens von npm init .



Viele Programmierer verwenden täglich npm. Dies bedeutet, dass auf lange Sicht bereits eine geringe Zeitersparnis etwas zum Besseren verändern kann. Dieses Material richtet sich in erster Linie an Anfänger und mittelständische Entwickler. Selbst wenn Sie ein Profi sind, hofft der Autor des Materials, dass Sie hier einige interessante Dinge finden, die Sie zuvor noch nicht kennengelernt haben.

Wenn Sie mit npm nicht vertraut sind, beachten Sie, dass das für uns interessante Programm mit Node.js installiert ist. Wenn Sie unter Windows arbeiten, wird empfohlen, Git Bash zu installieren, um einige der hier beschriebenen Themen zu reproduzieren.

1. Kurze Optionen zum Aufzeichnen grundlegender Befehle


Beginnen wir mit den Grundlagen. Wenn Sie ein wenig Zeit damit verbringen, gekürzte Versionen der gängigsten npm-Befehle zu untersuchen, sparen Sie sich in Zukunft viel Zeit.

  • Installieren Sie Pakete. Normale Option: npm install . Abkürzung: npm i .
  • Ausführen von Tests. Normale Option: npm test . Verknüpfung: npm t .
  • Hilfe anrufen. Allgemeine Option: npm --help . Verknüpfung: npm -h .
  • Globales Einstellungsflag. Häufige Option: --global . Verknüpfung: -g .
  • Paketinstallationsflag als Entwicklungsabhängigkeit. Die übliche Option ist --save-dev . Verknüpfung: -D .
  • npm init Standardeinstellungen für npm init . Die übliche Option ist npm init --yes oder npm init --force . Verknüpfung: npm init -y oder npm init -f .

Jetzt müssen Sie nicht mehr das --save oder -S verwenden, um Pakete zu speichern. Pakete werden standardmäßig gespeichert. Und um ein Paket zu installieren, ohne es zu speichern, können Sie das Flag --no-save verwenden.

▍Kurze Aufnahmeoptionen für weniger gebräuchliche Befehle


Hier sind einige weitere nützliche Abkürzungen, die jedoch nicht so häufig verwendet werden wie die, die wir gerade besprochen haben.

  • Speichern eines Pakets als optionale Abhängigkeit. Die übliche Option: --save-optional . Verknüpfung: -O .
  • Speichern von Informationen zur genauen Version des Pakets. Die übliche Option ist --save-exact . Verknüpfung: -E .

Wenn Sie den Befehl npm install mit dem --save-bundle oder -B bundledDependencies Einträge in installierten Bundles in package.json im Abschnitt bundledDependencies . Diese Pakete werden bei Veröffentlichung zusammen mit dem Projekt verpackt. Mit dem Befehl npm pack können Sie eine Tarball-Datei erstellen, die Projektdateien und Pakete enthält, die in bundledDependencies aufgeführt sind.

▍ Abkürzung für das Stammverzeichnis


In der Regel wird das Punktsymbol ( . ) Zur Darstellung des Stammverzeichnisses einer Anwendung oder (je nach Kontext) zur Darstellung eines Einstiegspunkts in eine Anwendung verwendet. In npm wird dies als Wert der main in der Datei package.json :

 {  "main": "index.js" }

Diese Abkürzung kann zum Beispiel mit Befehlen wie npx create-react-app . Anstatt diesen Befehl in Form von npx create-react-app my-app (was zur Erstellung eines neuen my-app Ordners führt), können Sie diesen Befehl wie npx create-react-app . : npx create-react-app . (Achten Sie auf den Punkt, der nach dem Befehl kommt). Auf diese Weise können Sie ein React-Anwendungsvorlagenprojekt in dem Ordner erstellen, in dem Sie sich zum Zeitpunkt der Ausführung des Befehls befinden.

2. Festlegen von Standardwerten für npm init


Wenn Sie den Befehl npm init ständig npm init , um ein neues Projekt zu erstellen, werden Sie höchstwahrscheinlich feststellen, dass Sie bei der Beantwortung von Systemfragen immer wieder dieselben Daten eingeben. Zum Beispiel - es ist wahrscheinlich, dass Sie der Autor der meisten von Ihnen erstellten Projekte sind. Um Zeit bei der Eingabe derselben Daten zu sparen, können Sie Ihre eigenen Standardwerte für die entsprechenden Felder festlegen:

 npm config set init.author.name "Joe Bloggs" npm config set init.author.email "joebloggs@gmail.com" npm config set init.author.url  "joebloggs.com" npm config set init.license   "MIT"

npm config edit Befehl npm config edit , um die Richtigkeit des Hinzufügens solcher Informationen zum System zu überprüfen. Dadurch wird die Konfigurationsdatei im Systemeditor geöffnet. Wenn Sie die globalen npm-Parameter bearbeiten möchten, verwenden Sie den Befehl npm config edit -g .

Um zu den Standardeinstellungen zurückzukehren, können Sie das folgende Skript verwenden. In der ersten Zeile werden Konfigurationsdaten aus der Datei gelöscht, in der zweiten Zeile werden sie mit Standardwerten gefüllt.

 echo "" > $(npm config get userconfig) npm config edit

Das obige Skript setzt die Standardwerte für den Benutzer zurück. Das folgende Skript setzt die globalen Standardeinstellungen zurück:

 echo "" > $(npm config get globalconfig) npm config --global edit

3. Plattformübergreifende Skripte


Jeder Code, der in der Befehlszeile ausgeführt wird, kann auf Kompatibilitätsprobleme stoßen. Dies gilt insbesondere für Inkompatibilitäten zwischen Windows- und Unix-basierten Systemen (einschließlich Mac und Linux). Dies ist kein Problem, wenn Sie und nur Sie an einem bestimmten Projekt arbeiten. In vielen Fällen ist jedoch die plattformübergreifende Skriptkompatibilität wichtig. Zum Beispiel ist das Arbeiten unabhängig vom Betriebssystem ein großes Plus für jedes Open Source-, Schulungs- oder Demonstrationsprojekt.

Glücklicherweise ist die Lösung des Skriptkompatibilitätsproblems nicht besonders schwierig. Wir haben mehrere Möglichkeiten zur Verfügung. Hier möchte ich jedoch über einen von ihnen sprechen, mit dessen Hilfe ich die besten Ergebnisse erzielt habe. Dies ist ein Cross-Env- Paket. Es muss als Entwicklungsabhängigkeit mit dem Befehl npm i -D cross-env installiert werden. Dann müssen Sie cross-env vor jede Umgebungsvariable stellen. Zum Beispiel könnte es so aussehen:

 {  "scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" }

Ich fand, dass das cross-env Paket das bequemste Tool ist, um plattformübergreifende Scripting-Kompatibilität zu erreichen. Es ist jedoch hilfreich, wenn Sie sich die folgenden zwei beliebten Tools ansehen, die zur Lösung dieses Problems beitragen können:

  • Rimraf- Paket. Es kann zum Ausführen plattformübergreifender Skripts global installiert werden.
  • ShellJS- Paket. Dies ist eine portable Node.js-Implementierung der Unix-Befehlsshell.

4. Parallele Skriptausführung


Um die sequentielle Ausführung von Befehlen in der Linux-Shell zu organisieren, wird das Konstrukt && verwendet. Was ist mit parallelen Skripten? Um dies zu erreichen, können Sie das entsprechende npm-Paket auswählen. Die beliebtesten Pakete dieser Art sind gleichzeitig und npm-run-all . Hier demonstrieren wir die Verwendung des gleichzeitigen Pakets.

Zunächst muss das ausgewählte Paket als Entwicklungsabhängigkeit installiert werden: npm i -D concurrently . Dann package.json Sie in package.json eine Konstruktion der folgenden Form verwenden:

 {  "start": "concurrently \"command1 arg\" \"command2 arg\"" }

5. Ausführen von Skripten in verschiedenen Verzeichnissen


Manchmal stoßen Sie auf Anwendungen, die mehrere package.json Dateien in verschiedenen Verzeichnissen haben. Es wäre beispielsweise praktisch, darin deklarierte Skripte auszuführen, die sich im Stammverzeichnis des Projekts befinden. Dies ist viel besser, als in verschiedene Ordner wechseln zu müssen, wenn Sie ein Skript ausführen müssen. Zu diesem Zweck können Sie die folgenden zwei Ansätze verwenden.

Zu Beginn können Sie mit dem cd automatisch zum gewünschten Verzeichnis navigieren. Es könnte ungefähr so ​​aussehen:

 cd folder && npm start && cd ..

Dieses Problem kann jedoch auf interessantere Weise gelöst werden. Es besteht aus der Verwendung des --prefix , mit dem Sie den Pfad angeben können:

 npm start --prefix path/to/your/folder

Das Folgende ist ein Beispiel für die Anwendung dieser Lösung aus einer realen Anwendung. Hier müssen wir npm start für die Client- und Serverteile des Projekts ausführen. Ihr Code befindet sich jeweils in den client und Serverordnern.

 "start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",

6. Verzögern Sie den Start des Skripts, bis eine Ressource verfügbar ist


Bei der Entwicklung von Full-Stack-Anwendungen besteht häufig die Notwendigkeit, sowohl den Client- als auch den Serverteil der Anwendung auszuführen. Mit dem Wartepaket können Sie die Ausführung bestimmter Prozesse synchronisieren. In unserem Fall muss vor dem Starten des Client-Teils der Anwendung ein bestimmter Port verfügbar sein.

Beispielsweise gibt es ein Entwicklungsskript, das in einer Electron-Anwendung verwendet wird, deren Schnittstelle mit React geschrieben wurde. Das Skript führt concurrently die Präsentationsschicht der Anwendung und das Elektronenfenster parallel aus. Mit wait-on Sie das Electron-Fenster jedoch nur öffnen, wenn die React-Präsentationsschicht einsatzbereit ist und unter http://localhost:3000 verfügbar ist. So sieht die Verwendung von wait-on aus:

 "dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",

Darüber hinaus besteht das Standardverhalten von React-Projekten darin, automatisch ein Browserfenster zu öffnen. Bei Verwendung von React with Electron ist dies nicht erforderlich. Dies kann mit der Umgebungsvariablen BROWSER=none werden. BROWSER=none dieser BROWSER=none steht aus Gründen der plattformübergreifenden Kompatibilität der Lösung der Befehl cross-env .

7. Auflisten und Arbeiten mit verfügbaren Skripten


Um die in package.json verfügbaren Skripte package.json , gehen package.json einfach in das Stammverzeichnis des Projekts und führen Sie den Befehl npm run im Terminal aus.

Es gibt jedoch eine noch bequemere Möglichkeit, Skripte aufzulisten. Bei Verwendung kann das gewünschte Skript sofort aus der Liste ausgewählt und ausgeführt werden. Um diese Art der Arbeit mit Skripten verwenden zu können, müssen wir das Modul ntl (Npm Task List) global installieren:

 npm i -g ntl

Dann müssen Sie im ntl Befehl ntl . Es wird eine Liste der verfügbaren Skripte angezeigt und Sie haben die Möglichkeit, das Skript auszuwählen, das Sie ausführen möchten. So sieht es aus.


Verwenden Sie den Befehl ntl

Diese Funktion kann sehr nützlich sein, wenn Sie nicht genau wissen, welche Skripte sich im Projekt befinden. Dies ist auch in Fällen sinnvoll, in denen der Programmierer die Eingabe eines langen Befehls zum Ausführen eines Skripts durch die Eingabe eines kurzen Befehls und das schnelle Drücken einiger weiterer Tasten auf der Tastatur ersetzen möchte.

8. Ausführen von Vorskripten und Nachskripten


Möglicherweise sind Sie mit den prebuild und postbuild Skripten vertraut, mit prebuild Sie vor und nach dem Ausführen des build Skripts Code ausführen können. Solche Vor- und Nachskripte können für jedes andere Skript definiert werden. Einschließlich derer, deren Beschreibungen vom Programmierer zu p ackage.json hinzugefügt werden.

Auf diese Weise können Sie nicht nur den Code übersichtlicher gestalten, sondern auch Pre- und Post-Skripte isoliert ausführen.

9. Versionskontrolle der Anwendung


Anstatt die Version der Anwendung manuell zu ändern, kann der Programmierer spezielle npm Befehle verwenden. Um den entsprechenden Teil der Versionsnummer der Anwendung zu erhöhen, können Sie den Befehl npm version gefolgt von major , minor oder patch :

 // 1.0.0 npm version patch // 1.0.1 npm version minor // 1.1.0 npm version major // 2.0.0

Abhängig davon, wie oft Sie Ihre Anwendung aktualisieren, können Sie Zeit sparen, indem Sie die Versionsnummer bei jeder Bereitstellung einer neuen Version der Anwendung automatisch erhöhen. Zum Beispiel so:

 {  "predeploy": "npm version patch" }

10. Bearbeiten von package.json über die Befehlszeile


Die Datei package.json ist eine reguläre json-Datei, sodass sie mit dem Dienstprogramm json direkt über die Befehlszeile bearbeitet werden kann. Dies eröffnet neue Möglichkeiten in Situationen, in denen Sie package.json ändern package.json , sodass Sie Ihre eigenen verkürzten Versionen von Befehlen erstellen können. Installieren Sie das json Paket global:

 npm install -g json

Dann kann das Dienstprogramm json verwendet werden, um die Datei mit dem -I schnell zu bearbeiten . Um beispielsweise der Datei ein neues foo Skript mit der foo hinzuzufügen, können Sie den folgenden Befehl verwenden:

 json -I -f package.json -e 'this.scripts.foo="bar"'

Im nächsten Abschnitt sehen Sie ein praktischeres Beispiel für die Verwendung des Dienstprogramms json .

11. Automatisierung der Einrichtung und des Öffnens des Repositorys


Wenn Ihre package.json Datei einen "repository" package.json enthält, bedeutet dies, dass Sie die Repository-Seite in dem vom System standardmäßig verwendeten Browser öffnen können. Verwenden Sie dazu den Befehl npm repo .

Wenn Ihr Projekt bereits mit einem Remote-Repository verbunden ist und Sie das Befehlszeilenprogramm git installiert haben, können Sie die Adresse Ihres Repositorys mit dem folgenden Befehl ermitteln:

 git config --get remote.origin.url

Das ist aber noch nicht alles. Wenn Sie gemäß dem vorherigen Tipp das Dienstprogramm json installiert haben, können Sie mithilfe des folgenden Skripts automatisch die richtigen Repository-Informationen zu package.json :

 json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""

12. Erstellen Sie ein eigenes Skript zur Steuerung des Befehls npm init


Lassen Sie uns nun über das Lösen einer größeren Aufgabe sprechen. Wir werden nämlich ein eigenes Skript entwickeln, das den Betrieb des Befehls npm init steuert, der die URL des GitHub-Repositorys akzeptiert und automatisch das erste Commit an dieses sendet. Hier sprechen wir darüber, wie solche Skripte erstellt werden. Und im nächsten Abschnitt, der unser letzter Tipp sein wird, werden wir über die Arbeit mit git sprechen.

Sie können das Verhalten des Befehls npm init mithilfe der .npm-init.js . Erstellen wir eine solche Datei im Home-Verzeichnis des aktuellen Benutzers (unter Windows ist dies normalerweise C:/Users/<username> und auf dem Mac ist es /Users/<username> ). Führen Sie danach den folgenden Befehl aus, der npm mitteilt, wo genau sich diese Datei befindet:

 npm config set init-module ~\.npm-init.js

Schauen wir uns vor der Integration in git ein einfaches Beispiel für die .npm-init.js , in der die Fragen wiedergegeben werden, die das System dem Benutzer stellt, wenn der Befehl npm init ohne zusätzliche Einstellungen verwendet wird:

 module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),   main: prompt('entry point', 'index.js'),  repository: prompt('git repository', ''),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC') }

Jede Frage basiert auf der folgenden Vorlage:

 nameInPackage: prompt('nameInPrompt', 'defaultValue')

Entfernen Sie einfach die prompt , um einen bestimmten Wert anzugeben und dem Benutzer keine Frage zu stellen.

Wenn Sie zu den Standardeinstellungen für npm init zurückkehren möchten, löschen .npm-init.js einfach die .npm-init.js .

13. Senden des ersten Commits an das GitHub-Repository mit npm init


Um git Befehle in der .npm-init.js auszuführen .npm-init.js wir einen Weg finden, mit der Befehlszeile zu arbeiten. child_process können Sie das Modul child_process . Wir verbinden es oben in der Datei, und da wir nur die execSync Funktion benötigen, importieren wir es nur mithilfe der Destrukturierung:

 const { execSync } = require('child_process');

Zusätzlich erstellen wir eine Hilfsfunktion, die die Ergebnisse unserer Funktion in der Konsole anzeigt:

 function run(func) {  console.log(execSync(func).toString()) }

Zum Schluss erstellen wir den entsprechenden Eingabeaufforderungsblock für die URL des GitHub-Repositorys. Wenn das Skript die URL hat, erstellen wir die Datei README.md und senden das erste Commit an das Repository.

Eines der Elemente des module.exports Objekts der .npm-init.js sollte daher der folgende Code sein:

 repository: prompt('github repository url', '', function (url) {  if (url) {    run('touch README.md');    run('git init');    run('git add README.md');    run('git commit -m "first commit"');    run(`git remote add origin ${url}`);    run('git push -u origin master');   return url; })

So sollte der vollständige Code für die Datei .npm-init.js nach diesem Zusatz aussehen:

 const { execSync } = require('child_process'); function run(func) {  console.log(execSync(func).toString()) } module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),  main: prompt('entry point', 'index.js'),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC'),  repository: prompt('github repository url', '', function (url) {    if (url) {      run('touch README.md');      run('git init');      run('git add README.md');      run('git commit -m "first commit"');      run(`git remote add origin ${url}`);      run('git push -u origin master');       return url;  }), }

So package.json Datei package.json , die das System mit dieser .npm-init.js :

 {  "name": "Custom npm init",  "version": "0.0.0",  "decription": "A test project, to demonstrate a custom npm init script.",  "main": "index.js",  "keywords": [],  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",  "license": "ISC",  "repository": {    "type": "git",    "url": "git+https://github.com/JoeBloggs/custom.git"  },  "bugs": {    "url": "https://github.com/JoeBloggs/custom/issues"  },  "homepage": "https://github.com/JoeBloggs/custom#readme" }

Wenn Sie den Prozess zum Initialisieren neuer Projekte einrichten, können Sie noch weiter gehen. Um beispielsweise sicherzustellen, dass beim Erstellen eines Projekts ein neues Repository dafür erstellt wird.

Zusammenfassung


Ich hoffe, dieses Material hat Ihnen geholfen zu sehen, was Sie mit npm erreichen können. Ich möchte glauben, dass Sie hier etwas gefunden haben, mit dem Sie produktiver arbeiten können - ob es sich um die Verwendung verkürzter Versionen von Befehlen, um Skripte aus package.json oder um das Einrichten von npm init , das Ihren Anforderungen entspricht.

Liebe Leser! Automatisieren Sie die Arbeit mit npm?

Source: https://habr.com/ru/post/de458504/

More articles:


All Articles