Was passiert, wenn du npm-Befehle ausführst?
Du drückst Enter bei einem npm-Befehl. Dein Projekt wird gebaut. Es fühlt sich wie Magie an.
Es ist keine Magie. Es ist eine Abfolge von Netzwerkanfragen, Code-Parsing und Dateioptimierung.
Hör auf, Befehle blind auszuführen. Verstehe stattdessen die Engine dahinter.
Hier ist das, was hinter den 6 Kernbefehlen passiert, die du jeden Tag verwendest.
- npm install
Dieser Befehl liest deine package.json-Datei. Er kontaktiert ein Cloud-Registry, um die richtigen Versionen deiner Tools zu finden.
- Er lädt Pakete aus dem Registry herunter.
- Er erstellt den
node_modules-Ordner. - Er erstellt einen Abhängigkeitsbaum.
- Er aktualisiert die
package-lock.json, um die exakten Versionen zu protokollieren.
- npm run format:check
Dies ist ein Verifizierungsschritt. Er prüft, ob dein Code deinen Style-Regeln entspricht, ohne etwas zu verändern.
- Er erstellt ein virtuelles Layout deiner Dateien.
- Er vergleicht deine Dateien mit Regeln wie denen von Prettier.
- Er markiert Fehler, wenn deine Abstände oder die Syntax nicht stimmen.
Um diese Fehler zu beheben, führe npm run format aus. Dieser Befehl nutzt Prettier, um deine Dateien im korrekten Stil neu zu schreiben.
- npm run lint
Betrachte dies als Rechtschreibprüfung für deinen Code. ESLint sucht nach Fehlern, die deine Logik unterbrechen.
- Er findet Syntaxfehler.
- Er identifiziert ungenutzte Variablen.
- Er erkennt fehlende Imports.
- Er markiert die falsche Verwendung von React Hooks.
- npm run build
Dieser Befehl bereitet deine App für die reale Welt vor. Er erstellt einen dist-Ordner.
- Er nutzt einen Bundler, um Tree Shaking durchzuführen. Dabei wird Code gelöscht, den du zwar importiert, aber nie verwendet hast.
- Er führt eine Minifizierung durch. Dabei werden Leerzeichen entfernt und Variablen umbenannt, um Bytes zu sparen.
- Er verarbeitet CSS und Assets.
- Er gibt optimierte statische Dateien aus, die bereit für einen Server sind.
- npm run dev
Dies startet deinen lokalen Development-Server. Wenn du Vite verwendest, nutzt er Native ES Modules.
- Er kompiliert Dateien erst dann, wenn dein Browser sie anfordert.
- Er nutzt WebSockets für Hot Module Replacement (HMR).
- Er tauscht den editierten Code in deinem Browser sofort aus, ohne dass die Seite komplett neu geladen werden muss.
- npm run preview
Nutze dies, um deine Arbeit vor dem Deployment doppelt zu prüfen. Dieser Befehl ignoriert deinen Quellcode. Er schaut nur in deinen dist-Ordner.
- Er simuliert, wie sich deine App auf Vercel oder AWS verhält.
- Er stellt deinen Production-Build auf einem lokalen Server bereit.
Das Terminal ist keine Blackbox. Wenn du deine Tools verstehst, debuggst du schneller.
Welcher Befehl hat deinen Workflow verändert, nachdem du gelernt hast, wie er funktioniert? Schreib es mir unten in die Kommentare.