Nella creazione di progetti, ognuno di noi usa diversi strumenti per snellire il proprio lavoro di sviluppo. Nella maggior parte dei casi, questi strumenti sono creati da altri sviluppatori e messi a disposizione gratuitamente.
Immaginate di costruire il vostro framework CSS: dovreste creare i vostri sistemi di design, le classi di utilità, i colori e le sfumature, migliaia di righe di Sass (che alla fine verrà compilato in CSS), numerosi componenti personalizzati, test per i bug e finanziamenti, se altri sviluppatori vi stanno aiutando a sviluppare il progetto. Questo può essere un lavoro noioso e costoso.
Ma grazie al sempre più ampio bacino di risorse gratuite create dagli sviluppatori, oggi è più facile evitare tutti questi sforzi e i rispettivi costi.
In questo tutorial parleremo di npm (Node package manager), un repository online JavaScript per i pacchetti open-source di Node.js. Scopriremo cos’è npm, come usarlo, lo scopo dei pacchetti e come interagire in locale e in remoto.
Impareremo anche a usare l’interfaccia a riga di comando (CLI), sciopriremo cosa sono le dipendenze, gli script e il file package.json.
Cos’è npm (Node Package Manager)?
Sebbene ci siano diverse varianti del significato di npm, l’acronimo sta per “Node package manager”.
npm è un gestore di pacchetti per progetti Node.js reso disponibile per l’uso pubblico. I progetti disponibili nel registro di npm sono chiamati “pacchetti”.
npm permette di utilizzare facilmente il codice scritto da altri senza doverlo scrivere noi stessi durante lo sviluppo.
Il registry di npm conta oltre 1,3 milioni di pacchetti utilizzati da più di 11 milioni di sviluppatori in tutto il mondo. (Parleremo di pacchetti più avanti in questo tutorial.)
Perché Usare npm?
Ecco alcuni dei motivi per cui usare npm:
- Permette di installare librerie, framework e altri strumenti di sviluppo di progetti, in modo simile all’installazione di un’applicazione mobile da un app store.
- Permette di accedere a progetti Node.js sicuri per lo sviluppo.
- Snellisce la fase di sviluppo grazie alle dipendenze precostituite.
- npm offre un’ampia gamma di strumenti a costo zero.
- L’uso dei comandi di npm non richiede un lungo apprendimento, perché sono semplici da capire e da usare.
Parleremo poi dell’interfaccia a riga di comando di npm.
L’interfaccia a Riga di Comando (CLI) di npm
L’interfaccia a riga di comando di npm serve per eseguire vari comandi come installare e disinstallare pacchetti, controllare la versione di npm, eseguire script di pacchetti, creare file package.json e molto altro.
Nel corso di questo tutorial vedremo alcuni casi d’uso dell’interfaccia a riga di comando.
Su un computer Windows, di solito ci si riferisce all’interfaccia a riga di comando come Prompt dei comandi. Su un computer Mac, invece, si chiama terminale.
Principali Comandi e Alias di npm
In questa sezione esamineremo alcuni dei comandi npm più utilizzati e le rispettive funzioni.
npm install
Questo comando viene utilizzato per installare i pacchetti. È possibile installare i pacchetti a livello globale o locale. Quando un pacchetto è installato globalmente, possiamo utilizzare le sue funzionalità da qualsiasi directory del nostro computer.
Se invece installiamo un pacchetto localmente, possiamo utilizzarlo solo nella directory in cui è stato installato. Quindi nessun’altra cartella o file del nostro computer può utilizzare il pacchetto.
npm uninstall
Questo comando serve a disinstallare un pacchetto.
npm init
Il comando init è utilizzato per inizializzare un progetto. Quando si esegue questo comando, viene creato un file package.json.
Quando si esegue npm init, verrà chiesto di fornire alcune informazioni sul progetto che si sta inizializzando. Queste informazioni includono il nome del progetto, il tipo di licenza, la versione e così via.
Per evitare di fornire queste informazioni, basta semplicemente eseguire il comando npm init -y.
npm update
Questo comando serve ad aggiornare un pacchetto npm alla sua ultima versione.
npm restart
Riavvia un pacchetto. È possibile utilizzare questo comando quando bisogna fermare e riavviare un particolare progetto.
npm start
Serve per avviare un pacchetto quando necessario.
npm stop
Serve a fermare l’esecuzione di un pacchetto.
npm version
Mostra la versione corrente di npm installata sul computer.
npm publish
Serve a pubblicare un pacchetto npm nel registry di npm. Si usa soprattutto quando si creano i propri pacchetti.
Come Installare npm
Per installare npm, è necessario prima installare Node.js sul proprio computer. Per farlo, collegatevi al sito web di Node.js e scaricalo. Consigliamo di scaricare la versione LTS di Node.js, in quanto è la più stabile.
Con Node.js viene installato automaticamente npm: non è necessaria un’installazione separata.
Come Verificare l’Attuale Versione di npm Installata sul Proprio PC
Dopo aver installato Node.js, eseguite i seguenti comandi per vedere le versioni di Node.js e npm:
node -vIl comando successivo mostrerà la versione attuale di npm:
npm -vPacchetti npm
In questa sezione spiegheremo di come installare e disinstallare i pacchetti npm a livello globale e locale, aggiornare un pacchetto, listare i pacchetti, cambiare la posizione di un pacchetto e cercare i pacchetti installati.
Inizieremo spiegando cosa è un pacchetto npm e vedremo alcuni esempi di pacchetti utilizzati dagli sviluppatori.
Cos’è un Pacchetto Npm?
Un pacchetto è semplicemente un progetto precostituito pubblicato nella directory di npm. Le funzioni di un pacchetto dipendono esclusivamente da chi lo crea e da chi vi contribuisce.
Con npm possiamo accedere a numerosi progetti creati da altri sviluppatori. Immaginate di creare il vostro framework CSS; ci vorrebbe molto tempo per crearne uno uguale. Gli sviluppatori creano questi progetti e li inseriscono nel registry di npm. In questo modo è possibile utilizzarli per facilitare il processo di sviluppo.
Un esempio di pacchetto npm di questo tipo è Tailwind CSS, un framework CSS utility-first per la creazione di pagine web. Altri pacchetti npm popolari sono React, Chalk, Gulp, Bootstrap, Express e Vue.js. Ma ce ne sono molti altri.
Come Installare un Pacchetto npm a Livello Globale
Installando un pacchetto npm a livello globale, potrete accedervi da qualsiasi directory del vostro computer.
In questa sezione vedremo un modo pratico per installare un pacchetto a livello globale eseguendo un comando npm nel terminale.
Per installare un pacchetto a livello globale, usate questo comando:
npm install -g [package name]Il flag -g nel comando permette alla CLI di npm di installare il pacchetto a livello globale.
Ecco un esempio:
npm install -g typescriptIl comando qui sopra installerà TypeScript a livello globale sul vostro computer. Dopo l’installazione, potrete utilizzare TypeScript in qualsiasi directory.
Come Installare un Pacchetto npm a Livello Locale
Nella sezione precedente abbiamo visto come installare un pacchetto npm a livello globale. Ora vediamo come un pacchetto a livello locale.
Installare un pacchetto in locale significa che potete utilizzarne le funzionalità solo nella directory corrente. Per farlo, dovete navigare nella directory in cui volete installare il pacchetto ed eseguire questo comando nel terminale:
npm install [package name]Ecco un esempio:
npm install typescriptIl comando qui sopra installerà TypeScript in locale, il che significa che funzionerà solo nella directory corrente.
Come Disinstallare un Pacchetto npm a Livello Globale
Nei casi in cui non abbiamo più bisogno di un pacchetto npm, potete rimuoverlo dal vostro computer disinstallandolo.
Per disinstallare un pacchetto a livello globale, usate questo comando:
npm uninstall -g [package name]Vediamo un esempio:
npm uninstall -g typescriptIl comando riportato nell’esempio precedente rimuoverà il pacchetto TypeScript dal vostro computer.
Come Disinstallare un Pacchetto npm in Locale
La disinstallazione di un pacchetto npm installato in locale è simile all’esempio precedente, ma questa volta non utilizzeremo il flag -g.
Ecco la sintassi:
npm uninstall [package name]Ed ecco un esempio concreto:
npm uninstall typescriptCome Aggiornare npm e i Pacchetti
Mantenere aggiornati npm e i pacchetti è il modo migliore per evitare che si presentino nel codice bug e falle di sicurezza.
Per aggiornare npm all’ultima versione, usate il comando seguente:
npm install npm@latest - gQuesto aggiorna npm sul computer a livello globale.
Quando i creatori di un pacchetto introducono nuove funzionalità o correggono dei bug, aggiornano il pacchetto nel registry di npm. Dovrete quindi aggiornare il vostro pacchetto per poter utilizzare le nuove funzionalità.
Ecco la sintassi del comando da utilizzare:
npm update [package name]Ed ecco un esempio:
npm update typescriptIl comando qui sopra aggiorna TypeScript all’ultima versione.
Inoltre, proprio come nelle sezioni precedenti, possiamo usare il flag -g per aggiornare un pacchetto a livello globale. Ovvero:
npm update -g typescriptCome Cambiare la Posizione dei Pacchetti npm
Per alcuni utenti che non hanno i permessi di amministrazione sul proprio computer, l’esecuzione dei comandi npm potrebbe restituire un messaggio di errore. Per risolvere questo problema, potete cambiare la posizione di installazione predefinita dei pacchetti impostando una nuova posizione/directory.
Ecco la sintassi per farlo:
npm config set prefix [new directory path]Una volta impostato il nuovo percorso per l’installazione dei pacchetti, tutti i vostri pacchetti npm saranno salvati lì di default.
Come Listare i Pacchetti npm Installati a Livello Globale
Se vi state chiedendo come verificare il numero di pacchetti installati sul vostro computer, npm fornisce un comando che vi permette di listarli.
Inserendo il comando che segue, vengono listati tutti i pacchetti installati a livello globale sul vostro dispositivo:
npm list -gEseguendo il comando qui sopra, vedrete un elenco completo dei pacchetti che avete installato in precedenza sul vostro computer.
Nella prossima sezione vedremo come listare i pacchetti npm installati in locale.
Come Listare i Pacchetti npm Installati in Locale
Possiamo listare anche i pacchetti npm installati in locale.
Per vedere l’elenco dei pacchetti installati in locale, eseguite questo comando nel vostro terminale:
npm listQuesto comando va eseguito nella directory del progetto per vedere tutti i pacchetti installati per quel particolare progetto.
Come Cercare i Pacchetti npm
Ci sono oltre 1,3 milioni di pacchetti nel registry di npm, tutti con funzionalità diverse. Quale sia il pacchetto giusto dipende dalle vostre esigenze e dai vostri obiettivi.
Ci sono pacchetti che è obbligatorio utilizzare quando si lavora con determinati stack di sviluppo. Ad esempio, un pacchetto molto diffuso in React è React Router, utilizzato per il routing in React.
Allo stesso modo, altri stack tecnologici richiedono pacchetti diversi.
Potete usare la barra di ricerca sul sito web di npm per cercare i pacchetti e vedere cosa fa ognuno di essi. La maggior parte è corredata da istruzioni per l’installazione e da dettagli sulle funzionalità. Cercate i pacchetti che vengono mantenuti regolarmente, cioè quelli che vengono testati, corretti e migliorati a intervalli regolari di tempo dagli sviluppatori della comunità.
Altri File e Cartelle di npm
Ora che abbiamo consolidato le nostre conoscenze dei pacchetti npm e di come vengono utilizzati, diamo un’occhiata ad alcuni altri file e cartelle coinvolti in un progetto basato su npm.
Il File package.json
Il file package.json ci aiuta a tenere traccia di tutti i pacchetti installati in un determinato progetto. Quando si crea un nuovo progetto, è importante iniziare creando questo file.
Nel package.json vengono memorizzate le informazioni relative a un progetto, come il nome del progetto, la versione, gli script, le dipendenze e altro ancora.
Potete farlo eseguendo il comando npm init o npm init -y nel terminale del progetto. Poi rispondete a tutte le domande che il sistema vi pone al momento della creazione del file.
Dopo aver generato il file package.json, saranno memorizzati nel file tutti i pacchetti installati, con i rispettivi nomi e versioni.
Un altro importante impiego del file package.json si ha quando si clonano i progetti su GitHub. Quando gli sviluppatori inviano il loro progetto a un repository, lasciano fuori la cartella node_modules, che contiene i pacchetti e le loro dipendenze.
Per generare la cartella dopo aver clonato un repo, è necessario eseguire il comando npm install nel terminale del progetto. In questo modo npm potrà esaminare il file package.json del repository e installare tutti i pacchetti elencati.
Una volta completata l’installazione, potrete utilizzare tutti i pacchetti precedentemente installati per quel progetto prima che il progetto venga inviato su GitHub.
Cosa Sono le Dipendenze di npm?
Quando installiamo i pacchetti, viene creata una cartella node_modules in cui possiamo vedere altre cartelle, ovvero la cartella di ogni pacchetto e le sue sottocartelle. Potreste chiedervi perché ci sono queste altre cartelle se non le avete installate.
Ebbene, nel vostro file package.json, i pacchetti sono elencati tra le dipendenze perché il vostro progetto “dipende” da quei pacchetti per funzionare.
Le cartelle extra create nella cartella node_modules sono altri pacchetti da cui dipendono i pacchetti installati per offrirvi tutte le funzionalità. Potete verificarlo facilmente cercando le dipendenze del file package.json di un pacchetto installato.
Cosa Sono gli Script npm?
Gli script npm sono script personalizzati definiti nel file package.json per automatizzare determinate operazioni. Potete anche definire i vostri script per automatizzare diverse attività come la minificazione del codice CSS, il riavvio del server ogni volta che vengono apportate delle modifiche, la creazione di un progetto per la produzione e così via.
Quando creiamo un file package.json, di solito viene generato uno script test insieme al file. Possiamo usare gli script per svolgere una serie di attività come l’avvio di un server, la minificazione del CSS, il raggruppamento del codice per la produzione e così via.
Un esempio molto utilizzato di uno di questi script è npm run start di React, che avvia il nostro server di sviluppo in localhost:3000.
Come lo script precedente, possiamo eseguire altri script utilizzando questa sintassi:
npm run [script-name]Riepilogo
Nel corso degli anni, npm è diventato una necessità per lo sviluppo di applicazioni web basate su Node.js. npm ci dà accesso a milioni di progetti distribuiti da altri sviluppatori che potete utilizzare gratuitamente per portare avanti il vostro.
Esiste un’ampia varietà di pacchetti npm che vanno dai framework CSS, ai file bundler, dai framework JavaScript, agli strumenti di backend e molto altro. Questi progetti possono essere utilizzati in modo sicuro da parte di altri sviluppatori e molti sono regolarmente mantenuti e aggiornati.
Con npm, lo sviluppo di applicazioni web è diventato più semplice: non dobbiamo reinventare la ruota. Tutto ciò che dobbiamo fare è installare il pacchetto di un altro sviluppatore e risparmiarci ore di codifica.
Come sviluppatori, possiamo anche creare i nostri pacchetti npm e pubblicarli sul registry di npm affinché possano essere utilizzati da altri sviluppatori. Come gli utenti della comunità di WordPress contribuiscono al miglioramento e al successo della piattaforma, anche i membri della community di Node.js possono farlo.
Avete creato qualche strumento che vi aiuta nella fase di sviluppo e che vorreste fosse utilizzato da altri sviluppatori? Condividete le vostre considerazioni nella sezione dei commenti!
