Bower, le gestionnaire de packages du navigateur

Bower se définit comme un gestionnaire de packages de navigateur, et c'est un outil puissant pour gérer les actifs de votre projet: javascript, CSS et images.

Attention: cet article est ancien et peut ne pas refléter l'état actuel de la technique

Tonnellese définit comme un gestionnaire de packages de navigateur, et c'est un outil puissant pour gérer les actifs de votre projet:JavaScript, CSS et images. Ici, je ne parlerai que de JavaScript car c'est mon cas d'utilisation principal.

Commençons, installez-le.

npm install bower -g

Maintenant, créez un fichier .bowerrc dans la racine de votre projet (où vous appellerez bower) ou dans votre dossier personnel, et ajoutez une personnalisation: par exemple ici, nous disons à bower d'installer les packages dans le sous-dossier javascript / components, et d'utiliser un fichier nommé 'bower.json' pour stocker ses données.

{
  "directory" : "javascript/components",
  "json" : "bower.json"
}
The bower.json file is the same thing as the package.json file for npm packages in Node.js, except it’s for assets.


Let’s start by adding to your project something popular: jQuery.


You can install it by typing


bower install --save jquery


And by referencing the newly installed package in your HTML code:


<script src="javascript/components/jquery/jquery.js"></script>


The –save option tells bower to add the entry to the bower.json file, so it will be easy to recreate the same packages structure later, just like with NPM in Node.js.


Once this package is installed, it’s super easy to jump to a newer jQuery release:


bower update jquery


The bower project maintains a list of popular packages on their servers so you can install them easily. Here you can find a list of them, ordered by popularity.


Of course there are thousands of projects not included, and you can install every git-powered software by using the git:// protocol, like:


bower install git://github.com/desandro/masonry


or just any path


bower install http://foo.com/jquery.awesome-plugin.js


Bower is smart enough to install a specific tag or commit of a package you’re interested in, if you need a previous version for compatibility or you don’t need to upgrade to a newer package:


bower install git://github.com/components/jquery.git#~1.8.1


Uninstalling a packages is simple as well:


bower uninstall jquery


I really like using Bower especially when it comes to upgrade dependencies from time to time, instead of wandering across multiple Github projects (when we’re lucky enough to have a Github page), a simple bower update will take care of everything, except making sure everything still works on your project. That’s our job :-)

  

  




More devtools tutorials:

Tech Wiki en ligne!