Diese NPM-Tricks machen Sie zu einem Profi

Nachdem ich NPM fast 8 Jahre lang verwendet habe, habe ich auf dem Weg Dinge gelernt, von denen ich wünschte, ich wüsste es, als ich anfing. Nennen wir sie Tricks, Dinge, die meine Arbeitsweise mit NPM drastisch verbessert haben. Heute möchte ich meine Top 10 Tricks mit Ihnen teilen.

1. Sparen Sie Zeit. ⏲ ​​Verwenden Sie Verknüpfungen

Dies ist eine der nützlichsten, aber nicht so gut dokumentierten Funktionen. Eine Verknüpfung für einen Befehl mag trivial erscheinen, aber die Wahrheit ist, dass Sie 30 bis 60% weniger Code schreiben . Sie sparen Zeit, die Sie für etwas Sinnvolles ausgeben können, beispielsweise für das Trinken einer zusätzlichen Tasse Kaffee ☕️?

Anstatt npm install

schreibe .npm i

Anstatt npm install--save

schreibe .npm i -S

Anstatt npm install--save-dev

schreibe .npm i -D

Anstatt npm install--global

schreibe .npm i -G

? Bonusverknüpfung! Möchten Sie Ihre Kollegen beeindrucken? ? Hier kommt es…

Anstatt npm test

schreibe .npm t

2. Installieren Sie mehrere Pakete in einem Befehl

Warum mehrere Zeilen schreiben, wenn Sie eine schreiben können? ? Wenn Sie Ihre Pakete auswendig kennen, ist es am schnellsten, sie alle in einem Einzeiler zu installieren, aber seien Sie vorsichtig! Ein falsch geschriebenes Paket und der gesamte Befehl schlagen fehl. Wenn Sie sich über die Namen nicht sicher sind, installieren Sie sie einfach einzeln.

npm i -S react redux react-redux 

3. Installieren Sie Pakete aus verschiedenen Quellen

Standardmäßig npm-installinstalliert NPM beim Ausführen die neueste Version aus der npm-Registrierung (//registry.npmjs.org).

Aber es gibt noch mehr! NPM kann auch Pakete aus anderen Quellen installieren, z. B. eine URL oder eine Tarball-Datei.

Diese Funktion ist leistungsstark, wenn Sie eigene Pakete oder Pull-Requests für vorhandene Pakete erstellen. Wenn Sie beispielsweise eine eigene Redux-Gabel haben, können Sie Ihr Paket direkt von Ihrer Gabel aus installieren. (Ändern Sie usernameIhren Benutzernamen auf GitHub.)

npm i 

Noch besser, wenn Sie ein GitHub-Repository verwenden, können Sie diese Verknüpfung verwenden:

npm i username/redux

Es gibt mehr! Sie können auch ein Paket aus einem bestimmten Zweig installieren. Nützlich beim Testen einer zukünftigen Version. Fügen Sie einfach #den Filialnamen am Ende hinzu.

npm i username/redux#

? Bonusverknüpfung! Verwenden Sie GitHub nicht? Keine Sorge, es gibt auch Verknüpfungen für BitBucket und GitLab :

npm i bitbucket:username/myrepositorynpm i gitlab:username/myrepository

4. Pakete verknüpfen

Manchmal möchten Sie an einem Projekt arbeiten und gleichzeitig dessen Pakete entwickeln. Das Festschreiben und Verschieben Ihres Pakets in ein Remote-Repository für jede Änderung, die Sie ausprobieren möchten, ist mühsam! ? Stattdessen können Sie eine Funktion namens Paketverknüpfung verwenden .

Die Paketverknüpfung funktioniert, indem in Ihrem Ordner node_modules ein Symlink erstellt wird, der auf das lokale Repository Ihres Pakets verweist. Auf diese Weise können Sie Pakete lokal bearbeiten und die Änderungen sind sofort im Projekt verfügbar, wenn Sie sie verwenden.

Der einfachste Weg, die Paketverknüpfung zu verstehen , besteht darin, sie auszuprobieren!

Nehmen wir an, wir haben ein Projekt namens myprojectund ein Paket namens mypackage. Wir wollen mypackageeine Abhängigkeit von sein myproject.

Gehe in den Ordner mypackageund schreibe

npm link

Nett! Gehen Sie nun in den Ordner myprojectund schreiben Sie

npm link mypackage

Erledigt! Schauen Sie sich die Ordnerstruktur genauer an

Wie Sie sehen können, myproject/node_modules/mypackageist jetzt ein Symlink zum Ordner mypackage! Jetzt können Sie sich weiterentwickeln mypackageund alle Änderungen, die Sie vornehmen, sind sofort in verfügbar myproject.

5. Der Befehl npx

Es gibt viele Skript-Tools auf NPM, die Sie wahrscheinlich verwenden werden, die aber nicht Teil Ihres Laufzeitpakets sind. Grunzen, Schlucken, React-Create-App, React-Native-Cli und Mokka sind nur einige davon.

Vor NPM 5.x mussten Sie diese Tools entweder als globale Pakete oder als devDependencies installieren. Dies war zeitaufwändig, nicht nur um alle Ihre Tools für mehrere Projekte zu installieren, sondern auch zu warten. Außerdem werden die meisten Tools nur ein- oder zweimal verwendet.

Hier kommt der binäre NPX zur Rettung und spart uns viel Arbeit! Um beispielsweise ein neues Reaktionsprojekt zu starten, können Sie einfach schreiben:

npx create-react-app my-new-project

Die neueste Version der Create-React-App wird sofort heruntergeladen und ausgeführt. Keine Installation und Wartung von Tools mehr als globale Pakete.

6. Überwachen und reinigen Sie Ihr Projekt

Es ist wichtig zu verstehen, was bei der Installation von Paketen unter der Haube passiert, um Probleme zu lösen und den Abhängigkeitsbaum und die endgültige Bundle-Größe so klein wie möglich zu halten.

Zunächst benötigen wir einen guten Überblick über den Abhängigkeitsbaum und welche Paketversionen tatsächlich installiert wurden. Verwenden Sie den Befehl npm list. Fügen Sie das Flag hinzu, --depth=0um nur Pakete der obersten Ebene aufzulisten, und fügen -gSie hinzu, um Ihre globalen Pakete aufzulisten.

npm listnpm list --depth=0 -g

NPM ist gut darin, sich selbst zu pflegen und den Abhängigkeitsbaum im laufenden Betrieb zu reduzieren , aber es ist immer eine gute Angewohnheit, Ihr Projekt vor der Veröffentlichung zu deduplizieren . Möglicherweise werden einige Pakete für Sie entfernt.

npm dedupe

Es ist auch eine gute Idee, sich einen guten Überblick über Ihre veralteten und fehlenden Pakete zu verschaffen. Es ist schwer, diese Ansicht wegen ihrer gut organisierten Säulen und des Weihnachtsschemas nicht zu lieben?

npm outdated

Wenn Sie viele rote Zeilen erhalten, müssen Sie diese ausführen npm update, um Ihre Pakete auf die neueste mögliche Version gemäß Ihrer package.json zu aktualisieren, die ebenfalls in der gewünschten Spalte angegeben ist

npm update

Toll! Wenn Sie jetzt npm oudatederneut ausführen , sollten alle roten Zeilen verschwunden sein.

Wenn Sie das Caret ^vor Ihren Versionen in package.json verwenden, werden die Hauptversionen nicht aktualisiert (daher die gelben Zeilen). Dies ist gut, da möglicherweise Änderungen an der Aktualisierung auf eine neue Hauptversion vorgenommen werden.

Wenn Sie dennoch alles auf die neueste Version aktualisieren möchten, können Sie das Tool verwenden npm-update-all. Es ist so einfach wie das Ausführen dieses Befehls in Ihrem Projektordner.

npx npm-update-all

Cool! Jetzt haben Sie die neueste Version aller Ihrer Abhängigkeiten. Ihre package.json wird ebenfalls aktualisiert. ⚠️ Achten Sie darauf, dass Änderungen nicht vorgenommen werden ⚠️

7. Auf der Startseite finden Sie ein Paket

Müssen Sie die Dokumentation für ein Paket überprüfen? Warum sollten Sie zum Browser wechseln und mit dem Googeln beginnen, wenn Sie nur das Terminal benötigen? ?

Öffnen Sie das Repository für ein Paket im Browser

npm repo

Öffnen Sie die Homepage

npm home

Öffnen Sie die Dokumentation

npm docs

8. Verwenden Sie NPM-Skripte

Ich liebe npm-Skripte! Anstatt Task-Runner wie Gulp und Grunt zur Automatisierung sich wiederholender Aufgaben zu verwenden, können Sie in den meisten Fällen aus mehreren Gründen npm-Skripte verwenden:

➕ Es müssen weniger Entwicklungsabhängigkeiten oder globale Abhängigkeiten beibehalten werden.

➕ Keine neuen Tools für Mitwirkende und Teammitglieder zum Lernen

➕ Weniger Code und Konfiguration.

Zunächst haben Sie solche vordefinierten Skripte start, install, test, prepublish, die in NPM eine besondere Bedeutung haben. Wie sie verwendet werden können, erfahren Sie in meinem vorherigen Tutorial, in dem wir ein npm-Paket von Grund auf neu erstellen.

Sie können auch Ihre eigenen benutzerdefinierten Skripte erstellen. Hier ist ein Beispiel für ein Skript, das Ihren Code im srcOrdner mit ESLint formatiert:

package.json:

"scripts":{"test": "jest","format": "eslint src --fix"}

Jetzt können Sie ausführen npm run formatund ESLint erledigt seine Aufgabe.

Mit npm-Skripten können Sie viele Dinge tun, z. B. Shell-Befehle ausführen und Skripte nacheinander verketten. Schauen Sie sich npm-Skripte an, um ein tieferes Verständnis dieser leistungsstarken Funktion zu erhalten.

9. Ausführen von NPM-Skripten in vsCode

Manchmal habe ich 30 npm-Skripte in meiner package.json (kein Scherz). ? Wenn Sie Visual Studio Code verwenden, können Sie glücklicherweise alle Ihre npm-Skripte im Explorer auflisten und Ihre Skripte mit einem Klick auf eine Schaltfläche ausführen! Stellen Sie sicher, dass diese Einstellung aktiviert ist:

npm.enableScriptExplorer: true

10. Legen Sie Ihre Standardwerte fest

Wenn Sie ein neues Projekt erstellen, werden Sie ausgeführt npm initund erhalten Fragen zu Ihrem Projekt. Um Zeit zu sparen, schreiben Sie wahrscheinlich run npm init -y, um die Datei package.json mit Standardwerten zu füllen.

Aber was genau sind Ihre Standardwerte? ? Einige davon stelle ich gerne selbst ein, um weiter Zeit zu sparen! ?

npm config set init.author.name "Carl-Johan (CJ) Kihl"

npm config set init.author.email "[email protected]"

Zusammenfassung

Das waren meine Tipps für NPM! Wenn Sie weitere Tipps und Tricks haben, die Sie teilen möchten, fügen Sie bitte unten einen Kommentar hinzu! ?

? Bonusverknüpfung!

Stellen Sie sich vor, es ist Freitagabend und Sie stehen kurz vor dem Abschluss eines neuen Projekts, aber Sie sind viel zu müde, um zu schreiben npm dedupe. ?

Keine Sorgen! Speichern Sie drei Buchstaben, indem Sie schreiben:

npm ddp

Danke fürs Lesen.