Petite astuce que faire lorsque vous rencontrez un fichier Bower

Avez-vous déjà cloné ou téléchargé un dépôt GitHub, pour trouver un certain nombre de fichiers étranges et superflus que vous ne reconnaissez pas?

Supposons, par exemple, que vous travaillez sur un site Web et que vous avez besoin d'une bibliothèque, JavaScript ou CSS, pour ajouter des fonctionnalités à votre projet. Vous trouvez la bibliothèque idéale dans un référentiel GitHub, vous la téléchargez donc tout de suite. Lorsque vous extrayez le package, vous découvrez plusieurs fichiers étranges, l’un d’eux étant bower.json.

En outre, vous avez peut-être également trouvé des instructions dans le référentiel qui disent généralement quelque chose comme:

Installer avec Bower: bower installer bootstrap.

Vous vous demandez peut-être à quoi sert ce fichier, sans parler de la raison pour laquelle vous devriez l'installer avec Bower. Un de mes amis concepteurs de sites Web m'a récemment posé ces mêmes questions et je suppose que beaucoup de gens se sentent aussi confus. Si vous faites partie de ces personnes, cette astuce devrait vous aider.!

Un fichier Bower

Bower est un gestionnaire de paquets pour le Web. Cela vous aide à gérer les dépendances. les fichiers (peut-être de tierces parties, souvent accessibles au public via GitHub) dont vous avez besoin pour votre projet.

bower.json, le fichier dont nous parlons ici joue un rôle central dans un environnement Bower. Auparavant, il s'appelait composant.json, mais le nom était ensuite changé en bower.json afin d'éviter tout conflit pouvant survenir avec les autres outils utilisant le même nom de fichier..

bower.json aide Bower à comprendre le projet; il enregistre des métadonnées telles que le nom du projet, la version, l'auteur, la licence, les dépendances, etc. Les informations sont structurées en JSON, qui se présente généralement comme suit:

"name": "génial", "version": "1.0.0", "auteurs": ["John Doe"], "description": "La chose la plus impressionnante du Galaxy", "licence": "MIT "," dépendances ": " cool-library ":" 1.1.2 "," bonne-bibliothèque ":" 2.1.3 " 

De ce fichier JSON lisible par l'homme, nous pouvons déduire que ce projet s'appelle "awesome", est actuellement à la version "1.0.0", a été écrit par "John Doe", quelques autres détails, et nécessite quelques dépendances être présent pour travailler.

Si vous trouvez bower.json dans une bibliothèque, cela implique deux choses:

• Tout d'abord, l'auteur du projet a défini la bibliothèque en tant que paquet Bower. Le projet a peut-être été publié dans le registre Bower, une collection centrale de packages, de sorte qu'il puisse être ajouté à votre projet via la ligne de commande Bower..
• L’auteur du projet peut avoir utilisé Bower pour organiser les bibliothèques du projet, ce qui facilite la tâche aux autres développeurs qui peuvent utiliser ou étendre le projet ultérieurement..

Bower utilise ce fichier de plusieurs manières. Il utilise les méta-détails pour afficher les informations sur le paquet lorsque nous effectuons une recherche dans le registre Bower.. 

Vous trouverez des projets familiers dans le registre Bower.

Bower analysera également le fichier lorsque nous exécuterons plusieurs commandes telles que version bower et bower installer.

Bower Installer

bower installer est la commande pour installer un package qui est enregistré dans le registre Bower. Cette commande installera également les packages répertoriés dans le fichier bower.json sous "dépendances". Par défaut, ces packages seront ajoutés dans un dossier nommé bower_components.

Par exemple, installons Animate.css et Bootstrap avec Bower.. 

Pour commencer, vous devrez réellement installer Bower. Découvrez Bower: un gestionnaire de paquetages pour le Web pour plus de détails. Ceci fait, vous pouvez taper la commande suivante dans le terminal ou l’invite de commande (si vous utilisez Windows) qui installe ces packages simultanément:

bower installer animate.css bootstrap

Maintenant, vous devriez les trouver ajoutés dans les composants de bower. 

Dossier Animate.css et Bootstrap ajouté dans bower_components

Comme vous pouvez le voir ci-dessus, nous avons un dossier supplémentaire, jquery. C'est parce que Bootstrap l'a défini comme dépendance; les composants JavaScript de Bootstrap nécessitent jQuery pour fonctionner. Si vous consultez le fichier bower.json inclus dans l’emballage, vous le trouverez à la fin du fichier, comme suit:.

jQuery est défini comme dépendance dans le fichier bower.json de Bootstrap

Et après?

En supposant que vous venez de télécharger une bibliothèque avec un fichier accompagnant bower.json, la première chose que je suggérerais est que vous inspectiez le fichier à la recherche de dépendances..

Par exemple, j'ai téléchargé une bibliothèque JavaScript appelée Revealer.js. Revealer.js a apparemment besoin de Reveal.js pour fonctionner. Nous pouvons le trouver répertorié comme une dépendance dans le fichier bower.json, comme indiqué ci-dessous:

//… "dépendances": "veve.js ":" ~ 2.5.0 ", //… 

Juste pour le confirmer, si nous ouvrons le fichier index.html à partir du vues dossier, nous allons trouver révéler.js le fichier est lié dans un scénario tag, comme si.

Nous devons maintenant ouvrir le dossier de la bibliothèque dans le terminal ou l'invite de commande, puis taper:

bower installer 

Comme mentionné précédemment, cette commande téléchargera tous les paquets enregistrés dans bower.json à la fois.. 

Remarque: Dans ce cas particulier, le package est ajouté dans le public / composants dossier, comme spécifié dans le .Bowerrc fichier. Un fichier .bowerrc accompagne parfois le fichier bower.json et est utilisé pour spécifier des répertoires d'installation personnalisés..

Mise à jour du paquet

Le paquet que nous avons installé peut être mis à jour au fil du temps, soit pour corriger les bugs, soit pour ajouter de nouvelles fonctionnalités. Avec Bower, la mise à jour de ces bibliothèques est un jeu d'enfant. Tout d'abord, tapons:

liste de la tonnelle 

Cela listera les paquets actuellement installés dans notre projet et montrera la dernière version disponible. Dans notre cas, il semble que Reveal.js ait une version plus récente. Alors, mettons à jour.

La nouvelle version de Reveal.js est disponible

Tapez cette commande pour mettre à jour Reveal.js.

bower installe --save révèle.js # 2.6.2 

Cela modifiera également la version enregistrée dans le fichier bower.json de notre projet..

//… "dépendances": "veve.js ":" 2.6.2 ", //…

Conclusion

Bower est un outil très pratique pour gérer les bibliothèques de projets. C'est un peu comme avoir notre propre AppStore ou Google Play; nous pouvons installer, mettre à jour et supprimer des bibliothèques facilement. J'espère que ce conseil vous a permis d'éviter toute confusion lors du téléchargement de bibliothèques tierces et de vous montrer les avantages de l'utilisation de Bower dans votre flux de travail..

Référence supplémentaire

• Site officiel de Bower
• Bower JSON Spécification
• Meet Bower: un gestionnaire de paquets pour le Web
• Un modèle de départ RequireJS, Backbone et Bower
• La différence entre Grunt, NPM et Bower (package.json vs bower.json)