Bower - Télécharger les libraires Javascript

Bower permet le téléchargement automatique des librairies Javascript.

En tappant la commande bower install jquery, la dernière version de la librairie JQuery sera téléchargée dans le répertoire bower_components à la racine de notre projet. Il est aussi possible d'indiquer la version de la librairie à télécharger.

Nous allons voir comment utiliser Bower dans notre projet.

Installation de Bower

Vous devez avoir installé Node.js sur votre poste pour bénéficier de la commande npm pour la gestion des packages Javascript.

Ensuite :

• Ouvrir un terminal de commandes
• Tapper la commande suivante :
•  npm install -g bower

Repository

Bower dispose d'un repository contenant les librairies Javascript :

• http://bower.io/search/?q=

Répertoire d'installation des librairies

Les librairies sont alors téléchargées dans le répertoire bower_components à la racine du projet.

Il est possible de spécifier le répertoire où seront téléchargées les librairies.

Utilisation

Nous pouvons effectuer l'installation d'une librairie Javascript sans avoir à configurer le projet, via les commandes suivantes :

Télécharger la version la plus récente

npm install [nom]

avec :

• [nom] : le nom de la librairie à télécharger

Exemple

npm install jquery

La dernière version de la librairie jquery est alors téléchargée (attention aux changements de version)

Télécharger une version spécifique

npm install [nom]#[version]

avec :

• [nom]#[version] : le nom et la version de la librairie à télécharger

Exemple

npm install jquery#2.1.0

La version 2.1.0 de jquery est téléchargée

Définir les librairies de notre projet

Créer le fichier "bower.json" via la commande "bower init"

Dans notre projet :

• Ouvrir un terminal de commandes
• Aller dans le répertoire racine du projet
• Tapper la commande suivante :
• bower init
• Renseigner les informations du projet
• Pour les questions de type Yes/No, laisser la réponse par défaut, appuyer sur entrée sans saisir de valeur
• Valider la création du fichier bower.json

Fichier bower.json

Voici un exemple de fichier bower.json généré par défaut :
Ce fichier contient les informations du projet.

Il est possible d'y déclarer les dépendances vers les librairies javascript.

Dans le fichier bower.json, ajouter les dépendances de la manière suivante :

Dépendances vers les librairies

  "dependencies": {
    "[librairie]": "[version]",
    "[librairie]": "[version]"
  }

Nous pouvons également indiquer les librairies utilisées uniquement pour les tests :

Dépendances vers les librairies de test

  "devDependencies": {
    "[librairie-test]": "[version]"
  }

Fichier bower d'exemple

Dans notre exemple, nous souhaitons récupérer jquery en version 2.1.0. Nous obtenons le fichier bower.json suivant :

Télécharger les dépendances

Nous pouvons maintenant tapper la commande suivante pour installer les dépendances définies dans le fichier bower.json :

bower install

Les librairies Javascript vont être téléchargées dans le répertoire bower_components.

Nous avons maintenant les librairies que nous pouvons inclure dans notre projet.

Inclure les dépendances dans le projet

L'étape suivante consiste à reprendre les librairies téléchargées par Bower et à les inclure dans notre projet.

Avec Grunt (présenté dans l'article Grunt - The JavaScript Task Runner - Installation et Utilisation) il est possible d'ajouter une tâche à l'aide du plugin grunt-bower-install qui consiste à ajouter les balises <script> pour inclure les dépendances Javascript directement dans les pages HTML.
Cette technique est utilisée dans le projet AngularJS généré par Yeoman. Mais, les librairies restent dans le répertoire de téléchargement de bower et non pas dans le projet lui-même.

Il est important de maîtriser les versions des librairies Javascript. C'est pourquoi, il vaut peut-être mieux dans un premier temps continuer à inclure manuellement les librairies dans notre projet en recopiant ce qui a été téléchargé par Bower dans les sources de notre application.

Conclusion

Bower permet de télécharger automatiquement les librairies Javascript.

Nous avons ensuite à les inclure dans notre projet.

Références

• Bower : Bower - A package manager for the web