Perché (e come) usare npm, il package manager di Node.js

Oggi il mio compito non sarà tanto quello di presentarti una nuova tecnologia, ma piuttosto presentartene una che ha rivoluzionato il nostro lavoro.

Curioso?

Continua a leggere ?

Se hai aggiunto qualche buco nella tua cintura da sviluppatore questo significa che sai bene che una pagina web è composta di codice HTML, CSS e JavaScript.

Fino a qualche anno fa la realtà dei fatti era questa: tre sintassi distinte per realizzare un unico prodotto.

Un linguaggio forniva struttura, un altro lo stile e un altro ancora permetteva di aggiungere logiche di programmazione alla nostra pagina.

Poi tutto si è rivoluzionato!

Abbiamo il linguaggio HTML che con le sue API permette di limitare e validare le immissioni all’interno di un modulo o che mostra i pulsanti per la riproduzione dei file multimediali.

Abbiamo il linguaggio CSS che (senza disturbare Sass o simili) permette di eseguire dei calcoli matematici direttamente nel browser o di creare variabili da richiamare successivamente.

E poi abbiamo JavaScript…

Il mondo JavaScript si è trasformato moltissimo in questo ultimo periodo.

Questo linguaggio, che ha vissuto un’era da pecora nera dove gran parte del mondo degli sviluppatori cercava di evitarlo, arriva oggi dove anche il CEO di uno dei più importanti CMS sul pianeta (Matt Mullenweg) ci invita a imparare questo linguaggio nel dettaglio.

Che cosa è successo in questi anni?

Molto.

JavaScript è maturato presentando una nuova sintassi, nuove librerie si sono definite come standard per determinati aspetti dello sviluppo e alla fine questo linguaggio è approdato sui server!

Ebbene sì, un linguaggio prettamente lato client ha fatto il suo debutto come linguaggio per server web grazie al progetto Node.js.

Molto probabilmente il termine Node.js non ti è nuovo…

Avrai sentito dire che permette di creare un server web gestito e sviluppato in JavaScript, avrai sentito che i server Node.js è possibile eseguire codice asincrono e probabilmente avrai anche sentito che generalmente i server in Node.js sono più veloci rispetto ai classici server che eseguono codice PHP o un altro linguaggio lato server.

Mi fa piacere che tu abbia sentito tutte queste belle cose, peccato che oggi non ne analizzeremo neanche una!

La caratteristica più interessante di Node.js

Sicuramente Node.js ha rivoluzionato il mondo degli sviluppatori web perché ha portato persone che erano abituate a sviluppare codice frontend a scrivere applicazioni che possono interfacciarsi direttamente con i file presenti nel nostro sistema operativo e di rispondere alle richieste dei client sparsi per il web.

Per quanto tutto questo può essere bello per uno sviluppatore che ha voglia di mettersi alla prova.

L’introduzione di Node.js è stata molto benefica anche dal punto di vista dello sviluppatore frontend perché con esso sono nati moltissimi strumenti che facilitano il nostro lavoro e ci permettono di eseguirlo più velocemente.

Questi strumenti sono installabili attraverso il terminale che è disponibile all’interno di qualsiasi sistema operativo.

Tra questi uno dei più famosi è Gulp.js ma è soltanto uno degli strumenti che Node.js ha permesso di realizzare e che possiamo utilizzare all’interno del nostro workflow.

Grazie all’introduzione di questa tecnologia molti sviluppatori hanno deciso di contribuire alla vita dei propri colleghi creando strumenti, librerie e porzioni di codice (moduli) messi a disposizione della comunità.

Sono sicuro che se respiri web da diverso tempo, questa non è una grande novità.

Poco più di dieci anni fa veniva lanciato jQuery, una libreria che ha rivoluzionato l’approccio al linguaggio JavaScript e allo sviluppo web in generale in modo incredibile rendendo l’accesso a questa tecnologia un gioco da ragazzi.

Dalla creazione di questa libreria ne abbiamo viste a centinaia in grado di aiutarci e modificare la relazione che il linguaggio JavaScript ha con le pagine del nostro sito.

React, Angular, Vue.js sono soltanto alcuni dei progetti che sono diventati famosi e utilizzati, ma la presenza di tutte queste librerie ha portato soltanto a un problema:

Mantenere aggiornati i nostri progetti!

Prima di affrontare questo aspetto, parliamo un attimo di prestazioni.

Se ti soffermi per un attimo e apri un file HTML all’interno del tuo editor di testo preferito, noterai che all’interno di questo vivono moltissimi tag <script>.

Sono convinto, o per meglio dire spero, che la maggior parte di questi puntano a librerie esterne o plugin che sono stati salvati in qualche CDN come cdnjs, almeno questo è quello che spero.

Il fatto che tu stia caricando una libreria da una CDN non significa che hai completamente risolto i problemi legati ai kilobyte della stessa, forse hai salvato il tuo server dal doverli inviare ma non possiamo dire la stessa cosa del browser collegato.

Per ogni <script> che si collega in una pagina, il client dovrà comunque effettuare singole richieste HTTP per ogni libreria che stai utilizzando e dovrà scaricarle prima di poterle eseguire.

Anche se con HTTP2 questo non sembra essere più un problema, è sempre bene cercare di ridurre le nostre chiamate andando a concatenare e minificare dove possibile.

Ogni <script> che aggiungi non è soltanto un peso per il sito che stai costruendo, ma lo è anche per te!

Infatti molto spesso capita che il tuo codice sia dipendente dalla versione di una libreria oppure può anche capitare che la versione della libreria utilizzata per il progetto sia vecchia e che presenti diverse falle di sicurezza.

Insomma tutto questo mi è servito per farti capire che, in un modo o nell’altro, avere a che fare con delle librerie implica anche avere l’onere di seguirle e di aggiornare il codice a seconda dei casi.

Che cosa ha portato Node.js per risolvere questo problema?

Quello che ha fatto è stato portare un package manager in grado di scaricare e installare in completa autonomia una serie di pacchetti che ci aiutano nel nostro lavoro e nel nostro sviluppo.

Node.js ci ha portato npm!

Se ti è capitato di utilizzare Linux avrai sicuramente avuto a che fare con un package manager come apt (per le distro Debian based) o dnf (per Fedora).

Al giorno d’oggi anche sistemi operativi come OSX e Windows offrono un qualche gestore di applicazioni, ma Linux è stato il primo sistema operativo che ci ha offerto questo approccio.

npm infatti è un’ottima applicazione che si può utilizzare con il terminale e permette di mantenere aggiornate le librerie collegate al nostro progetto.

Come configurare npm per le proprie necessità

Grazie al video precedente hai appreso una cosa molto importante.

Sicuramente hai notato che installare Node.js è un gioco da ragazzi ma la cosa che cambia le carte in tavola è il fatto che questi strumenti si usano interamente dal terminale.

Se hai esperienza con Linux o ti è capitato di lanciare qualche comando da una connessione SSH su un tuo server (dove nel 99% dei casi è installato Linux), probabilmente sapere che d’ora in poi avrai a che fare con il terminale non ti da alcun problema.

Sensazioni diverse le possono avere gli utenti Mac o Windows dove la possibilità di lanciare dei comandi da terminale viene limitata in favore degli strumenti con una GUI.

Dato che con npm sarai in grado di installare nuove applicazioni e strumenti, è bene sapere come guidare questo comportamento in modo da seguire le proprie preferenze.

Le configurazioni sono svolte nel terminale e generalmente i vari comandi rispetteranno questa struttura:

npm <comando> --<opzione di configurazione> [<valore opzionale>]

Utilizzare questa sintassi ti permette di impostare delle opzioni a ogni comando che eseguiamo.

Per esempio, diciamo che hai deciso di utilizzare Gulp.js per il tuo prossimo progetto. In questo caso, la cosa migliore da fare è installare questo pacchetto sia come eseguibile che come libreria nel nostro progetto.

Lo scopo principale di npm è quello di installare dei pacchetti che possiamo eseguire per il nostro progetto ma come forse hai capito dalla frase precedente, con specifiche opzioni, possiamo fare in modo di installarle in modo globale sul nostro sistema operativo.

Per esempio, per utilizzare Gulp.js sul proprio sistema operativo la prima cosa che dobbiamo fare è installarlo come comando.

Con npm questo è semplice quanto scrivere:

$ npm install --global gulp-cli

Questo comando da solo può fare ben poco, tutto quello che abbiamo fatto è stato installare l’eseguibile nel nostro sistema operativo.

Ma per usare Gulp.js per il nostro progetto dobbiamo installarlo anche nella cartella del progetto con il seguente comando:

$ npm install gulp --save-dev

Adesso, anche se in questo articolo non andremo ad approfondire Gulp.js, puoi configurare il tuo progetto attraverso il gulpfile.js e utilizzare Gulp.js per automatizzare le tue operazioni.

Distogliendo l’attenzione da Gulp, la cosa più importante che dobbiamo comprendere è che hai appena installato un utile strumento per il tuo lavoro da sviluppatore e questo grazie a npm.

La cosa ancora più interessante è che grazie alle opzioni di configurazione utilizzate abbiamo installato lo strumento sia sul nostro sistema operativo che come eseguibile per il progetto.

• --global questa è l’opzione che permetterà di installare il pacchetto fornito da npm in modo globale, quindi avere la possibilità di eseguirlo direttamente da terminale
• --save-dev che è l’opzione dedicata a installare localmente (all’interno della cartella del progetto) in modo da poterlo utilizzare sugli stessi file presenti.

Ovviamente in questo articolo non possiamo andare a descrivere tutte le opzioni che possiamo utilizzare per ogni comando, sono veramente molte!

Se questo è l’aspetto che trovi più interessante di npm ti consiglio di consultare la sua documentazione perché adesso voglio parlare nello specifico di come configurare questo utile strumento per rispondere a tutte le tue esigenze.

npm recupera le configurazioni da tre posti:

• dalla riga di comando con le flag --foo (dove foo è un qualsiasi parametro accettato, come ad esempio --global), abbiamo visto questa caratteristica poco fa e permette di applicare le nostre configurazioni a ogni comando.
• all’interno del nostro codice grazie alle environmental variables dove possiamo specificare qualsiasi configurazione che vogliamo impostare globalmente per il nostro progetto.
• all’interno del file .npmrc che può vivere nel nostro sistema operativo in quattro posti distinti che ne specificano anche il raggio d’azione:
  • per progetto (/percorso/progetto/.npmrc)
  • per utente (~/.npmrc)
  • file di configurazione globale ($PREFIX/etc/npmrc)
  • file di configurazione integrato (/percorso/eseguibile/npm/npmrc)

Non ti preoccupare, nel 99% dei casi le configurazioni che potrai lanciare dal tuo terminale quando inizi un nuovo progetto saranno più che sufficienti per i tuoi scopi.

Quello che ritengo importante è farti sapere che esistono anche questi tipi di configurazioni in modo tale da sapere dove poter cercare se ne avrai bisogno.

Come successo precedentemente, se desideri approfondire questi aspetti ti consiglio di consultare la pagina del progetto dedicata se invece desideri scoprire quali sono le configurazioni applicate alla tua installazione non devi far altro che eseguire questo comando:

$ npm config ls -l

I comandi più comuni e utili per npm

Come ti ho detto fin dall’inizio di questo articolo, npm è un utile comando da usare nel terminale e non ci è utile soltanto per installare nuovi pacchetti (come Gulp o Sass) che possono facilitarci il lavoro, ma ci aiuta anche a creare dei pacchetti che potremo caricare e distribuire!

Non è mio scopo dimostrarti come sia possibile creare e pubblicare un pacchetto perché per fare questo dovremo conoscere molto bene JavaScript ed essere in grado di creare qualcosa di veramente utile per la comunità.

Con questo non voglio dire che tu non sia in grado di farlo, soltanto che mi sembra uno scopo troppo avanzato per un articolo introduttivo.

Infatti come tale il mio interesse è quello di aiutarti a scoprire meglio questo strumento e facilitarti il duro impatto che generalmente si ha con gli strumenti da riga di comando.

Uno dei comandi più utili che possiamo avere quando ci sentiamo un po’ persi è sicuramente il comando npm help.

Grazie a questo possiamo avere, appunto, un aiuto che ci permetterà di capire meglio come sia possibile muovere i primi passi con questo package manager.

Prova adesso, apri il terminale e inserisci questo comando, sono sicuro che il tuo risultato sarà molto simile al seguente:

$ npm help

Usage: npm <command>

where <command> is one of:
    access, add-user, adduser, apihelp, author, bin, bugs, c,
    cache, completion, config, ddp, dedupe, deprecate, dist-tag,
    dist-tags, docs, edit, explore, faq, find, find-dupes, get,
    help, help-search, home, i, info, init, install, issues, la,
    link, list, ll, ln, login, logout, ls, outdated, owner,
    pack, prefix, prune, publish, r, rb, rebuild, remove, repo,
    restart, rm, root, run-script, s, se, search, set, show,
    shrinkwrap, star, stars, start, stop, t, tag, test, tst, un,
    uninstall, unlink, unpublish, unstar, up, update, upgrade,
    v, verison, version, view, whoami

npm <cmd> -h     quick help on <cmd>
npm -l           display full usage info
npm faq          commonly asked questions
npm help <term>  search for help on <term>
npm help npm     involved overview

Specify configs in the ini-formatted file:
    /Users/utente/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@2.11.3 /usr/local/lib/node_modules/npm

Eccoci di fronte a una schermata molto interessante dove viene mostrata la lista dei comandi più comuni.

Oltre a questo la risposta ci mostra anche come sia possibile ottenere l’aiuto di uno specifico comando, la posizione del file .npmrc per il nostro utente includendo la versione e la posizione dei moduli che potremo installare globalmente.

Adesso però è giunto il momento di elencare alcuni dei comandi che ritengo più utili quando si usa questo package manager:

• install – non potevamo certo partire se non da uno dei comandi più utilizzati, quello che ci permette di installare i vari pacchetti! Precedentemente hai visto che questo comando è in grado di installare pacchetti globalmente o localmente, ma la cosa che non ti ho ancora detto è che se utilizzato all’interno di una cartella che continene un file package.json sarà in grado di installare tutti i pacchetti dichiarati al suo interno (molto utile quando collaboriamo con progetti presenti in GitHub ).
• uninstall – dato che stiamo parlando di un gestore di pacchetti credo proprio che questo comando sia importante quanto il precedente. Grazie a questo infatti saremo in grado di gestire i pacchetti inseriti nella cartella node_modules/ sia localmente che globalmente.
• cache – molto utile quando utilizzato insieme al comando ls che ci permette di scoprire velocemente quali sono le versioni dei pacchetti installati nel nostro sistema e ci comunica la loro posizione. Se abbiamo bisogno di fare pulizia nel nostro sistema, questo è sicuramente un comando utile 😉
• search – hai bisogno di un pacchetto npm ma non ti ricordi il nome? Ecco un comando che fa al caso tuo, soprattutto quando devi scegliere il tipo di pacchetto che devi installare.
• outdated – lo scopo di un gestore di pacchetti, oltre a fornire un sistema semplice per installare nuove applicazioni, è sicuramente anche la possibilità di scoprire (e aggiornare) i pacchetti vecchi. Grazie a questo comando npm ci fornirà la lista di tutti i pacchetti che necessitano un aggiornamento e con l’opzione -g potremo controllare tutti i pacchetti installati globalmente.
• update – se con il comando precedente possiamo scoprire quali sono i pacchetti che necessitano un aggiornamento, con questo passiamo direttamente all’azione andando ad aggiornare i pacchetti necessari al progetto (all’interno della cartella) o globalmente (con l’opzione -g).

Questa è soltanto una piccola lista di tutti i comandi che puoi trovare nella pagina dedicata.

Se hai intenzione di creare i tuoi pacchetti troverai all’interno di questa lista comandi utili come build e publish, ma sono sicuro che con quelli appena elencati sarai in grado di muovere i tuoi primi passi per installare e mantenere aggiornati gli strumenti più utili per il tuo progetto.

Conclusioni

Siamo giunti alla conclusione di un articolo molto importante nella carriera di qualsiasi sviluppatore web, un articolo che ti ha introdotto a uno strumento in grado di velocizzare l’installazione e la configurazione di tutti i pacchetti che sono relativi a un progetto.

Giusto per fare qualche esempio concreto per scoprire che cosa puoi installare una volta che utilizzerai npm non devi far altro che controllare la pagina dei pacchetti che hanno ricevuto più stelle (votazioni da parte della community), proprio come succede in GitHub, per scoprire che possiamo avere a nostra disposizione Grunt, Gulp.js, React, Express.js, Underscore.js e molti altri.

Ci sono più di 400.000 pacchetti npm pronti da scoprire e installare, quindi hai soltanto l’imbarazzo della scelta!

Quali sono i tuoi pacchetti preferiti?

Personalmente ho iniziato a usare npm perché volevo usare Grunt e ultimamente mi trovo a usare sempre più spesso Gulp.js e i vari plugin che mi permettono di compilare il codice Sass che uso per costruire i vari progetti.

Ma non siamo qua a parlare di me, vorrei sapere da te se ci sono dei pacchetti che usi regolarmente o se questa è stata la prima volta che hai sentito parlare di npm.

Non ti preoccupare se è la prima volta, anzi grazie al tuo commento potremmo capire se questo argomento necessita di essere approfondito 😉