Cosa succede quando esegui i comandi npm?
Premi invio su un comando npm. Il tuo progetto viene compilato. Sembra magia.
Non è magia. È una serie di richieste di rete, parsing del codice e ottimizzazione dei file.
Smetti di eseguire comandi alla cieca. Cerca invece di capire il motore che li fa girare.
Ecco cosa succede dietro i 6 comandi principali che usi ogni giorno.
- npm install
Questo comando legge il tuo file package.json. Contatta un registro cloud per trovare le versioni corrette dei tuoi strumenti.
- Scarica i pacchetti dal registro.
- Crea la cartella node_modules.
- Costruisce un albero delle dipendenze.
- Aggiorna package-lock.json per registrare le versioni esatte.
- npm run format:check
Questo è un passaggio di verifica. Controlla se il tuo codice segue le tue regole di stile senza modificare nulla.
- Crea un layout virtuale dei tuoi file.
- Confronta i tuoi file con regole come Prettier.
- Segnala errori se la spaziatura o la sintassi sono errate.
Per correggere questi errori, esegui npm run format. Questo comando utilizza Prettier per riscrivere i tuoi file secondo lo stile corretto.
- npm run lint
Pensalo come un correttore ortografico per il tuo codice. ESLint cerca errori che compromettono la logica.
- Trova errori di sintassi.
- Identifica variabili non utilizzate.
- Rileva import mancanti.
- Segnala l'uso errato di React Hook.
- npm run build
Questo comando prepara la tua app per il mondo reale. Crea una cartella dist.
- Utilizza un bundler per eseguire il tree shaking. Questo elimina il codice che hai importato ma che non hai mai utilizzato.
- Esegue la minificazione. Questa rimuove gli spazi bianchi e rinomina le variabili per risparmiare byte.
- Elabora CSS e asset.
- Genera file statici ottimizzati pronti per un server.
- npm run dev
Questo avvia il tuo server di sviluppo locale. Se usi Vite, utilizza i Native ES Modules.
- Compila i file solo quando il browser li richiede.
- Utilizza i WebSockets per l'Hot Module Replacement (HMR).
- Sostituisce istantaneamente il codice modificato nel browser senza ricaricare l'intera pagina.
- npm run preview
Usalo per ricontrollare il tuo lavoro prima del deploy. Questo comando ignora il codice sorgente. Guarda solo la cartella dist.
- Simula il comportamento della tua app su Vercel o AWS.
- Serve la tua build di produzione su un server locale.
Il terminale non è una scatola nera. Quando comprendi i tuoi strumenti, fai debugging più velocemente.
Quale comando ha cambiato il tuo flusso di lavoro una volta capito come funzionava? Dimmi tutto qui sotto.