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 sta per Node Package Maid che è il gestore di pacchetti predefinito di Node.js. Quando installi Node.js 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 è 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 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 è 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) 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 è 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 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 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 è 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() 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 script alla tua pagina e sei a posto. Tuttavia, tieni presente che poiché Browserify è un modulo Node.js e un’implementazione dell’API CommonJS (simile a npm), puoi utilizzarlo solo per caricare moduli Node.js ma non altri tipi di file JavaScript (o altri).
Caratteristiche principali:
- Raggruppa tutte le dipendenze di Node.js in un unico file.
- Velocizza le applicazioni modulari che si basano su più moduli Node.js.
- Consente requisiti esterni (è possibile richiedere moduli da altri tag script ).
- Consente di dividere i pacchetti, se necessario.
- Esclude, ignora e trasforma le funzionalità.
- Documentazione dettagliata e utile manuale di Browserify .
6. WEBPACK (MODULE LOADER/BUNDLER)
Webpack è un bundler di moduli avanzato che ti consente di raggruppare tutte le tue dipendenze e caricarle come risorse statiche nel browser dell’utente. Mentre Browserify raggruppa solo i moduli Node.js, Webpack può gestire qualsiasi tipo di file front-end come file .html , .css, .js, .scss , immagini e altre risorse.
Oltre ai moduli CommonJS utilizzati nell’ecosistema Node.js, Webpack può anche raggruppare moduli ECMAScript e AMD nativi (altre specifiche del modulo JavaScript). Webpack analizza il tuo progetto e crea un grafico delle dipendenze. Quindi, in base al grafico delle dipendenze, raggruppa i tuoi file e moduli in uno o più file statici che puoi aggiungere alla tua pagina HTML.
Poiché Webpack stesso è anche un modulo Node.js, puoi installarlo con npm o con il gestore di pacchetti Yarn.
Per impostazione predefinita, la configurazione dei progetti Webpack richiede molto tempo a causa delle molteplici opzioni che consentono di perfezionare il progetto. Tuttavia, dal Webpack 4, include un’opzione di configurazione zero che automatizza il processo di compilazione e richiede solo la definizione del file di immissione.
Caratteristiche principali:
- Molteplici opzioni di configurazione.
- Codice suddiviso in blocchi più piccoli che possono essere caricati in modo asincrono.
- Supporto per mappe di origine.
- Opzione di configurazione zero (dal Webpack 4).
- Enorme ecosistema con una ricca interfaccia di plugin.
CONCLUSIONE
Gli strumenti di compilazione frontend ti aiutano a trasformare il codice di sviluppo in codice pronto per la produzione che può essere eseguito su qualsiasi dispositivo o piattaforma senza problemi. In questa raccolta, abbiamo esaminato gli strumenti di compilazione più adottati che puoi utilizzare nel tuo progetto Web, inclusi gestori di pacchetti, task runner e caricatori/bundler di moduli.
Oltre alle soluzioni ampiamente adottate, ci sono anche (relativamente) nuovi strumenti sul mercato che stanno guadagnando costantemente terreno, come il gestore di pacchetti pnpm (un’alternativa a npm e Yarn), il bundle di moduli Parcel (un’alternativa a Webpack) e il bundler di moduli Rollup ES (simile a Browserify ma raggruppa i moduli ECMAScript invece di quelli CommonJS). Se sei alla ricerca di nuove soluzioni, vale la pena dare un’occhiata anche a questi nuovi strumenti.
L’aggiunta di nuovi strumenti al tuo flusso di lavoro può portare il tuo processo di sviluppo a un livello superiore.
Come sempre, Buon Codice!