Share
Pe măsură ce platforma web a ajuns la scadență, instrumentele pentru gestionarea proiectelor noastre s-au maturizat. În acest tutorial, vă prezint unul dintre aceste instrumente care face considerabil mai ușoară gestionarea dependențelor proiectului dvs.: Bower.
Când am privit mai întâi în Bower, nu știam exact cum se potrivește: nu era doar un manager de pachete de JavaScript, cum ar fi Jam, și nu era un modul de încărcare a modulelor, cum ar fi RequireJS. Se numește un manager de pachete de browser, dar ce anume înseamnă asta? Cum diferă de managerul de pachete JavaScript? Principala diferență este că Bower nu se ocupă doar de bibliotecile JavaScript: va gestiona orice pachete, chiar dacă aceasta înseamnă HTML, CSS sau imagini. În acest caz, a pachet înseamnă orice cod încapsulat, terță parte, de obicei accesibil publicului dintr-un depozit Git.
Bower este doar un manager de pachete.
Lucrul important pe care trebuie să-l observăm aici este că Bower este doar un manager de pachete, și nimic altceva. Nu oferă posibilitatea de a concatena sau de a micșora codul, nu suportă un sistem de module precum AMD: scopul său unic este de a gestiona pachetele.
Destul de bine: să vedem cum funcționează acest lucru!
Desigur, înainte de a putea folosi Bower, va trebui să o instalăm. Acest lucru este ușor: utilizați NPM:
npm install -g bower
Asigurați-vă că îl instalați la nivel global (cu -g), deoarece aceasta este specifică proiectului.
Dacă nu cunoașteți numele pachetului pe care îl doriți, puteți găsi pachetele utilizând căutare caută comanda. Dacă o utilizați fără un termen de căutare, veți obține o listă cu toate pachetele de bower disponibile. Pentru a le filtra pe acestea, utilizați un termen de căutare.
Bower căutare capete de căutare backbone bower căutare bootstrap
Dacă preferați să căutați printr-o interfață grafică, accesați http://sindresorhus.com/bower-components/.
Odată ce ați găsit pachetul pe care doriți să îl instalați, trebuie doar să îl utilizați bower install pentru ao instala.
bower instalează jquery bower instalează coloana vertebrală
Pentru a instala o versiune specifică a unui pachet, includeți numărul versiunii după acesta, cu un hash între:
bower instalează jquery # 1.7.0
Verifică asta componente dosar pe care Bower tocmai la creat pentru noi. În interiorul acestuia, ar trebui să vedeți trei dosare: șira spinării, jquery, și sublinia. Au fost instalate subanscore, deoarece este o dependență a Backbone; este util! Apoi, dacă comparați conținutul acestor dosare cu adresele URL ale repozitoriilor (din ieșirea de căutare sau de instalare), veți vedea că acestea sunt exact aceleași. Acest lucru ilustrează bine faptul că Bower este, la nivelul său cel mai de bază, o scurtă durată pentru Git.
Dar poți să treci bower install și alte lucruri. Pe baza a ceea ce am văzut, este logic să utilizați o adresă Git:
bower instalează git: //github.com/pivotal/jasmine.git
De asemenea, puteți utiliza un link la un singur fișier:
bower install http://backbonejs.org/backbone-min.js
Puteți instala chiar un pachet de pe calculatorul propriu: ceva pe care lucrați, probabil:
bower instalare ~ / code / secretProject
S-ar putea să observați în ieșirea din bower install comanda că menționează cache-ul pachetului: face acest lucru salvând o copie a acestuia ~ / .Bower /. Bower poate folosi acest repo pentru a accelera instalările ulterioare ale aceluiași pachet.
Dacă viitoarea versiune a unei biblioteci iese și doriți să o actualizați, puteți face acest lucru ușor prin rularea acesteia:
bower update
Rețineți că nu puteți trece numele unui pachet la Actualizați comandați și actualizați numai pachetul individual: acesta va actualiza în continuare toate acestea. Puteți rula ultima versiune a unui singur pachet bower install ; se va supra-scrie versiunea pe care o aveți în prezent.
Dacă nevoile dvs. se schimbă vreodată, puteți dezinstala cu ușurință un pachet cu dezinstalare comanda:
bower dezinstala jquery
Deci, avem pachetele noastre instalate. Acum, vrem să le folosim. Amintiți-vă, Bower este doar un manager de pachete, așa că nu există nici o modalitate specifică Bower de a folosi aceste pachete. Deocamdată, vom rămâne doar cu etichete de script vechi obișnuite:
Deschideți acest lucru într-un browser și veți vedea textul "JQUERY!"; asta e semnul că funcționează!
După cum am menționat mai sus, Bower nu are un sistem pentru încărcarea pachetelor pe pagina dvs., dar asta nu înseamnă că nu trebuie să utilizați unul. Bower este unanimat și vă lasă să alegeți metoda pe care vă simțiți mai confortabilă. Poate sunt mai multe etichete de script care concatenate și minify la momentul construirii. Poate că este RequireJS (pe care îl putem obține, prin Bower). Poate că este vorba despre Sprockets sau despre un alt sistem de ambalare a materialelor de pe server. Depinde de dvs..
Există câteva alte comenzi Bower pe care ar trebui să le cunoașteți. Primul, lista de albine sau bower ls va lista pachetele pe care le-ați instalat în prezent.
Rețineți că acest lucru nu înseamnă că am instalat jQuery de două ori; înseamnă că jQuery este o dependență a "sayHi" (un pachet pe care îl vom construi mai târziu).
Dacă doriți să vedeți la ce adresa URL a unui depozit se referă la un anumit pachet, utilizați căutare bower comanda, folosind numele pachetului ca argument:
bower info comanda va va spune ce versiuni de pachet sunt disponibile:
În cele din urmă, pentru a elimina toate pachetele memorate în cache ~ / .Bower, alerga cache cache-clean:
Accentsconagua
component.json Fişier component.json fișierul este o parte importantă a pachetelor Bower. Ne vom uita la crearea unui pachet următor; dar mai întâi, să ne uităm la modul în care putem folosi a component.json fișier pentru a face instalarea pachetelor pentru un proiect (non-pachet) un pic mai simplu.
Există doar patru proprietăți pe care Bower le folosește în component.json fişier. Primul este numele proiectului; destul de simplu.
"nume": "MyProject"
Înainte este un număr de versiune:
"nume": "MyProject", "versiune": "0.0.1"
principal proprietatea este pentru definirea părților componentei dvs., dar din moment ce nu construim încă o componentă, vom reveni la ea. Proprietatea finală este dependențe, care evidențiază ce pachete depinde componenta noastră (sau, în acest caz, proiectul nostru). Este un obiect; iar pentru fiecare proprietate, cheia este numele pachetului, iar valoarea este versiunea.
"nume": "MyProject", "versiune": "0.0.1", "dependențe": "backbone": "latest", "requjs": "2.1.1"
Acum, dacă creați un dosar de proiect și puneți cele de mai sus în dvs. component.json fișier, putem instala toate componentele pur și simplu prin rularea:
bower install
Și acum toate pachetele noastre sunt instalate. Dacă, după aceea, vrem să instalăm alte pachete și să le includem în noi component.json, putem folosi --Salvați steag.
bower instalează jquery - salvează
Acum ne poți deschide component.json fișier și a vedea că o intrare pentru jQuery a fost adăugat la nostru dependențe obiect.
Să învățăm acest tutorial prin construirea unui pachet super-simplu și instalându-l prin Bower. Acesta va fi un pachet destul de lipsit de sens, dar va acoperi aproape fiecare pas al procesului de creare a unui pachet.
Să construim un pachet foarte simplu.
Creați un director de proiect, numit spune bună. În cadrul ei, vom începe cu noi component.json fişier. Sunteți familiarizați cu toate proprietățile, cu excepția principal.
"nume": "SayHi", "versiune": "1.0.0", "principal": "./sayhi.js", "dependențe": "jquery"
principal proprietatea ar trebui să fie calea spre fișierul principal care alcătuiește pachetul; dacă aveți mai multe fișiere, puteți să-l setați într-o serie de căi. Pentru a fi sincer, nu știu sigur ce face. Aveți permisiunea să aveți doar un fișier de fiecare tip (deci, unul .html fișier sau unul .js fișierul dvs.) principal array și Bower vor descărca în continuare întregul depozit și nu doar fișierele principale atunci când îl instalați. Nu găsesc nicio documentație care să indice în mod clar ce este, dar găsesc și alții să se întrebe același lucru. Poate că va fi folosit în viitoarele versiuni ale lui Bower. Dacă aveți orice informații despre acest lucru, vă rugăm să lăsați un comentariu de mai jos!
Oricum, acum este momentul să creăm depozitul Git.
git init git adăugați component.json git commit -m 'added component.json'
După cum ați văzut, atunci când instalați dependențele pachetului nostru în timp ce vă aflați în curs de dezvoltare, vom obține o componente în repo. M-am uitat la mai multe repo componente diferite, și nici unul dintre ele nu au acest lucru componente dosarul verificat, așa că o vom adăuga la .gitignore fişier; dependențele vor fi instalate automat când un utilizator instalează pachetul nostru. Când dezvoltăm pentru Node.js, facem același lucru cu node_modules și folderul package.json fişier.
Deci, într-un .gitignore fişier:
componente
Și apoi:
git adăugați .gitignore git commit -m 'adăugat .gitignore file' bower install
Acum ne putem scrie sayhi.js cod:
funcția sayHi (selector) var el = $ (selector); funcția return (nume) el.text ("Hi" + nume + "!"); Este destul de simplu; noi doar trecem spune bună funcția selector pentru un element și returnează o funcție care poate lua un nume și scrie mesajul respectivului element. Am făcut-o în acest fel pentru că ne permite să "cache" elementul și pentru că face codul un pic mai interesant.
Bine, acum trebuie să ne angajăm:
git adăuga sayhi.js git commit -m 'adăugat sayhi.js'
Ultimul pas este să adăugați o etichetă Git cu numărul versiunii, pentru că așa Bower distinge versiunea:
tag-ul git -a 1.0.0 -m 'sayHi v1.0.0'
Următorul pas ar fi să împingeți acest depozit până la GitHub și apoi să înregistrați pachetul cu Bower. Înregistrarea este simplă: utilizați registrul de evacuare comanda, dându-i numele pe care doriți să-l aibă pachetul și adresa URL git pentru depozit:
bower register registerNumai git: //your/git/url.git
Nu voi face asta, pentru că este un pachet inutil. Dar rețineți că putem folosi Bower pentru a instala și un pachet local. Ceea ce voi face, pentru a simula GitHub cât mai aproape posibil, este crearea unei clone goale a acestui depozit (GitHub stochează repo-uri goale).
git clone - calea bara / to / sayHi path / to / sayHi.git
Creați un nou dosar de proiect în afara paginilor dvs. spune bună pliant, CD în, și încercați acest lucru:
calea de instalare a bower / to / sayHi.git
Rezultatul ar trebui să vă spună că a fost instalat foarte bine și că jQuery a fost instalat și el. Puteți vedea că acest lucru a fost cazul prin căutarea în cadrul componente pliant.
Acum, putem folosi codul într-un index.html fişier:
Deschide-l. Functioneaza!
Configurați Bower creând un
.bowerrcfişier.
Nu puteți face prea multe pentru a configura Bower, dar există câteva lucruri. Configurați Bower creând un .bowerrc fișier în directorul de acasă. Este un fișier JSON cu o combinație a acestor trei proprietăți:
director: numele directorului de componente; este implicit componente.JSON: numele fișierului de componente; este implicit components.json.punct final: Aceasta vă permite să rulați propriul server Bower, pentru a servi pachete personalizate din spatele unui paravan de protecție. Puteți obține o implementare simplă a unui server Bower pe Github.De exemplu:
"director": "pachete", "json": "libraries.json"
Dacă te-ai uitat la alți administratori de pachete, s-ar putea să te întrebi ce este convingător despre Bower, mai ales atunci când pare să lipsească o mulțime de caracteristici pe care altele le au. Am avut aceeași întrebare. Dar, după ce a obținut un control asupra modului de a folosi Bower, această linie din FAQ a făcut mult mai multă sens:
Bower este o componentă mai joasă decât Jam, Volo sau Ender. Acești administratori ar putea consuma Bower ca dependență.
Deci, chiar dacă nu utilizați Bower de la sine, este bine să cunoașteți comenzile, deoarece alte instrumente vor fi construite în jurul acestuia. De fapt, Yeoman nou și deja popular folosește Bower pentru gestionarea pachetelor. Dacă nu sunteți încă familiarizat cu Yeoman, acesta este pasul următor după ce ați citit acest articol!
Deci asta e Bower, managerul de pachete de browser cu totul neconvingător! Ce crezi? Este o bibliotecă pe care o veți folosi sau nu vă poate interesa mai puțin? Să o auzim în comentarii.
