Oggi ti guiderò attraverso le basi di Node.js e NPM, comprese le spiegazioni su come sviluppare per il Web in generale. Solo una nota in anticipo: se hai familiarità con lo sviluppo web di base e NPM, puoi saltare questo articolo e saperne di più sull'utilissimo NPX qui.
Ok fantastico! Iniziamo!
Node.js
Se stai leggendo questo, probabilmente hai già scaricato Node.js + NPM e hai iniziato con la punta dei piedi nelle acque di Javascript. Eppure i primi passi potrebbero già sembrare spaventosi: “Voglio solo scrivere un programmino in Javascript, perché ho bisogno di tutte le altre cose?”. È comprensibile, ma in realtà non è un grosso problema.
Cominciamo dall'inizio: puoi semplicemente creare un file Javascript ovunque sul tuo computer, indicato dal suffisso '.js'. Questo file può essere riempito di codice come vuoi, ma poi manca una cosa: come esegui effettivamente il tuo programma? È qui che entra in gioco Node.js.
Node.js è un ambiente di runtime, esplicitamente per Javascript. Come suggerisce la descrizione, Node può eseguire il codice Javascript in un ambiente specifico fornito da Node stesso. Il processo è sempre lo stesso: per prima cosa avvii Node.js e quando Node viene avviato (il che significa che ha terminato l'avvio) puoi fornirgli il tuo codice Javascript.
Ci sono due modi in cui il tuo Javascript può essere fornito a Node come input:
- Direttamente al processo Node in esecuzione, riga per riga, nessun file incluso
- Dicendo a Node quale file Javascript caricare, senza alcun input riga per riga
node
Linea per linea
Dopo aver installato correttamente Node.js (che sta solo scaricando + eseguendo il programma di installazione, le descrizioni sono sul sito Web di Node), puoi avviare Node.js da qualsiasi punto del tuo Terminale (macOS/Linux) o PowerShell (Windows) . Il comando è simile a questo.
Sì, questo è tutto! Hai appena avviato con successo Node! Hai notato quanto velocemente è successo? Uno dei motivi per cui Node.js è così popolare è proprio per il suo avvio incredibilmente veloce (tra le altre cose).
Ora che Node è attivo e funzionante, possiamo definire la nostra app Javascript riga per riga. Ogni input viene elaborato e memorizzato. Ecco un piccolo esempio.
(Hit enter after every line end)
const greet = (name) => console.log("Hello, " + name);
greet("Tom"); let x = 10; x = x + 5;
(enter the following line to terminate node)
.exit
Ora va tutto bene e dandy, ma la scrittura di app più grandi richiede che vengano prima redatte in file prima di inviarle a Node. Prossimo capitolo, per favore!
Immissione tramite file
Per questo esempio è necessario un editor di testo. Fondamentalmente puoi usare ogni programma in grado di manipolare il testo (come TextEdit su macOS o Editor su Windows). Raccomando il codice VS open source di Microsoft, ma puoi scegliere quello che si adatta meglio alla tua ergonomia.
Per fornire un file come input, dovremo solo crearne uno. Basta creare un semplice file di testo con il suffisso "js" nel nome. Chiameremo il nostro file app.js. Ora apri il tuo prompt dei comandi preferito (quello usato nel nostro primo esempio). Assicurati di aprirlo dalla directory in cui è stato salvato il file, è importante.
Se stai usando VS Code, puoi usare il suo prompt dei comandi integrato, basta fare clic con il pulsante destro del mouse nella vista di Explorer e chiamare "Apri in codice" (su Windows) o trascinare la directory contenente il file su l'icona del codice VS nel Dock (macOS). Quindi puoi aprire il suo terminale come descritto qui.
Quando il terminale è pronto, digita semplicemente il seguente comando.
node app.js
Come vedi, sono successe alcune cose:
- Il nodo è stato avviato direttamente, senza l'input dell'utente disponibile
- Node ha eseguito l'intero file dall'alto verso il basso fino a raggiungere la fine
- Il nodo stesso è terminato, poiché la fine del file ha segnato anche la fine del suo processo
E per un'introduzione di base a Node.js, il gioco è fatto! Dopo aver scaricato Node e aver sperimentato per la prima volta l'utilizzo del prompt dei comandi per avviare la tua app Javascript, riga per riga o da un file, sei ufficialmente uno sviluppatore Javascript! Benvenuto nel club!
Ora ti guiderò attraverso il concetto fondamentale di NPM. Dopo il prossimo capitolo, esamineremo rapidamente la connessione tra Node.js, NPM e lo sviluppo web. Se vuoi saperne di più su Node.js, puoi dare un'occhiata alle nostre storie su Javascript, toolchain e tutto ciò che riguarda la codifica qui. Ho anche collegato alcune risorse utili alla fine di questo articolo per ancora più cose da imparare.
Va bene, muoviamone uno!
NPM, il Nodo Package Manager
Come hai visto, non è così difficile gestire il tuo codice. L'app può essere archiviata in un file, le modifiche che applichi rimangono. Ma cosa succede se si desidera utilizzare il codice di qualcun altro, ad esempio una libreria crittografica o di manipolazione delle immagini? In qualche modo devi mettere quel codice accanto al tuo, renderlo utilizzabile per la tua applicazione e mantenere tutto gestibile.
Un approccio ingenuo sarebbe semplicemente scaricare il codice esterno direttamente dalla fonte, ad es. Github e copia la libreria, file per file, nel tuo progetto. Ma questo porta ad alcuni problemi:
- Come si aggiorna al meglio questo codice esterno? Copiare a mano non è la soluzione migliore.
- Come tieni traccia di tutto il codice esterno?
- E se questo codice esterno stesso si basasse su librerie, che non sono installate nel tuo progetto?
Tutte queste sfide vengono affrontate da NPM, un gestore di pacchetti per Node.js. Il lavoro di un gestore di pacchetti è fondamentalmente quello di darti una soluzione solida su come aggiungere, tenere traccia e rimuovere codice esterno, noto anche come dipendenze. Ecco alcuni esempi di NPM in azione.
npm install serve-static npm remove serve-static
Naturalmente, questo gestore ha bisogno di alcuni file speciali per tenere traccia di tutte le dipendenze nel tuo progetto. Ecco perché le applicazioni che utilizzano NPM hanno almeno due file: package.json e package-lock.json. Puoi chiamare il comando seguente per creare rapidamente un nuovo pacchetto NPM.
npm init -y
Nota: come abbiamo visto nella prima parte di questo articolo, NPM non è necessario per utilizzare Node.js o Javascript. Il suo obiettivo è gestire le tue dipendenze, né più né meno. Tramite NPM puoi scaricare il codice pubblicato su npmjs.com. Tutti questi moduli esterni sono archiviati nel tuo progetto in una directory speciale chiamata node_modules. Praticamente non dovrai mai modificare questa directory, poiché è completamente gestita da NPM.
Il package.json fornisce informazioni dettagliate sulle dipendenze attualmente utilizzate nel progetto. package-lock.json è un file speciale che memorizza alcuni metadati sulle mutazioni relative al file package.json o alla directory node_modules e per ora può essere ignorato.
Penso che concluderò la mia descrizione del concetto fondamentale di NPM, cosa fa e quali file/directory genera automaticamente. Ulteriori informazioni sono collegate alla fine dell'articolo.
Da arco a web dev
Bene, ora conosci i fondamenti di Node.js e NPM. Ma perché mai tutte queste cose sono necessarie da imparare se vuoi semplicemente iniziare a creare il tuo sito Web moderno?
Come abbiamo appena visto, NPM ci permette di scaricare codice da una vasta collezione di librerie (la più grande esistente, per la precisione). Per lo sviluppo Web, avrai bisogno di un server in grado di ospitare (ovvero fornire) la tua app Web. Ci sono molti servizi disponibili in cui puoi caricare il tuo progetto di sito Web e utilizzare un'infrastruttura esistente, inclusi i server, per rendere il sito Web disponibile sul Web.
E per lo sviluppo locale, è necessario anche un server per caricare i tuoi file locali e renderli disponibili solo a te, sul tuo dispositivo, durante lo sviluppo. Grazie a Node.js, puoi semplicemente farlo: rendere il tuo sito Web disponibile localmente tramite un cosiddetto localhost. Node.js ha gli strumenti integrati necessari per avviare un server locale, ma tramite NPM, la tua applicazione può essere arricchita con componenti testati in battaglia che possono aiutarti a creare servizi molto grandi in un breve lasso di tempo.
Ovviamente questo è solo l'inizio: NPM ospita così tanto codice per la creazione di moderne app Web (note come PWA, "app Web progressiva") e server complessi. Ma per una prima introduzione, penso che la spiegazione dovrebbe andare bene.
Spero di poterti aiutare a prendere confidenza con Node.js e NPM. I primi passi sono sempre i più difficili, ma affrontare i primi giorni di sviluppo e (molto) apprendimento sarà ricompensato con le tue capacità che si espandono nello sviluppo di moderne applicazioni web, permettendoti di essere costruito qualunque cosa tu voglia.
