La gestion des librairies externes (javascript, css, font, …) d’un projet front end peut rapidement devenir contraignant. Il faut aller sur le site de chaque librairie pour télécharger les fichiers nécessaires et les copier dans votre arborescence projet. Sans compter sur la gestion des mises à jour et des dépendances.

Bower est un outil de gestion de librairies pour le web (NuGet est le pendant pour le monde .NET sachant que celui-ci n’est pas restreint aux librairies .net mais aussi les librairies front end comme jquery par exemple). Développé à l’origine par les équipes de Twitter, il est utilisé par de nombreux projets open source comme Bootstrap, Normalize, AngularJS, ….

La récupération des librairies se fait majoritairement sur Github via git, il faut donc que git soit installé sur votre poste.

Installation

Bower est basé sur Node.js et npm qui doivent également être installés sur votre machine. L’installation de Bower se fait via la commande suivante :

npm install -g bower

Bower est à installer en global via l’option -g afin de pouvoir l’utiliser sur tous vos projets.

Utilisation

Bower se base sur un fichier JSON, bower.json, qui va définir, à la manière d’un package.json en node.js, la liste des dépendances de votre projet.

Voici par exemple, le fichier bower.json pour ma page de gestion de score de volley, avec les dépendances vers jQuery, knockout et modernizr :

{
  "name": "Volley",
  "version": "0.2.0",
  "description": "Application de gestion de score de match de Volley",
  "main": "volley.html",
  "keywords": [
    "volley",
    "game"
  ],
  "authors": [
    "Julien Roy"
  ],
  "license": "MIT",
  "dependencies": {
    "modernizr": "~2.7.1",
    "jquery": "~1.7.2",
    "knockout.js": "~2.3.0"
  }
}

Bower va récupérer dans la plupart des cas, le projet entier de la librairie et le copier dans le répertoire des dépendances (par défaut bower_components).

Liste des commandes

Voici la liste des principales commandes de bower :

• install : installer toutes les dépendances du projet définies dans le fichier bower.json
• install package-name : installer une dépendance via son nom (il est possible de spécifier une version spécifique via #1.2.3 ). Utilisez l’option –save ou -S pour que la dépendance soit rajouté dans votre fichier bower.json
• update : mettre à jour les dépendances d’un projet
• search : rechercher des dépendances dans le répertoire de bower (possible de rechercher sur bower.io/search/).
• uninstall package-name : supprimer une dépendance du projet (avec –save ou -s pour supprimer du fichier bower.json).
• list : affiche la liste des dépendances

Configuration

Bower peut être configuré en utilisant un fichier JSON .bowerrc. Il permet de configurer par exemple le dossier dans lequel seront installées les librairies, le proxy à utiliser, ….

Voici mon fichier .bowerrc qui redéfinit le dossier dans lequel seront téléchargé les dépendances :

{
  "directory": "libs/"
}

Voici le lien vers la documentation.

Liens

• Bower pour les nuls (comme moi) sur alsacréations (inclus l’installation de git et node.js sous windows)
• j’ai essayé Bower, l’outil de gestion des dépendances front-end

Conclusion

Bower est un puissant outil de gestion de dépendances de projet web permettant de facilement installer un nombre impressionnant de librairies (prés de 7900 actuellement). N’hésitez pas à le coupler avec Grunt sur vos projets (déplacer vos dépendances dans un dossier build, concaténation, …).