Tutoriel Vidéo Bower Le gestionnaire de paquet Bower

Télécharger la vidéo

Bower est un gestionnaire de paquet pour le Web qui offre une manière générique de gérer les différents modules nécessaire à la création d'un Front-end. Il permet en plus de cela de gérer de manière simple les dépendances de chaque module.

Un des avantages (et aussi son inconvénient) réside dans le fait que Bower peut transformer n'importe quel dépôt git et/ou fichier en paquet (plus ou moins bien organiser selon les développeurs...).

Installer Bower

Bower fonctionne avec l'aide de nodejs et npm. Une fois nodejs installé sur votre machine il vous suffit d'installer bower de manière globale : 

    npm install -g bower

Vérifiez par la même occasion que vous avez git d'installé sur votre machine pour pouvoir récupérer les dépôt provenant de ce système de versioning (installez msygit si vous êtes sur windows).

Installer des paquets

Commencez par vérifier que bower est bien fonctionnel à l'aide de la commande

bower help

Ensuite si vous souhaitez installer un paquet cela se fait simplement à l'aide de la commande

bower install <package>
bower install <package>#<version>
bower install <name>=<package>#<version>

Le peut prendre plusieurs format

  • Le nom du paquet disponible dans le registre Bower comme jquery par exemple
  • Un dépôt Git distant ou local
  • Un dépôt Github que l'on pourra noter de manière raccourcie utilisateur/paquet
  • L'url d'un fichier. Si ce fichier est un .zip ou .tar il sera alors automatiquement extrait.

Certains dépôt, notamment les dépôt git peuvent avoir un système de version. Préciser un numéro de version permet de télécharger le paquet correspondant à la version voulue. Si aucune version n'est précisée la dernière version sera alors téléchargée.

Comment je trouve mon paquet ?

Vous avez envie d'installer un super paquet mais vous ne savez pas si il existe dans le registre de Bower ? Rien de plus simple

bower search <name>

Vous fournira la liste des paquets disponibles.

Utiliser les paquets

Les paquets téléchargés avec bower install sont automatiquement organisés dans un dossier bower_components donc si vous installer jquery et que vous souhaitez l'utiliser il suffit de charger le fichier static : 

<script src="/bower_components/jquery/index.js"></script>

Bower n'est qu'un simple gestionnaire de paquet il ne vous permettra en aucun cas de charger dynamiquement les librairies installées (comme pourrait le faire composer pour PHP par exemple). Si vous travaillez sur un projet plus complexe qui utilise beaucoup de librairies vous pouvez mettre en place un système pour concaténer les fichier comme gulpjs ou gruntjs.

Et si je ne veux pas le dossier bower_components ?

Si vous êtes un maniaque de l'organisation vous pouvez placer les paquets dans un autre dossier que ce dossier bower_components. Pour cela il vous suffira de créer un fichier .bowerrc qui indiquera ou placer les fichiers téléchargés

{  
    "directory" : "js/libs",
    "json" : "bower.json"
}

Définir un paquet

Si votre module est distribué vous voulez peut être définir les dépendances utilisées dans un fichier afin que les autres développeurs puissent télécharger les dépendances de manière automatique. Pour cela vous avez besoin de créer un fichier bower.json à la racine de votre projet. Vous pouvez le créer de manière interactive en faisant :

bower init

Lorsque vous installez un nouveau paquet si vous souhaitez l'ajouter à votre fichier bower.json vous pouvez rajouter l'option --save

bower install jquery --save

Et voila vous savez utiliser bower !