Sfat rapid Ce trebuie să faceți atunci când întâlniți un fișier Bower

Ați clonat vreodată sau ați descărcat un repo GitHub, doar pentru a găsi un număr de fișiere ciudate și străine pe care nu le recunoașteți?

Să presupunem, de exemplu, că lucrați la un site web și aveți nevoie de o bibliotecă, JavaScript sau CSS, pentru a adăuga anumite caracteristici proiectului dumneavoastră. Puteți găsi biblioteca perfectă într-un depozit GitHub, astfel încât să o descărcați imediat. Când extrageți pachetul, descoperiți mai multe fișiere ciudate, dintre care unul bower.json.

În plus, este posibil să fi găsit și instrucțiuni în repozitoriu, de regulă, în legătură cu:

Instalați cu Bower: bower instalează bootstrap.

S-ar putea să vă întrebați ce este folosit pentru acest fișier, să nu mai vorbim de ce ar trebui să îl instalați cu Bower. Am fost recent întrebat de către un prieten de designer web al meu și bănuiesc că există mulți oameni care se simt confuzi în mod similar. Dacă sunteți unul dintre acești oameni, acest sfat rapid ar trebui să vă ajute!

Un fișier Bower

Bower este un manager de pachete pentru web. Vă ajută să gestionați dependențele; (probabil terțe părți, adesea public accesibile prin intermediul GitHub) de care aveți nevoie pentru proiectul dvs..

bower.json, fișierul despre care vorbim aici, joacă un rol central într-un mediu Bower. Anterior, a fost numit component.json, dar numele sa schimbat apoi în bower.json pentru a evita conflictul care ar putea apărea împreună cu celelalte instrumente care utilizează același nume de fișier.

bower.json îi ajută pe Bower să înțeleagă proiectul; înregistrează meta date cum ar fi numele proiectului, versiunea, autorul, licența, dependențele și așa mai departe. Informațiile sunt structurate în JSON, care de obicei arată după cum urmează:

"nume": "minunat", "versiune": "1.0.0", "autori": ["John Doe"], "descriere": " "," dependențe ": " cool-library ":" 1.1.2 "," bibliotecă bună ":" 2.1.3 " 

Din acest fișier JSON, care poate fi citit de oameni, putem deduce că acest proiect este numit "minunat", este în prezent la versiunea "1.0.0", a fost scris de "John Doe", câteva alte detalii și necesită câteva dependențe să fie prezent pentru a lucra.

Dacă găsiți bower.json într-o bibliotecă, aceasta implică două lucruri:

  • În primul rând, autorul proiectului a definit biblioteca ca pachet Bower. Proiectul poate fi publicat în registrul Bower, o colecție centrală de pachete, astfel încât acesta să poată fi adăugat în proiect prin intermediul liniei de comandă Bower.
  • Autorul proiectului poate să fi folosit Bower pentru a organiza bibliotecile de proiect, făcând mai ușor pentru alți dezvoltatori care pot folosi sau extind proiectul mai târziu.

Bower utilizează acest fișier în mai multe moduri. Utilizează detaliile meta pentru a afișa informațiile pachetului atunci când căutăm în registrul Bower. 

Veți găsi câteva proiecte familiare în registrul Bower

Bower va analiza, de asemenea, fișierul atunci când vom executa mai multe comenzi, cum ar fi versiune bower și bower install.

Bower Install

bower install este comanda pentru a instala un pachet care este înregistrat în registrul Bower. Această comandă va instala, de asemenea, pachetele listate în bower.json sub "dependencies". Implicit, aceste pachete vor fi adăugate într-un dosar numit bower_components.

De exemplu, să instalați Animate.css și Bootstrap cu Bower. 

Pentru început, va trebui să instalați Bower. Aruncați o privire la Meet Bower: Un manager de pachete pentru Web pentru detalii despre acest lucru. Cu aceasta ați putea să tastați următoarea comandă în Terminal sau în Prompt (dacă utilizați Windows) care instalează simultan aceste pachete:

bower instalează animate.css bootstrap

Acum ar trebui să le găsiți adăugate în bower_components. 

Animate.css și folderul Bootstrap adăugate în bower_components

După cum puteți vedea mai sus, avem un dosar suplimentar, jquery. Acest lucru se datorează faptului că Bootstrap îl fixează ca o dependență; componentele JavaScript Bootstrap necesită funcția jQuery. Dacă aruncați o privire la fișierul bower.json inclus în pachet, îl veți găsi afișat la sfârșitul fișierului, după cum urmează.

jQuery este setată ca dependență în bower.json din Bootstrap

Ce urmeaza?

Presupunând că tocmai ați descărcat o bibliotecă cu un fișier bower.json însoțitor, primul lucru pe care l-aș sugera este că inspectați fișierul pentru dependențe.

De exemplu, am descărcat o bibliotecă JavaScript numită Revealer.js. Revealer.js necesită apariția programului Reveal.js. Putem găsi această listă ca fiind o dependență în fișierul bower.json, după cum se arată mai jos:

// ... "dependencies": "reveal.js": "~ 2.5.0", // ... 

Doar pentru a confirma acest lucru, dacă deschidem index.html din vizualizari dosarul, vom găsi reveal.js fișierul este legat într - un scenariu etichetă, ca atare.

 

Acum trebuie să deschideți dosarul bibliotecii în Terminal sau Command Prompt, apoi tastați:

bower install 

Așa cum am menționat mai devreme, această comandă va descărca simultan toate pachetele înregistrate în bower.json. 

Notă: În acest caz particular, pachetul este adăugat în / componente publice dosar, așa cum se specifică în .bowerrc fişier. Un fișier .bowerrc însoțește uneori fișierul bower.json și este utilizat pentru a specifica directoarele de instalare personalizate.

Actualizarea pachetului

Pachetul pe care l-am instalat poate fi actualizat în timp, fie pentru remedierea erorilor, fie pentru adăugarea de noi funcții. Cu Bower, actualizarea acestor biblioteci este o briză. Mai întâi de toate, să tastăm:

lista de albine 

Aceasta va lista pachetele instalate în prezent în proiectul nostru și ne va arăta cea mai recentă versiune disponibilă. În cazul nostru, pare Reveal.js are o versiune mai nouă. Deci, să o actualizăm.

Este disponibilă cea mai nouă versiune de Reveal.js

Tastați această comandă pentru a actualiza Reveal.js.

instalare bower --save reveal.js # 2.6.2 

Aceasta va schimba și versiunea înregistrată în proiectul bower.json.

// ... "dependencies": "reveal.js": "2.6.2", // ...

Concluzie

Bower este un instrument foarte util pentru gestionarea bibliotecilor de proiecte. Este un pic ca și când ai propriul AppStore sau Google Play; putem instala, actualiza și elimina librăriile cu ușurință. Sper că acest sfat a ajutat la evitarea oricărei confuzii pe care o puteți întâmpina când descărcați biblioteci terțe părți și vă arătați beneficiile utilizării Bower în fluxul de lucru.

Referință ulterioară

  • Site-ul oficial Bower
  • Specificația Bower JSON
  • Faceți cunoștință cu Bower: un manager de pachete pentru web
  • Un șablon de cerințe RequireJS, Backbone și Bower Starter
  • Diferența dintre Grunt, NPM și Bower (package.json vs bower.json)