Il codice utilizzato nella produzione è diverso dal codice di sviluppo. In produzione, è necessario creare pacchetti che funzionino velocemente, gestire le dipendenze, automatizzare le attività, caricare moduli esterni e altro ancora. Gli strumenti che consentono di trasformare il codice di sviluppo in codice di produzione sono chiamati tool di compilazione. Gli sviluppatori frontend lavorano principalmente con i seguenti tipi di strumenti di compilazione:
package managers,
task runners,
module loaders,
module bundlers,
etc…
In questo articolo potrai trovare raccolto i migliori strumenti di build che puoi utilizzare nello sviluppo frontend. Nota che tutti questi strumenti vengono eseguiti da riga di comando, quindi non sono dotati di un’interfaccia utente grafica.
1. NPM (PACKAGE MANAGER)
L’acronimo [npm][1] sta per Node Package Maid che è il gestore di pacchetti predefinito di Node.js. Quando [installi Node.js][2] sul tuo sistema, anche npm viene installato automaticamente e puoi accedervi dall’interfaccia da riga di comando. Con npm puoi installare qualsiasi pacchetto Node.js con un solo comando.
Puoi trovare tutti i pacchetti Node.js esistenti nel registro npm a cui puoi accedere tramite la barra di ricerca nella parte superiore della home page di npm. Devi solo digitare il nome del pacchetto che stai cercando (ad esempio ‘postcss’ ) nella barra di ricerca e verrai indirizzato alla pagina del pacchetto che include tutto ciò che devi sapere sul pacchetto, il suo processo di installazione e tutto delle sue dipendenze.
Caratteristiche principali:
Facile processo di installazione.
Software multipiattaforma (Windows, Linux, macOS, SmarOS e altro).
Centinaia di migliaia di pacchetti.
Gestione efficiente delle dipendenze tramite il file package.json.
Molteplici opzioni di configurazione (tramite riga di comando).
Ampia documentazione e utile community.
2. YARN (PACKAGE MANAGER)
[Yarn][3] è un gestore di pacchetti frontend che può essere utilizzato come alternativa a npm. Poiché Yarn stesso è un pacchetto Node.js, devi installare Node.js prima di poter utilizzare Yarn sul tuo sistema. Quindi, devi solo seguire la [guida all’installazione][4] per utilizzarla per gestire le dipendenze del frontend.
Sebbene npm sia un ottimo strumento, scoprirai che la creazione di pacchetti con esso a volte richiede molto tempo. Questo non è necessariamente un problema se non hai molte dipendenze da installare o non usi regolarmente un gestore di pacchetti. Tuttavia, se lavori su un progetto pesante, può essere una buona idea utilizzare Yarn permette tempi di costruzione ultraveloci.
Yarn velocizza il processo di compilazione memorizzando nella cache ogni pacchetto in modo da non dover scaricare le dipendenze più volte. Esegue anche operazioni parallele per ridurre ulteriormente i tempi di costruzione.
Caratteristiche principali:
Strumento multipiattaforma (Windows, Linux, macOS) con guide di installazione separate per ciascuna piattaforma.
Compatibile con tutti i pacchetti Node.js.
Tempi di build rapidi.
Modalità offline.
3. GRUNT (TASK RUNNER)
[Grunt][5] è un task runner frontend che ti consente di automatizzare attività ripetitive come minimizzazione, linting, test e altro. I task runner sono diversi dai gestori di pacchetti, poiché non puoi usarli per gestire le dipendenze. Ne hai bisogno solo se desideri eseguire le stesse attività durante ogni processo di compilazione.
Poiché Grunt è un pacchetto Node.js, puoi installarlo con npm, Yarn o un altro gestore di pacchetti Node.js. Grunt mantiene le dipendenze personalizzate necessarie per eseguire le attività predefinite nel file package.json . Puoi definire le tue attività nel Gruntfile ([vedi un esempio][6]) che viene eseguito durante ogni processo di compilazione ed esegue automaticamente ogni attività che include.
Caratteristiche principali:
Strumento da riga di comando multipiattaforma che funziona su qualsiasi sistema operativo.
Processo di configurazione semplice.
Enorme ecosistema con centinaia di plugin per aggiungere strumenti frontend (come Sass, Jade, JSHint, Handlebars, RequireJS e altri) che completano le attività preconfigurate.
Attività asincrone se necessario.
Ampia documentazione.
Ampiamente adottato.
4. GULP (TASK RUNNER)
[Gulp][7] è un altro task runner automatizzato e anche il più forte concorrente di Grunt. Simile a Grunt, puoi utilizzare Gulp per automatizzare attività front-end ricorrenti come la preelaborazione CSS, l’ottimizzazione delle immagini e molti altri. È anche un pacchetto Node.js che puoi installare con i gestori di pacchetti npm e Yarn. Puoi definire le tue attività in [Gulpfile][8] e configurare le tue dipendenze relative alle tue attività nel file package.json .
La più grande differenza rispetto a Grunt è che Gulp utilizza una tecnica di automazione più efficiente che consente tempi di costruzione più rapidi. Mentre Grunt utilizza i file temporanei per elaborare le attività, Gulp esegue operazioni in memoria senza scrivere in file temporanei. Queste operazioni in memoria sono chiamate [node streams][9] e possono farti risparmiare molto tempo, soprattutto se desideri elaborare più attività in ogni build.
Caratteristiche principali:
Task runner multipiattaforma che può essere installato come un normale pacchetto Node.js.
Utilizza i flussi Node per velocizzare le operazioni.
Enorme ecosistema con migliaia di plugin.
Base di codice di qualità utilizzando le best practice di Node.js.
Documentazione facile da seguire.
Superficie API minima per una semplice adozione.
5. BROWSERIFY (MODULE LOADER/BUNDLER)
[Browserify][10] è un caricatore di moduli Node.js che ti consente di raggruppare le tue dipendenze front-end e caricarle come un unico file JavaScript nel browser dell’utente. I gestori di pacchetti come npm e Yarn caricano i moduli sul lato server utilizzando la funzione [require()][11] di Node.js progettata per caricare i moduli. Browserify porta il metodo require() sul lato client, il che può comportare un enorme aumento delle prestazioni.
Con Browserify, il browser del tuo utente deve caricare un solo file JavaScript statico che contiene tutte le dipendenze su cui si basa il tuo progetto. Puoi aggiungere il tuo JavaScript in bundle come tag _
