Gérer les librairies Javascript avec Bower


bower

Peut-être vous êtes vous déjà lancé dans une montée de version de librairies Javascript. Ou pire encore, vous êtes actuellement entrain de le faire !

Lâchez votre clavier, allez vous cherchez un café et lisez cette article. Il vous aiderait peut-être à réaliser cette tâche ingrate et vous simplifiera la vie pour la prochaine fois que vous aurez à le faire !

 

Introduction

La majorité des technologies disponibles sur le marché possèdent un package manager. Si vous faites du .Net vous connaissez bien évidement NuGet. En Node c’est NPM qui fait ce travail pour vous. Ce genre d’outil est pratique car il dispense de faire à la main la gestion des dépendances de votre projet, mais aussi les dépendances des bibliothèques tierces. C’est un bon moyen d’éviter de connaitre l’enfer (rappelez vous le DLL HELL…). J’aime souvent à me dire que sans ce genre d’outil, gérer cette problématique revient à monter sur le radeau de la méduse !

Dans le cas de Javascript les choses étaient compliquées jusqu’à ce que Twitter se colle sur le sujet et fournisse Bower, un manager entièrement dédié aux librairies Javascript clientes.

Ce gestionnaire de package fonctionne à la manière de NPM et repose sur GitHub comme repository de librairies.

 

Installation

Bower fonction grâce à Node.js et est disponible sous la forme d’une CLI (command line interface). Avant d’installer Bower il vous faut donc installer Node.js. Une fois Node installé ouvrez un terminal et tapez la commande suivante :

Comme je l’ai déjà expliqué dans mon article sur Sails.js (à lire ici) l’argument -g de la commande permet d’installer Bower dans les packages globaux de Node afin de pouvoir l’utiliser partout !

A présent Bower est utilisable directement depuis votre terminal via la commande :

 

Configuration

Avant tout chose pour utiliser Bower dans votre projet il faut que celui-ci soit bower compliant. Par défaut Bower ne connait pas l’emplacement de stockage des packages Javascript dans votre projet. Si vous lancez l’installation d’une librairie il utilisera par défaut le répertoire bower_components à la racine de votre projet. Pour éviter cela ajoutez un fichier .bowerrc à la racine du projet et spécifiez le répertoire de destination des librairies :

Ce fichier contient aussi une information sur le fichier json utilisé par Bower pour gérer les packages. Voici le contenu d’un fichier bower.json avec une gestion de dépendance sur Angular :

Les Nodeurs auront surement reconnu la structure du json qui est similaire à celle contenue dans le fichier package.json utilisé par NPM.

 

Utilisation de la CLI

Bower est une manager particulièrement bien documenté sur le web. Plutôt que de faire l’énumération de toute les commandes contenues dans la documentation de l’API je vous propose une découverte des plus utiles !

Pour commencer vu que vous avez définit une dépendance sur Angular dans le fichier bower.json, ouvrez votre terminal, mettez vous à la racine du projet et tapez :

Les dépendances downloadées se trouvent à présent dans le répertoire angular contenu dans le chemin que vous avez définit dans le fichier .bowerrc.

Si vous voulez désinstaller la librairie il suffit de taper :

Avant d’installer un package, vous pouvez vérifier si il est disponible via la commande :

Pour installer une librairie, rien de plus simple :

Par défaut Bower va aller chercher la librairie sur Github mais il est possible d’aller récupérer le package sur une autre url (path Github spécifique, répertoire privée …). Il est donc possible d’aller chercher la librairie Angular directement sur Git via la commande :

Ce mode d’installation n’est pas recommandé mais il peut avoir son utilité dans certains cas (ici le choix est discutable car Bower va faire un checkout complet du repository Git d’Angular dans le projet).

Par défaut Bower fait l’installation mais n’ajoute pas la dépendance dans le fichier bower.json. Il convient d’utiliser l’argument save pour le faire :

Autre détail qui peut avoir son importance avant la mise en production, il est possible de spécifier des dépendances de développement. Lors de l’installation il faudra alors utilise l’argument save-dev :

Une fois l’application déployée, la récupération des packages en production se fait via la commande :

ou pour mettre à jour les dépendances :

Dans ce cas précis Bower installera / mettera à jour uniquement les packages qui n’ont pas été déclarés dans les dépendances de développement.

Nota : les arguments save et save-dev sont aussi utilisables avec la commande uninstall pour les rétirer du fichier bower.json

Pour finir il possible de spécifier explicitement une version de librairie à downloader :

Voilà pour ce tour rapide des commandes les plus utiles de Bower. Il existe d’autres petites subtilités, je vous laisses les consulter dans la documentation en ligne (ici).

 

Bower API

Il est possible de manipuler Bower directement via du code Javascript sous Node. On peut imaginer l’utilisation de bower en combinaison d’un Tasks Manager pour de l’industrialisation. Les cas d’utilisations restent rares, mais les développeurs de Bower ont  laissé la porte ouverte. Il faut en premier lieu récupérer Bower dans votre projet via NPM :

Ensuite ajouter la CLI Grunt dans les packages globaux de Node :

Nota : Si vous ne connaissez pas le fonctionnement de Grunt je l’aborderais bientôt sur le blog

Pour vous montrer une utilisation de l’API Bower voici une tâche Grunt mettant à jour chaque dépendances du projet :

L’intérêt de cette exemple est discutable car il revient à faire exécuter dans votre terminal une commande update, c’est donc plus un prétexte pour vous montrez qu’il est possible d’aller plus loin avec cette technologie.

 

Conclusion

Bower est une technologie très simple d’utilisation et qui fonctionne comme NPM. C’est une aide précieuse pour gérer les dépendances dans vos projet et je vous encourage fortement à l’utiliser si vous ne voulez pas souffrir lors de la prochaine montée de version de vos librairies Javascript (ou au moins testez le ;-p) !

1 commentaire(s)

Commentez cet article