Share
À mesure que la plate-forme Web a mûri, les outils de gestion de nos projets ont également évolué. Dans ce tutoriel, je vais vous présenter l'un de ces outils qui facilite considérablement la gestion des dépendances de votre projet: Bower.
Lorsque j'ai examiné Bower pour la première fois, je ne savais pas exactement comment il s'intégrerait: il ne s'agissait pas simplement d'un gestionnaire de paquets JavaScript, comme Jam, ni d'un chargeur de modules, comme RequireJS. Il s’appelle lui-même un gestionnaire de paquets pour le navigateur, mais que signifie exactement cela? Comment est-ce différent d'un gestionnaire de paquets JavaScript? La principale différence est que Bower ne gère pas uniquement les bibliothèques JavaScript: il gère tous les packages, même si cela signifie HTML, CSS ou des images. Dans ce cas, un paquet désigne tout code tiers encapsulé, généralement accessible au public depuis un référentiel Git.
Bower est juste un gestionnaire de paquets.
La chose importante à noter ici est que Bower est juste un gestionnaire de paquets, et rien d'autre. Il n'offre pas la possibilité de concaténer ou de réduire le code, il ne prend pas en charge un système de module tel qu'AMD: son seul but est de gérer les packages..
Assez bavardé: voyons comment cela fonctionne!
Bien sûr, avant de pouvoir utiliser réellement Bower, nous devons l’installer. C'est facile: utilisez NPM:
npm installer -g bower
Assurez-vous de l’installer globalement (avec -g), parce que cela est spécifique au projet.
Si vous ne connaissez pas le nom du paquet que vous voulez, vous pouvez trouver des paquets en utilisant le recherche de tonnelle commander. Si vous l'utilisez sans terme de recherche, vous obtiendrez une liste de tous les forfaits Bower disponibles. Pour les filtrer, utilisez un terme de recherche.
bower recherche bower recherche backbone bower recherche bootstrap
Si vous préférez effectuer une recherche via une interface graphique, rendez-vous sur http://sindresorhus.com/bower-components/.
Une fois que vous avez trouvé le paquet que vous voulez installer, utilisez simplement bower installer pour l'installer.
bower installer jquery bower installer backbone
Pour installer une version spécifique d'un paquet, indiquez le numéro de version, avec un hachage entre:
bower installer jquery # 1.7.0
Vérifiez que Composants dossier que Bower vient de créer pour nous. À l'intérieur, vous devriez voir trois dossiers: colonne vertébrale, jquery, et souligner. Underscore a été installé car il s’agit d’une dépendance de Backbone; c'est pratique! Ensuite, si vous comparez le contenu de ces dossiers avec leurs URL de référentiel (à partir de la recherche ou de la sortie d'installation), vous constaterez qu'ils sont exactement les mêmes. Cela illustre bien le fait que Bower est, à son niveau le plus fondamental, un raccourci pour Git.
Mais vous pouvez passer le bower installer commander d'autres choses aussi. D'après ce que nous venons de voir, il est logique d'utiliser une URL Git:
bower install git: //github.com/pivotal/jasmine.git
Vous pouvez également utiliser un lien vers un seul fichier:
bower installer http://backbonejs.org/backbone-min.js
Vous pouvez même installer un paquet depuis votre propre ordinateur: quelque chose sur lequel vous travaillez, peut-être:
bower install ~ / code / secretProject
Vous remarquerez peut-être dans la sortie du bower installer commande qu'il mentionne la mise en cache du paquet: il le fait en enregistrant une copie dans ~ / .bower /. Bower peut ensuite utiliser ce dépôt pour accélérer les installations ultérieures du même package..
Si la prochaine version d'une bibliothèque est disponible et que vous souhaitez la mettre à jour, vous pouvez le faire facilement en exécutant ceci:
mise à jour de bower
Notez que vous ne pouvez pas transmettre un nom de package au mettre à jour commande et ne met à jour que ce paquet individuel: il les mettra toujours à jour. Vous pouvez obtenir la dernière version d’un seul paquet en lançant bower installer ; il va simplement écraser la version que vous avez actuellement.
Si vos besoins changent, vous pouvez facilement désinstaller un paquet avec le désinstaller commander:
bower désinstaller jquery
Donc, nous avons nos paquets installés. Maintenant, nous voulons les utiliser. Rappelez-vous que Bower n’est qu’un gestionnaire de paquets, il n’ya donc pas de moyen spécifique à Bower d’utiliser ces paquets. Pour le moment, nous allons simplement nous en tenir aux anciennes balises de script habituelles:
Ouvrez-le dans un navigateur et vous verrez le texte “JQUERY!”; c'est le signe que ça marche!
Comme je l'ai mentionné ci-dessus, Bower ne dispose pas d'un système permettant de charger des packages sur votre page, mais cela ne signifie pas que vous ne devriez pas en utiliser. Bower n'a pas d'opinion et vous laisse le choix de la méthode avec laquelle vous êtes le plus à l'aise. Peut-être que plusieurs balises de script concaténent et minimisent au moment de la construction. Peut-être que c'est RequireJS (que nous pouvons obtenir, via Bower). Peut-être que ce soit Sprockets ou un autre système de packaging d’actifs côté serveur. C'est complètement à vous.
Il y a quelques autres commandes Bower que vous devriez connaître. Premier, liste de la tonnelle ou bower ls listera les paquets que vous avez actuellement installés.
Notez que cela ne signifie pas que jQuery est installé deux fois. cela signifie que jQuery est une dépendance de 'sayHi' (un paquet que nous construirons plus tard).
Si vous souhaitez voir l’URL du référentiel référencée par un package donné, utilisez la commande Bower Lookup commande, en utilisant le nom du paquet comme argument:
le info de la tonnelle La commande vous indiquera quelles versions d'un paquet sont disponibles:
Enfin, pour supprimer tous les packages mis en cache dans ~ / .bower, courir bower cache-clean:
Accentsconagua
composant.json Fichierle composant.json Le fichier est une partie importante des paquets Bower. Nous verrons ensuite comment créer un paquet; mais d'abord, regardons comment nous pouvons utiliser un composant.json fichier pour faciliter l'installation des packages pour un projet (non-package).
Bower utilise seulement quatre propriétés dans le composant.json fichier. Le premier est le nom du projet; assez simple.
"name": "MyProject"
Suivant est un numéro de version:
"name": "MyProject", "version": "0.0.1"
le principale Cette propriété sert à définir les composants de votre composant, mais comme nous ne construisons pas encore de composant, nous y reviendrons. La propriété finale est les dépendances, qui décrit quels paquets notre composant (ou dans ce cas, notre projet) dépend. C'est un objet; et pour chaque propriété, la clé est le nom du package et la valeur est la version.
"name": "MyProject", "version": "0.0.1", "dépendances": "backbone": "latest", "requirejs": "2.1.1"
Maintenant, si vous créez un dossier de projet et mettez ce qui précède dans votre composant.json fichier, nous pouvons installer tous les composants simplement en exécutant:
bower installer
Et maintenant tous nos paquets sont installés. Si nous voulons par la suite installer d’autres packages et les inclure dans notre composant.json, nous pouvons utiliser le --enregistrer drapeau.
bower installer jquery --save
Maintenant, vous pouvez ouvrir notre composant.json fichier et voir qu'une entrée pour jQuery a été ajouté à notre les dépendances objet.
Terminons ce didacticiel en construisant un package très simple et en l’installant via Bower. Ce sera un paquet assez dépourvu de sens, mais il couvrira presque toutes les étapes du processus de création d’un paquet..
Construisons un paquet super simple.
Créez un répertoire de projet, appelé dis salut. Dans ce cadre, nous commencerons par notre composant.json fichier. Vous connaissez toutes les propriétés, sauf principale.
"nom": "SayHi", "version": "1.0.0", "main": "./sayhi.js", "dépendances": "jquery": "dernière"
le principale propriété doit être le chemin du fichier principal qui compose votre paquet; Si vous avez plusieurs fichiers, vous pouvez le définir sur un tableau de chemins. Pour être honnête, je ne suis pas tout à fait sûr de ce que cela fait. Vous n'êtes autorisé à avoir qu'un fichier de chaque type (donc, un fichier .html fichier, ou un .js fichier) dans votre principale tableau, et Bower téléchargera toujours le référentiel entier, et pas seulement les fichiers principaux lors de son installation. Je ne trouve pas de documentation indiquant clairement à quoi elle sert, mais je peux trouver d'autres personnes qui se demandent la même chose. Peut-être sera-t-il utilisé dans les futures versions de Bower. Si vous avez des informations à ce sujet, veuillez laisser un commentaire ci-dessous!
Quoi qu'il en soit, il est maintenant temps de créer le référentiel Git.
git init git add composant.json git commit -m 'ajouté composant.json'
Comme vous l’avez vu, lorsque nous installerons les dépendances de notre paquet en cours de développement, nous aurons une Composants dossier dans notre repo. J'ai examiné plusieurs pensions de composants différents, et aucun d'entre eux n'a cette Composants dossier vérifié, donc nous allons l'ajouter à la .gitignore fichier; les dépendances seront automatiquement installées lorsqu'un utilisateur installera notre paquet. Lors du développement pour Node.js, nous faisons la même chose avec le node_modules dossier et le package.json fichier.
Donc, dans un .gitignore fichier:
Composants
Et alors:
git ajoute .gitignore git commit -m 'ajout du fichier .gitignore' bower install
Maintenant, nous pouvons écrire notre sayhi.js code:
fonction sayHi (sélecteur) var el = $ (sélecteur); fonction de retour (nom) el.text ("Hi" + nom + "!"); C'est assez simple. nous passons juste le dis salut fonctionne comme un sélecteur pour un élément et renvoie une fonction qui peut prendre un nom et écrire le message dans cet élément. Je l'ai fait de cette façon parce que cela nous permet de «mettre en cache» l'élément et parce que cela rend le code un peu plus intéressant.
Ok, maintenant nous devons le commettre:
git add sayhi.js git commit -m 'a ajouté sayhi.js'
La dernière étape consiste à ajouter une balise Git avec le numéro de version, car c'est ainsi que Bower distingue la version:
balise git -a 1.0.0 -m 'sayHi v1.0.0'
La prochaine étape consisterait à pousser ce référentiel sur GitHub, puis à enregistrer le package auprès de Bower. L'inscription est simple: utilisez le registre de la tonnelle commande, en lui transmettant le nom que vous souhaitez attribuer à votre paquet, ainsi que l'URL git du référentiel:
bower register packageName git: //votre/git/url.git
Je ne vais pas faire cela, car c'est un paquet inutile. Mais rappelez-vous que nous pouvons également utiliser Bower pour installer un package local. Ce que je vais faire, pour simuler le plus fidèlement possible GitHub, est de créer un clone nu de ce référentiel (GitHub stocke les repos nus)..
git clone --bare path / to / sayHi chemin / to / sayHi.git
Créez un nouveau dossier de projet en dehors de votre dis salut dossier, CD dans, et essayez ceci:
chemin d'installation bower / to / sayHi.git
La sortie devrait vous dire que le logiciel s’est bien installé et que jQuery a également été installé. Vous pouvez voir que c'était le cas en regardant à l'intérieur du Composants dossier.
Maintenant, nous pouvons utiliser le code dans un index.html fichier:
Ouvrez-le. Ça marche!
Configurez Bower en créant un
.Bowerrcfichier.
Vous ne pouvez pas faire grand chose pour configurer Bower, mais il existe quelques petites choses. Configurez Bower en créant un .Bowerrc fichier dans votre répertoire personnel. C'est un fichier JSON avec une combinaison de ces trois propriétés:
annuaire: le nom du répertoire des composants; par défaut à Composants.JSON: le nom du fichier de composants; par défaut à composants.json.point final: Cela vous permet d’exécuter votre propre serveur Bower afin de servir des packages personnalisés derrière un pare-feu. Vous pouvez obtenir une implémentation simple d’un serveur Bower sur Github..Par exemple:
"répertoire": "packages", "json": "libraries.json"
Si vous avez consulté d'autres gestionnaires de paquets, vous vous demandez peut-être ce qui est fascinant chez Bower, en particulier lorsqu'il semble manquer de nombreuses fonctionnalités. J'ai eu la même question, aussi. Mais après avoir compris comment utiliser Bower, cette ligne de la FAQ a eu beaucoup plus de sens:
Bower est un composant de niveau inférieur à Jam, Volo ou Ender. Ces gestionnaires pourraient consommer Bower comme dépendance.
Ainsi, même si vous n'utilisez pas Bower seul, il est bon de connaître les commandes, car d'autres outils seront construits autour de celle-ci. En fait, le nouveau et déjà populaire Yeoman utilise Bower pour la gestion des paquets. Si vous ne connaissez pas encore Yeoman, c'est la prochaine étape après avoir lu cet article.!
Voilà donc Bower, le gestionnaire de packages pour navigateurs totalement sans opinion! Whaddaya pense? Est-ce une bibliothèque que vous utiliserez ou pourriez-vous vous en passer? Écoutons cela dans les commentaires.
