Strumenti utili per sviluppare applicazioni React: NPM e Yarn

Nei precedenti articoli abbiamo visto vari aspetti di React e abbiamo introdotto alcuni dei concetti base della libreria. In questo articolo faremo una leggera deviazione di percorso, non parleremo direttamente di React ma tratteremo alcuni argomenti utili per lo sviluppo delle applicazioni in React e più in generale in Javascript. In alcuni dei precedenti articoli, abbiamo più volte fatto riferimento a NPM e abbiamo usato dei comandi del tipo "npm install…" senza spiegare di cosa si trattasse. In questo articolo faremo un po’ di chiarezza e parleremo in breve di NPM dato che lo utilizzeremo spesso a partire dai prossimi articoli. Chi ha familiarità con NPM può tranquillamente passare avanti in quanto è sicuramente già a conoscenza di tutto ciò che diremo. Per chi è comunque interessato, vediamo di capire innanzitutto di cosa stiamo parlando e partiamo con la prima domanda che vi sarà sicuramente venuta in mente quando avete letto la parola NPM.

Cos’è NPM?

NPM è un package manager per Javascript (simile a Bower o Composer per PHP o RubyGems per Ruby) che permette di organizzare, installare, riutilizzare e condividere del codice. Quando installarete Node.js verrà installato anche NPM. Attraverso l’uso del comando npm potremo cercare, utilizzare o pubblicare utility e librerie, detti package o pacchetti o moduli, che sono mantenuti all’interno di un registro consultabile anche sul sito npmjs.com. Una volta installato, possiamo subito usare il comando npm e accedere agli innumerevoli pacchetti realizzati dagli altri sviluppatori. Inoltre, creando un account su npmjs.com potremo iniziare a pubblicare i nostri package. In ogni caso, potremo innanzitutto utilizzare i package pubblicati da altri all’interno del nostro progetto senza dover riscrivere del codice che altri hanno ottimamente realizzato e testato.

…E Yarn?

Yarn è un altro package manager rilasciato da Facebook alla fine del 2016. Yarn non nasce con l’obiettivo di sostituire NPM, quanto con l’idea di risolvere alcuni dei problemi e difetti di npm. Yarn è in linea di massima più veloce di NPM (paragonando le due versioni di npm e yarn rilasciate al momento in cui questa guida è stata scritta). I comandi da usare sono simili o uguali a NPM. Yarn permette di usare il registro di pacchetti di NPM, ma permette di configurare e usarne anche altri. Usa lo stesso file package.json (vedremo a breve di cosa si tratta), ma implementa un sistema di cache che permette di reinstallare un package, già installato precedentemente, anche in assenza di una connessione a internet. Lanciando il comando yarn install l’output nella console contiene meno informazioni ed è più semplice da leggere. NPM adotterà probabilmente un output simile a partire dalle future versioni.

Nel resto di questo articolo useremo comunque NPM. Essendo molto simili, non risulterà complicato iniziare a usare Yarn, avendo una sufficiente conoscenza di NPM.

Installare Node.js e NPM

La prima cosa da fare è installare Node.js. Dal momento che il processo di installazione cambia fra i diversi sistemi operativi, non tratteremo l’argomento in questa guida. Potete però trovare maggiori informazioni sul sito di Node.js. Vi consiglio di dare uno sguardo anche a nvm (Node version manager) che vi permette di gestire diverse versioni di Node.js sulla stessa macchina. Una volta installato Node.js, potrete iniziare ad usare npm. Vi suggerisco di leggere anche la documentazione di NPM se doveste riscontrare l’errore EACCESS quando cercate di installare un pacchetto globalmente.

Introduzione a NPM

NPM fornisce un gran numero di comandi che possiamo utilizzare da linea di comando. Per prima cosa possiamo determinare quale versione è installata col comando npm -v (nel resto dell’articolo useremo il simbolo $ seguito dal comando che vogliamo eseguire):

$ npm -v
4.2.0

In caso non ricordiamo la sintassi di un comando o abbiamo bisogno di maggiori informazioni possiamo usare uno dei seguenti comandi:

$ npm <nome-comando-senza-parentesi-angolari> -h

# oppure

$ npm help <termine-da-cercare-senza-parentesi-angolari>

Possiamo cercare un package usando il sito internet di npm (https://www.npmjs.com) oppure da linea di comando.

# Vedere la documentazione per un elenco detagliato
# delle opzioni accettate dal comando search

$ npm search <nome-package-senza-parentesi-angolari>

Otterremo come risultato qualcosa simile all’immagine mostrata qui sotto in cui abbiamo cercato tutti i package contenenti la parola "serve".

NPM ci permette di installare i pacchetti globalmente o localmente. Solitamente, installeremo un package globalmente se vogliamo usarlo direttamente da linea di comando. Per esempio, negli articoli precedenti abbiamo usato il package serve da linea di comando per avviare un server locale. Abbiamo prima installato il package sul nostro computer.

$ npm install -g serve

# Al termine dell'installazione 
# potremo lanciare il comando serve

$ serve

In questo caso non abbiamo specificato una precisa versione per cui verrà installata l’ultima versione disponibile. Per installare globalmente una versione specifica useremo il seguente comando.

$ npm install -g nome-package@versione

La domanda che può sorgere spontanea a questo punto è dove viene installato il package. Possiamo scoprirlo lanciando il seguente comando:

$ npm config get prefix
/Users/claudio/.nvm/versions/node/v7.9.0

Otterremo un percorso a una directory all’interno della quale è solitamente presente una cartella bin in cui vengono installati gli eseguibili dei package che abbiamo installato globalmente (spesso in realtà è un link simbolico).

lrwxr-xr-x  /usr/local/bin/serve -> ../lib/node_modules/serve/bin/serve.js

Su Linux e macOS possiamo comunque eseguire il comando which:

$ which <nome-del-comando-senza-parentesi-angolari>

# per esempio per il package serve
$ which serve
/users/claudio/.nvm/versions/node/v7.9.0/bin/serve

Quando NPM installa un package, mantiene una copia all’interno di una cartella in modo che, se si esegue nuovamente il comando npm install, può essere usata direttamente la copia. Su Linux e macOS, questi file vengono salvati nella cartella ~/.npm, su Windows si trovano invece nella cartella %AppData%/npm-cache.

Riportiamo di seguito alcuni dei comandi per lavorare con i file nella cache.

# si può eliminare un file specifico passando il percorso al file
# o cancellare tutta la cache se non ciene passato nessun argomento
$ npm cache clean [<sottocartella-da-eliminare>]

# mostra i file nella cache
$ npm cache ls

Infine riportiamo alcuni dei comandi più utili per lavorare con i package a livello globale.

# Elenco dei pacchetti installati globalmente
# con l'opzione --depth=0 non vengono elencate
# le dipendenze dei singoli pacchetti
$ npm list -g --depth=0

# disinstallare un pacchetto
$ npm uninstall -g <nome-package-senza-parentesi-angolari>

# determinare quale pacchetti devono essere aggiornati
$ npm outdated -g --depth=0

# aggiornare un pacchetto
$ npm update -g <nome-package-senza-parentesi-angolari>

Il file package.json

È possibile installare un package all’interno di un determinato progetto. Quando si installa un package localmente, è opportuno creare all’interno del nostro progetto un file col nome package.json. Possiamo creare questo file manualmente o tramite il comando npm init. Ci verranno poste una serie di domande per la realizzazione del file package.json. Se vogliamo creare un file package.json contente i valori di default basta eseguire il comando npm init -y.

Vediamo rapidamente un esempio di package.json, per una spiegazione dettagliata potete consultare la documentazione.

{
  "name": "esempio",
  "version": "1.0.0",
  "description": "Descrizione concisa del progetto",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
    "test": "jest"
    "nome-di-uno-script-da-lanciare": "echo 'puoi lanciare un qualsiasi comando'"
  },
  "author": "Mario rossi <[email protected]>",
  "contributors": [{
    "name": "Francesco Bianchi",
    "email": "[email protected]"
  }],
  "license": "ISC"
}

All’interno del file il campo "name", che è obbligatorio, serve per specificare un nome del package. Il nome del package deve contenere solo caratteri minuscoli oppure i caratteri ‘-‘ (dash) o ‘_’ (underscore). Possiamo aggiungere una breve descrizione, il nome dell’autore del package e di eventuali persone che hanno contribuito alla realizzazione del progetto. È inoltre possibile specificare il tipo di licenza. Il campo "main" indica il file che viene effettivamente utilizzato quando importiamo il package in un altro progetto. Il campo "scripts" serve per indicare una serie di comandi e script che vogliamo eseguire. Possiamo, per esempio, eseguire "node index.js" lanciando il comando npm start o eseguire i test del nostro package attraverso npm test. È inoltre possibile eseguire un qualsiasi comando con npm run <nome-comando>. Per esempio possiamo eseguire:

$ npm run nome-di-uno-script-da-lanciare

> [email protected] nome-di-uno-script-da-lanciare /Users/claudio/esempio
> echo 'puoi lanciare un qualsiasi comando'

puoi lanciare un qualsiasi comando

Possiamo installare, aggiornare o cancellare un package all’interno del nostro progetto in maniera del tutto simile a come faremmo se dovessimo installarlo globalmente (elimineremo -g dal comando nel caso di installazioni locali).

Spostiamoci all’interno della cartella in cui abbiamo creato il file package.json e lanciamo i seguenti comandi.

$ npm install shallow-equal --save

$ npm install jest --save-dev

All’interno della nostra cartella troveremo ora oltre al file package.json, una cartella node_modules all’interno della quale vengono installati i nostri pacchetti. Se usiamo un software di controllo versione come Git, la cartella node_modules dovrà essere specificata all’interno del file.gitignore per comunicare esplicitamente a Git di ignorarla. Includeremo invece il file package.json. In questo modo, quando qualcuno copierà sul proprio computer la repository (per esempio eseguendo git clone), gli basterà eseguire npm install per installare tutti i package specificati fra le dipendenze all’interno del file package.json.

$ ls 
node_modules package.json

Se ora apriamo il file package.json, vediamo che sono stati aggiunti, fra le dipendenze del nostro progetto, i package jest e shallow-equal

{
  "name": "esempio",
  "version": "1.0.0",
  "description": "Descrizione concisa del progetto",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
    "test": "jest"
    "nome-di-uno-script-da-lanciare": "echo 'puoi lanciare un qualsiasi comando'"
  },
  "author": "Mario rossi <[email protected]>",
  "contributors": [{
    "name": "Francesco Bianchi",
    "email": "[email protected]"
  }],
  "license": "ISC",
  "dependencies": {
    "shallow-equal": "^1.0.0"
  },
  "devDependencies": {
    "jest": "^19.0.2"
  }
}

Attraverso le opzioni –save e –save-dev specifichiamo quali sono le dipendenze del nostro package; ‘devDependencies’ sono le dipendenze usate solo nella fase di sviluppo e test del nostro modulo. Quando qualcuno installerà il nostro pacchetto, npm installerà in automatico tutte le dipendenze necessarie. Ricapitolando quanto scritto sopra in merito a Git, una persona che ha accesso alla repository con il codice del nostro progetto, potrà scaricare i file in una cartella sul proprio computer e non avrà bisogno che fra i file scaricati ci sia anche la cartella node_modules perché, nel momento in cui lancerà il comando npm install, NPM provvederà a risolvere tutte le dipendenze presenti nel file package.json e creerà nuovamente una cartella node_modules contenente i file di tutti i package elencati fra le dipendenze.

Come usare i package installati

Una volta installati all’interno del nostro progetto, potremo usare i package in maniera diversa. Nel corso dei prossimi articoli, useremo la sintassi dei moduli definita in ES6. Per cui, supposto di aver installato React e ReactDOM con il seguente comando:

$ npm install [email protected] [email protected] --save

Importeremo React e ReactDOM nella nostra applicazione, nel seguente modo:

// file: App.js

import React from 'react';
import ReactDOM from 'react-dom';

// ... resto del codice

All’inizio del file in cui vogliamo usare React e/o ReactDOM, useremo il codice scritto sopra. Non dovremo specificare un percorso relativo o assoluto per i file da importare dal momento che abbiamo installato i due package usando NPM e i file di entrambi si trovano nelle rispettive cartelle all’interno della directory node_modules.

Vedremo già nel prossimo articolo come utilizzare il package create-react-app per semplificare la configurazione iniziale necessaria per creare delle applicazioni in React.