Introduction à l'utilisation de Bower avec WordPress

La majorité des projets Web actuels commencent ou incluent des bibliothèques tierces. Si vous travaillez sur un thème WordPress, il y a de fortes chances que vous utilisiez HTML5 Boilerplate, Bootstrap ou Foundation. La plupart de ces projets sont disponibles sur GitHub et accessibles via Bower..

Dans cette série, je vais vous présenter Bower, expliquer en quoi cela peut améliorer le développement de votre thème WordPress ou de vos plugins et vous montrer comment le configurer dans votre projet..

Qu'est-ce que Bower??

Qu'est-ce que Bower? Selon le site du projet:

Bower est un gestionnaire de paquets pour le Web. Il offre une solution générique et non optimisée au problème de la gestion des packages front-end, tout en exposant le modèle de dépendance des packages via une API pouvant être consommée par une pile de construction plus optimisée.

En gros, cela signifie que Bower vous permet de spécifier les bibliothèques (ou les packages) dont votre projet a besoin pour son développement. Il gère également quels autres projets ceux les projets ont besoin aussi et gère cela pour vous automatiquement.

Bower dépend de Node.js et de NPM pour fonctionner, vous devez donc vous assurer que ceux-ci sont installés sur votre ordinateur. Une autre exigence pour travailler avec Bower est que les référentiels doivent être sur GitHub et ajoutés au registre Bower..

Bibliothèques tierces

Comme je l'ai déjà mentionné, il y a de fortes chances que vous utilisiez une bibliothèque tierce dans votre projet. Vous êtes probablement allé sur GitHub et avez téléchargé le projet, puis placé les fichiers appropriés dans votre projet. Vous devez rincer et répéter pour chaque bibliothèque les besoins de votre projet..

Avec Bower, vous pouvez facilement installer (ou télécharger) ces bibliothèques tierces sans avoir besoin d'aller à GitHub. Toutes les bibliothèques que vous installez avec Bower seront placées dans un répertoire. bower_components dossier dans le dossier racine de votre projet. Tout cela peut être fait via la ligne de commande, il n'y a donc pas besoin de retourner à un navigateur.

Gérer les dépendances

Une autre grande caractéristique de Bower est qu’il gère les dépendances pour vous. Il examine tous les packages dont votre projet a besoin, ainsi que ceux dont ils ont besoin. Chaque package peut nécessiter une version spécifique d'un autre package, telle qu'une version spécifique de jQuery.

Ainsi, par exemple, supposons que votre projet nécessite jQuery. Vous décidez également d’utiliser Bootstrap et FitVids avec votre projet. Bower examinera tous les différents packages et toutes les versions des packages sur lesquels ils reposent et déterminera quelle version est nécessaire pour tous. S'il y a des conflits, Bower vous le fera savoir.

Qui veut garder une trace de toutes les versions requises de tout de toute façon?

Aucun projet de ballonnement

J'ai déjà mentionné que tous les paquets que vous installez seront placés dans un bower_components dossier. Vous pouvez accéder à tout ce qui se trouve dans ce dossier pendant votre développement local, mais vous n'avez pas besoin de l'ajouter au référentiel de votre projet..

Supposons que vous souhaitiez utiliser Bootstrap pour la mise en page de votre thème et que vous utilisiez Sass pour compiler vos feuilles de style dans le répertoire. style.css fichier. Vous pouvez utiliser le projet bootstrap-sass-official et simplement importer le bootstrap.scss déposer dans votre projet existant .scss des dossiers.

Je vais entrer dans plus de détails sur la façon de le faire dans un autre post.

Conclusion

J'ai parlé de ce qu'est Bower et de la manière dont cela vous aide à travailler avec des bibliothèques tierces dans votre projet. J'ai aussi parlé de la façon dont cela peut vous aider à gérer vos dépendances et à supprimer un peu de charge dans le référentiel de votre projet..

Dans le prochain article, je prévois de parler davantage de la façon dont cela peut améliorer votre développement WordPress. Que vous soyez le seul développeur ou que vous travailliez avec une équipe plus grande, vous verrez les avantages que cela présente pour vous..

Ressources

  • Boilerplate HTML5
  • Bootstrap
  • Fondation
  • Tonnelle
  • Node.js
  • MNP
  • GitHub
  • Bower Registry
  • FitVids
  • bootstrap-sass-official