Javascript: package manager, bundler e task runner

Chiunque abbia utilizzato negli ultimi anni Javascript in maniera perlomeno continuativa, si sarà certamente trovato di fronte a termini quali Browserify, Webpack, jspm, Grunt, Gulp ed altri simili. Ma di cosa si tratta? A cosa servono tutti questi strumenti dei quali si legge quasi sempre in termini entusiastici?

In questo post cercheremo di fare un po’ di chiarezza, per consentire a chi usa Javascript da poco (o semplicemente lo usa in termini amatoriali da molti anni) di capire cosa sono e a cosa servono i suddetti strumenti.

Vedremo, in particolare, quali sono e cosa fanno i principali package manager, i cosiddetti module loader o strumenti di bundling, ed infine alcuni task runner.

Package Manager

I package manager sono strumenti pensati per semplificare l’installazione e l’aggiornamento automatico delle librerie (o, per usare un termine più comune delle dipendenze) usate in un progetto Javascript. Per librerie (o dipendenze) si intendono tutte quelle parti di codice utilizzate che non sono state scritte direttamente da noi, ma che usiamo così come sono quando le scarichiamo. Esempi tipici sono quindi jQuery, Bootstrap, eccetera.

Poiché il processo di ricerca delle librerie, i relativi aggiornamenti, i download e lo spacchettamento dei file sono tutte operazioni semplici ma comunque laboriose e ripetitive, i package manager hanno l’obiettivo di semplificare notevolmente tutto ciò. Per farlo, offrono semplici comandi dal Terminale, che svolgono tutto il lavoro per noi.

Tra i più noti package manager ci sono:

• NPM (acronimo che sta per NodeJS Package Manager), che consente di definire in un solo file package.json una serie di dipendenze, che vengono poi installate automaticamente con il comando npm install. NPM può essere utilizzato sia per progetti di front-end, che per quelli di back-end;
• Bower, molto simile ad NPM, ma è specificamente pensato per i progetti da front-end. Le dipendenze sono installate tramite il comando bower install, dopo essere specificate in un file chiamato bower.json. Un breve approfondimento pratico sull’uso di Bower è disponibile su HTML.it;
• Yarn, package manager sviluppato da Facebook. Sebbene sia meno diffuso dei precedenti (semplicemente perché più recente), utilizza entrambi i registri di pacchetti di Bower ed NPM, e svolge più o meno le stesse funzioni dei precedenti;
• jspm, package manager per il module loader SystemJS, che utilizza i registri di GitHub e NPM.

Module Loader

In molti progetti Javascript, il codice è spesso diviso in diversi file. Questi sono poi utilizzati tramite una serie di tag <script>, uno per ogni file da caricare. Tuttavia, ogni tag <script> richiede una connessione HTTP, durante la quale non possono essere caricati altri contenuti della pagina. In poche parole, meno tag <script> sono presenti in una pagina, minore sarà il tempo di caricamento richiesto.

Per questo motivo è molto più conveniente “compattare” tutti i file in uno solo (“minificazione”). Le operazioni di minificazione consistono nell’applicare una serie di trasformazioni al codice che, pur mantenendone intatta la logica di funzionamento, modificano alcune stringhe, le indentazioni e i nomi di alcune variabili al solo fine di ridurre la dimensione del file (a spese della leggibilità).

I module loader si occupano proprio di generare gli script compattati e compressi, creando un singolo file pronto per l’inclusione in una pagina HTML. Tra i principali citiamo:

• RequireJS, module loader ottimizzato per essere utilizzato su browser, ma che si presta anche ad altri ambienti, come NodeJS. Una trattazione approfondita è disponibile su HTML.it;
• Bowserify si configura più come bundler che come module loader, nel senso che si occupa principalmente di unificare una serie di file Javascript (scritto in formato compatibile con CommonJS) utilizzando un singolo comando: browserify entry-point.js -o bundle-name.js;
• Webpack, concettualmente simile a Browserify, è in grado di includere in un singolo file anche immagini e file CSS (oltre che Javascript). Anche in questo caso, opera con un singolo comando: webpack ./entry-point.js bundle-name.js;

• SystemJS, module loader in grado di importare moduli a runtime, a differenza di quanto accadeva per Browserify e Webpack (che lavorano a build time, ovvero in fase di generazione del progetto).

Task Runner

Il principale motivo per cui esistono i task runner è la necessità di automatizzare l’esecuzione di alcuni tipici processi da eseguire a build time. A tale scopo esistono principalmente due strumenti: Grunt e Gulp.

Grunt permette di definire una serie di operazione come array di configurazioni di plugin, che vengono eseguite in maniera sequenziale. Un esempio di file Grunt è il seguente:

grunt.initConfig({
clean: {
src: ['build/app.js', 'build/vendor.js']
},
copy: {
files: [{
src: 'build/app.js',
dest: 'build/dist/app.js'
}]
}
concat: {
'build/app.js': ['build/vendors.js', 'build/app.js']
}
// ... other task configurations ...
});
grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

Gulp è concettualmente molto simile a Grunt, ma ultimamente lo si preferisce in quanto, anziché dover scrivere un serie di configurazioni di plugin, è possibile scrivere in Javascript come se si trattasse di un’applicazione per NodeJS. Anche in questo caso mostriamo un file di esempio:

//import dei plugin
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
//dichiarazione dei task
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});

Altri strumenti utili

Sebbene non rientrino in nessuna delle tre precedenti categorie, in questo contesto è bene citare anche Slush e Yeoman. In entrambi i casi, si tratta di strumenti che facilitano ed automatizzano la creazione di un nuovo progetto HTML/Javascript. Anziché doverci preoccupare noi di creare tutte le cartelle tipiche di un progetto web, quali img, css, scss, fonts.., questi software se ne occupano automaticamente con un singolo comando. Ad esempio, Yeoman può essere installato tramite NPM, ed immediatamente eseguito come segue:

npm install -g yo
npm install --global generator-h5bp
yo h5bp

Via StackOverflow