ImparaIniziare con Bower

Oggi ci sono più librerie e framework disponibili per lo sviluppo front-end che mai. Non è raro avere cinque o più di queste librerie coinvolte in un singolo progetto. Ma tenere traccia di tutte queste librerie e assicurarsi che siano aggiornate può essere difficile. Entra in scena Bower, un gestore di pacchetti che rende facile gestire tutte le dipendenze front-end della tua applicazione.

In questo post del blog imparerai come diventare operativo con Bower. Inizierai installando l’utilità a riga di comando Bower e poi andrai a conoscere i vari comandi disponibili per la gestione dei pacchetti.

Iniziamo!

Installazione di Bower

Bower può essere installato usando npm, il gestore di pacchetti di Node. Se non hai già installato npm, vai sul sito di Node.js e scarica la copia di Node.js adatta al tuo sistema. Il programma npm è incluso nell’installazione di Node.js.

Una volta che hai installato npm, apri il Terminale (o il Prompt dei comandi) e inserisci il seguente comando:

npm install -g bower

Questo installerà Bower globalmente sul tuo sistema.

Ora che avete installato Bower, possiamo iniziare a guardare i comandi che vengono utilizzati per gestire i pacchetti.

Cercare i pacchetti

Ci sono due modi diversi in cui potete trovare i pacchetti di Bower. Sia usando la directory online dei componenti, sia usando l’utilità della linea di comando.

Per cercare i pacchetti sulla linea di comando si usa il comando search. Questo dovrebbe essere seguito dalla tua query di ricerca.

bower search <query>

Per esempio, per cercare i pacchetti che contengono la parola ‘jquery’ potresti fare come segue:

bower search jquery

Questo comando restituirebbe un mucchio di risultati, alcuni dei quali sono mostrati nello snippet sottostante.

Ogni risultato mostra il nome del pacchetto e un endpoint Git. Avrai bisogno o del nome o dell’endpoint Git per installare un pacchetto.

Installazione di pacchetti

Per aggiungere un nuovo pacchetto Bower al tuo progetto usa il comando install. A questo va passato il nome del pacchetto che si vuole installare.

bower install <package>

Oltre a usare il nome del pacchetto, si può installare un pacchetto specificando uno dei seguenti:

• Un endpoint Git come git://github.com/components/jquery.git
• Un percorso a un repository Git locale.
• Un endpoint abbreviato come components/jquery. Bower assume che si stia usando GitHub, nel qual caso, l’endpoint è la parte dopo github.com nell’URL del repository.
• Un URL a un file zip o tar. Il contenuto del file sarà estratto automaticamente.

Puoi installare una versione specifica del pacchetto aggiungendo un segno cancelletto (#) dopo il nome del pacchetto, seguito dal numero di versione.

bower install <package>#<version>

I pacchetti installati saranno posti in una directory bower_components. Questa viene creata nella cartella in cui è stato eseguito il programma bower. Puoi cambiare questa destinazione usando le opzioni di configurazione in un file .bowerrc.

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.map
    • …
  • modernizr
    • modernizr.js
    • …

Una volta installato, puoi usare un pacchetto semplicemente aggiungendo un tag <script> o <link> al tuo markup HTML. Sebbene i pacchetti Bower contengano più comunemente file JavaScript, possono anche contenere CSS o persino immagini.

<script src="https://blog.teamtreehouse.com/path/to/bower_components/jquery/jquery.min.js"></script>

Installazione di pacchetti usando un file bower.json

Se stai usando più pacchetti nel tuo progetto, è spesso una buona idea elencare questi pacchetti in un file bower.json. Questo ti permetterà di installare e aggiornare più pacchetti con un singolo comando.

{ "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true}

Il semplice esempio sopra mostra un file bower.json che definisce alcune informazioni sui progetti così come una lista di dipendenze. Il file bower.json è effettivamente usato per definire un pacchetto Bower, quindi in effetti stai creando il tuo pacchetto che contiene tutte le dipendenze per la tua applicazione.

Le proprietà usate in questo esempio sono spiegate di seguito.

• name – Il nome della tua applicazione/pacchetto.
• version – Un numero di versione per la tua applicazione/pacchetto.
• dependencies – I pacchetti che sono richiesti dalla tua applicazione. Dovresti specificare un numero di versione per ognuno di questi pacchetti come mostrato nell’esempio sopra. Specificando latest, Bower installerà la versione più recente di un pacchetto.
• private – Impostare questa proprietà su true significa che si desidera che il pacchetto rimanga privato e non si desidera aggiungerlo al registro in futuro.

Una volta che hai impostato il tuo file bower.json puoi semplicemente eseguire il comando bower install per installare tutti i pacchetti che hai specificato.

Bower include una comoda utility che ti aiuterà a creare un file bower.json per il tuo progetto. Eseguendo il comando bower init alla radice del vostro progetto, verrà lanciato un programma interattivo che creerà il file per voi. Tuttavia, potresti aver bisogno di aggiungere tu stesso alcuni pacchetti al file.

Nota: Per una lista completa delle proprietà che possono essere aggiunte al tuo file bower.json controlla le specifiche.

Elenco dei pacchetti installati

Puoi facilmente scoprire quali pacchetti sono installati usando il comando list.

bower list

Lo snippet sottostante mostra l’output per un semplice progetto che usa jQuery, Modernizr e Sass. Notate che Bower fa anche un controllo per vedere se è disponibile una versione più recente di ogni pacchetto.

Aggiornamento dei pacchetti

Aggiornare un pacchetto è abbastanza semplice. Se hai usato un file bower.json puoi eseguire un semplice comando update per aggiornare tutti i pacchetti in una volta sola. Tuttavia, lo strumento di aggiornamento rispetterà le restrizioni di versione che hai specificato nel file bower.json.

bower update

Per aggiornare un singolo pacchetto usa di nuovo il comando update, questa volta specificando il nome del pacchetto che vuoi aggiornare.

bower update <package>

Disinstallazione dei pacchetti

Per rimuovere un pacchetto si può usare il comando uninstall seguito dal nome del pacchetto che si desidera rimuovere.

bower uninstall <package>

È possibile rimuovere più pacchetti contemporaneamente elencando i nomi dei pacchetti.

bower uninstall jquery modernizr sass-bootstrap

Pensieri finali

I gestori di pacchetti hanno rivoluzionato il nostro modo di condividere il codice. Hanno reso l’uso delle librerie di codice più facile che mai, e ci hanno tolto gran parte del mal di testa nel gestire gli aggiornamenti.

Per molto tempo gli sviluppatori front-end hanno guardato progetti come RubyGems con invidia; desiderando che un giorno anche noi avessimo un modo semplice di gestire le dipendenze dei progetti. Bower ci ha fornito questo strumento. Man mano che più grandi librerie diventano comuni tra le nostre applicazioni web, la complessità dei nostri progetti aumenterà inevitabilmente. Bower ci fornisce un modo per gestire questa complessità.

Link utili

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• code
• javascript
• web app