ApprendreDébuter avec Bower

Il y a maintenant plus de bibliothèques et de frameworks disponibles pour le développement front-end que jamais auparavant. Il n’est pas rare d’avoir cinq ou plus de ces bibliothèques impliquées dans un seul projet. Mais garder la trace de toutes ces bibliothèques et s’assurer qu’elles sont à jour peut s’avérer délicat. Entrez dans Bower, un gestionnaire de paquets qui facilite la gestion de toutes les dépendances frontales de votre application.

Dans cet article de blog, vous allez apprendre à vous mettre en route avec Bower. Vous commencerez par installer l’utilitaire de ligne de commande Bower, puis vous poursuivrez en découvrant les différentes commandes disponibles pour gérer les paquets.

Démarrons !

Installation de Bower

Bower peut être installé à l’aide de npm, le gestionnaire de paquets de Node. Si vous n’avez pas déjà installé npm, rendez-vous sur le site web de Node.js et téléchargez la copie pertinente de Node.js pour votre système. Le programme npm est inclus dans l’installation de Node.js.

Une fois que vous avez installé npm, ouvrez un Terminal (ou une Invite de commande) et entrez la commande suivante :

npm install -g bower

Cela installera Bower globalement sur votre système.

Maintenant que vous avez installé Bower, nous pouvons commencer à examiner les commandes qui sont utilisées pour gérer les paquets.

Finding Packages

Il existe deux façons différentes de trouver les paquets Bower. Soit en utilisant le répertoire de composants en ligne, soit en utilisant l’utilitaire de ligne de commande.

Pour rechercher des paquets sur la ligne de commande, vous utilisez la commande search. Celle-ci doit être suivie de votre requête de recherche.

bower search <query>

Par exemple, pour rechercher des paquets qui contiennent le mot ‘jquery’, vous pouvez faire ce qui suit :

bower search jquery

Cette commande renvoie tout un tas de résultats, dont certains sont affichés dans le snippet ci-dessous.

Chaque résultat affiche le nom du paquet et un endpoint Git. Vous aurez besoin soit du nom, soit du point de terminaison Git pour installer un paquet.

Installation de paquets

Pour ajouter un nouveau paquet Bower à votre projet, vous utilisez la commande install. Il faut lui passer le nom du paquet que vous souhaitez installer.

bower install <package>

En plus d’utiliser le nom du paquet, vous pouvez également installer un paquet en spécifiant l’un des éléments suivants :

• Un point de terminaison Git tel que git://github.com/components/jquery.git
• Un chemin vers un dépôt Git local.
• Un point de terminaison raccourci tel que components/jquery. Bower supposera que GitHub est utilisé, auquel cas, le point de terminaison est la partie après github.com dans l’URL du dépôt.
• Une URL vers un fichier zip ou tar. Le contenu des fichiers sera extrait automatiquement.

Vous pouvez installer une version spécifique du paquet en ajoutant un dièse (#) après le nom du paquet, suivi du numéro de version.

bower install <package>#<version>

Les paquets installés seront placés dans un répertoire bower_components. Celui-ci est créé dans le dossier dans lequel le programme bower a été exécuté. Vous pouvez modifier cette destination à l’aide des options de configuration d’un .bowerrc fichier.

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

  Une fois installé, vous pouvez utiliser un package en ajoutant simplement une balise <script> ou <link> à votre balisage HTML. Bien que les packages Bower contiennent le plus souvent des fichiers JavaScript, ils peuvent également contenir des CSS ou même des images.

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

  Installation de packages à l’aide d’un fichier bower.json

  Si vous utilisez plusieurs packages au sein de votre projet, c’est souvent une bonne idée de lister ces packages dans un fichier bower.json. Cela vous permettra d’installer et de mettre à jour plusieurs paquets avec une seule commande.

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

  L’exemple simple ci-dessus montre un fichier bower.json qui définit certaines informations sur les projets ainsi qu’une liste de dépendances. Le fichier bower.json est en fait utilisé pour définir un package Bower, donc en fait vous créez votre propre package qui contient toutes les dépendances pour votre application.

  Les propriétés utilisées dans cet exemple sont expliquées ci-dessous.

  • name – Le nom de votre application/package.
  • version – Un numéro de version pour votre application/package.
  • dependencies – Les packages qui sont requis par votre application. Vous devez spécifier un numéro de version pour chacun de ces paquets, comme indiqué dans l’exemple ci-dessus. En spécifiant latest, Bower installera la version la plus récente d’un paquet.
  • private – Définir cette propriété à true signifie que vous voulez que le paquet reste privé et ne souhaitez pas l’ajouter au registre à l’avenir.

  Une fois que vous avez configuré votre fichier bower.json, vous pouvez simplement exécuter la commande bower install pour installer tous les paquets que vous avez spécifiés.

  Bower inclut un utilitaire pratique qui vous aidera à créer un fichier bower.json pour votre projet. L’exécution de la commande bower init à la racine de votre projet lancera un programme interactif qui créera le fichier pour vous. Cependant, vous pouvez toujours avoir besoin d’ajouter certains paquets au fichier vous-même.

  Note : Pour une liste complète des propriétés qui peuvent être ajoutées à votre fichier bower.json, consultez la spécification.

  Lister les paquets installés

  Vous pouvez facilement trouver quels paquets sont installés en utilisant la commande list.

  bower list

  Le snippet ci-dessous montre la sortie pour un projet simple qui utilise jQuery, Modernizr et Sass. Remarquez que Bower effectue également une vérification pour voir si une version plus récente de chacun des paquets est disponible.

  Mise à jour des paquets

  Mettre à jour un paquet est assez simple. Si vous avez utilisé un fichier bower.json, vous pouvez exécuter une simple commande update pour mettre à jour tous les paquets en même temps. Cependant, l’outil de mise à jour respectera les restrictions de version que vous avez spécifiées dans le fichier bower.json.

  bower update

  Pour mettre à jour un paquet individuel, vous utilisez à nouveau la commande update, en spécifiant cette fois le nom du paquet que vous souhaitez mettre à jour.

  bower update <package>

  Désinstallation de paquets

  Pour supprimer un paquet, vous pouvez utiliser la commande uninstall suivie du nom du paquet que vous souhaitez supprimer.

  bower uninstall <package>

  Il est possible de supprimer plusieurs paquets à la fois en listant les noms des paquets.

  bower uninstall jquery modernizr sass-bootstrap

  Pensées finales

  Les gestionnaires de paquets ont révolutionné la façon dont nous partageons le code. Ils ont rendu l’utilisation des bibliothèques de code plus facile que jamais, et ont enlevé une grande partie du mal de tête lié à la gestion des mises à jour.

  Pendant longtemps, les développeurs frontaux ont regardé des projets comme RubyGems avec envie ; souhaitant qu’un jour nous aussi ayons un moyen simple de gérer les dépendances des projets. Bower nous a fourni cet outil. Au fur et à mesure que de grandes bibliothèques deviennent courantes dans nos applications web, la complexité de nos projets augmente inévitablement. Bower nous fournit un moyen de gérer cette complexité.

  Liens utiles

  • Bower
  • Bower GitHub Repository
  • Bower Component Directory
  • bower
  • code
  • javascript
  • web app

  .