ÎnvățațiGetting Started with Bower

Există acum mai multe biblioteci și framework-uri disponibile pentru dezvoltarea front-end decât oricând înainte. Nu este neobișnuit să ai cinci sau mai multe dintre aceste biblioteci implicate într-un singur proiect. Dar a ține evidența tuturor acestor biblioteci și a te asigura că sunt actualizate poate fi dificil. Intră Bower, un manager de pachete care facilitează gestionarea tuturor dependențelor front-end ale aplicației dumneavoastră.

În acest articol de blog veți învăța cum să începeți să lucrați cu Bower. Veți începe prin a instala utilitarul de linie de comandă Bower și apoi veți continua să învățați despre diferitele comenzi care sunt disponibile pentru gestionarea pachetelor.

Să începem!

Instalarea Bower

Bower poate fi instalat folosind npm, managerul de pachete Node. Dacă nu aveți deja instalat npm, mergeți pe site-ul Node.js și descărcați copia relevantă de Node.js pentru sistemul dumneavoastră. Programul npm este inclus odată cu instalarea Node.js.

După ce ați instalat npm, deschideți Terminal (sau Command Prompt) și introduceți următoarea comandă:

npm install -g bower

Aceasta va instala Bower la nivel global pe sistemul dumneavoastră.

Acum că aveți Bower instalat, putem începe să ne uităm la comenzile care sunt folosite pentru a gestiona pachetele.

Căutarea pachetelor

Există două moduri diferite prin care puteți găsi pachetele Bower. Fie folosind directorul de componente online, fie folosind utilitarul din linia de comandă.

Pentru a căuta pachete în linia de comandă se folosește comanda search. Aceasta ar trebui să fie urmată de interogarea dvs. de căutare.

bower search <query>

De exemplu, pentru a căuta pachete care conțin cuvântul „jquery” ați putea face următoarele:

bower search jquery

Această comandă ar returna o mulțime de rezultate, dintre care unele sunt afișate în fragmentul de mai jos.

Care rezultat afișează numele pachetului și un endpoint Git. Veți avea nevoie fie de numele, fie de endpoint-ul Git pentru a instala un pachet.

Instalarea pachetelor

Pentru a adăuga un nou pachet Bower la proiectul dvs. utilizați comanda install. Acestei trebuie să i se treacă numele pachetului pe care doriți să îl instalați.

bower install <package>

Pe lângă utilizarea numelui pachetului, puteți instala un pachet și prin specificarea unuia dintre următoarele:

• Un punct final Git, cum ar fi git://github.com/components/jquery.git
• O cale către un depozit Git local.
• Un punct final prescurtat, cum ar fi components/jquery. Bower va presupune că se utilizează GitHub, caz în care, punctul final este partea de după github.com în URL-ul depozitului.
• Un URL către un fișier zip sau tar. Conținutul fișierelor va fi extras în mod automat.

Puteți instala o versiune specifică a pachetului adăugând un semn cu ghilimele (#) după numele pachetului, urmat de numărul versiunii.

bower install <package>#<version>

Pachetele instalate vor fi plasate într-un director bower_components. Acesta este creat în dosarul în care a fost executat programul bower. Puteți schimba această destinație folosind opțiunile de configurare dintr-un fișier .bowerrc.

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.js
    • jquery.min.js
    • jquery.min.map
    • …
  • modernizr
    • modernizr.js
    • …

După ce a fost instalat, puteți utiliza un pachet prin simpla adăugare a unei etichete <script> sau <link> la marcajul HTML. Deși pachetele Bower conțin cel mai frecvent fișiere JavaScript, acestea pot conține, de asemenea, CSS sau chiar imagini.

<script src="https://blog.teamtreehouse.com/path/to/bower_components/jquery/jquery.min.js"></script>

Instalarea pachetelor utilizând un fișier bower.json

Dacă utilizați mai multe pachete în cadrul proiectului dumneavoastră, este adesea o idee bună să listați aceste pachete într-un fișier bower.json. Acest lucru vă va permite să instalați și să actualizați mai multe pachete cu o singură comandă.

{ "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true}

Exemplul simplu de mai sus prezintă un fișier bower.json care definește câteva informații despre proiecte, precum și o listă de dependențe. Fișierul bower.json este de fapt folosit pentru a defini un pachet Bower, deci, de fapt, vă creați propriul pachet care conține toate dependențele pentru aplicația dumneavoastră.

Proprietățile folosite în acest exemplu sunt explicate mai jos.

• name – Numele aplicației/pachetului dumneavoastră.
• version – Un număr de versiune pentru aplicația/pachetul dumneavoastră.
• dependencies – Pachetele care sunt necesare pentru aplicația dumneavoastră. Trebuie să specificați un număr de versiune pentru fiecare dintre aceste pachete, așa cum se arată în exemplul de mai sus. Specificarea latest, va face ca Bower să instaleze cea mai recentă versiune a unui pachet.
• private – Setarea acestei proprietăți la true înseamnă că doriți ca pachetul să rămână privat și nu doriți să îl adăugați în registru în viitor.

După ce v-ați configurat fișierul bower.json puteți executa pur și simplu comanda bower install pentru a instala toate pachetele pe care le-ați specificat.

Bower include un utilitar la îndemână care vă va ajuta să creați un fișier bower.json pentru proiectul dumneavoastră. Executarea comenzii bower init la rădăcina proiectului dumneavoastră va lansa un program interactiv care va crea fișierul pentru dumneavoastră. Cu toate acestea, este posibil să trebuiască totuși să adăugați singur unele pachete la fișier.

Nota: Pentru o listă completă a proprietăților care pot fi adăugate la fișierul bower.json, verificați specificațiile.

Listarea pachetelor instalate

Puteți afla cu ușurință ce pachete sunt instalate folosind comanda list.

bower list

Scurtările de mai jos arată rezultatul pentru un proiect simplu care folosește jQuery, Modernizr și Sass. Observați că Bower face, de asemenea, o verificare pentru a vedea dacă este disponibilă o versiune mai nouă a fiecăruia dintre pachete.

Updating Packages

Updating a package is pretty straightforward. Dacă ați folosit un fișier bower.json, puteți executa o simplă comandă update pentru a actualiza toate pachetele deodată. Cu toate acestea, instrumentul de actualizare va respecta restricțiile de versiune pe care le-ați specificat în fișierul bower.json.

bower update

Pentru a actualiza un pachet individual, utilizați din nou comanda update, de data aceasta specificând numele pachetului pe care doriți să îl actualizați.

bower update <package>

Dezinstalarea pachetelor

Pentru a elimina un pachet puteți folosi comanda uninstall urmată de numele pachetului pe care doriți să îl eliminați.

bower uninstall <package>

Este posibil să eliminați mai multe pachete deodată prin enumerarea numelor pachetelor.

bower uninstall jquery modernizr sass-bootstrap

Gânduri finale

Managerii de pachete au revoluționat modul în care partajăm codul. Ei au făcut ca utilizarea bibliotecilor de cod să fie mai ușoară ca niciodată și au eliminat o mare parte din durerile de cap legate de gestionarea actualizărilor.

Pentru o lungă perioadă de timp, dezvoltatorii front-end au privit cu invidie proiecte precum RubyGems; dorindu-și ca într-o zi să avem și noi o modalitate simplă de gestionare a dependențelor din proiecte. Bower ne-a oferit acel instrument. Pe măsură ce tot mai multe biblioteci grozave devin obișnuite printre aplicațiile noastre web, complexitatea proiectelor noastre va crește în mod inevitabil. Bower ne oferă o modalitate de a gestiona această complexitate.

Legături utile

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• cod
• javascript
• aplicație web

.