Rask Tips Hva å gjøre når du møter en Bower-fil

Har du noen gang klonet eller lastet ned en GitHub repo, bare for å finne en rekke merkelige og fremmede filer som du ikke kjenner igjen?

La oss for eksempel si at du jobber på et nettsted og trenger et bibliotek, JavaScript eller CSS, for å legge til noen funksjoner i prosjektet ditt. Du finner det perfekte biblioteket i et GitHub-depot, slik at du kan laste den ned med en gang. Når du pakker ut pakken, oppdager du flere merkelige filer, hvorav en er bower.json.

Videre kan det hende du også har funnet instruksjoner i depotet, og sier vanligvis noe i tråd med:

Installer med Bower: bower install bootstrap.

Du lurer kanskje på hva denne filen brukes til, enn si hvorfor du bør installere den med Bower. Jeg ble nylig spurt disse veldig spørsmålene av en webdesigner venn av meg, og jeg mistenker at det er mange som føler seg like forvirret. Hvis du er en av disse personene, bør dette raske tipset hjelpe deg!

En Bower-fil

Bower er en pakkeleder for nettet. Det hjelper deg med å håndtere avhengigheter; filer (kanskje tredjepart, ofte offentlig tilgjengelig via GitHub) som du trenger for prosjektet ditt.

bower.json, filen vi snakker om her, spiller en sentral rolle i et Bower-miljø. Tidligere ble den navngitt component.json, men navnet ble deretter endret til bower.json for å unngå konflikt som kan oppstå med de andre verktøyene med samme filnavn.

bower.json hjelper Bower å forstå prosjektet; Det registrerer metadata som prosjektets navn, versjonen, forfatteren, lisensen, avhengighetene og så videre. Informasjonen er strukturert i JSON, som vanligvis ser ut som følger:

"navn": "awesome", "versjon": "1.0.0", "forfattere": ["John Doe"], "beskrivelse": "Den mest fantastiske tingen i galaksen", "lisens" "," avhengigheter ": " cool-library ":" 1.1.2 "," godt bibliotek ":" 2.1.3 " 

Fra denne menneskelige lesbare JSON-filen kan vi utlede at dette prosjektet heter "awesome", er for øyeblikket på versjon 1.0.0, forfattet av John Doe, et par andre detaljer, og krever et par avhengigheter til være tilstede for å kunne jobbe.

Hvis du finner bower.json i et bibliotek, innebærer det to ting:

  • For det første definerte prosjektforfatteren biblioteket som en Bower-pakke. Prosjektet kan ha blitt publisert i Bower-registret, en sentral samling av pakker, slik at den kan legges inn i prosjektet ditt via Bower kommandolinje.
  • Prosjektforfatteren kan ha brukt Bower til å organisere prosjektbiblioteker, noe som gjør det enklere for andre utviklere som kan bruke eller utvide prosjektet senere.

Bower bruker denne filen på flere måter. Det bruker metadataene til å vise pakkeinformasjonen når vi søker i Bower-registeret. 

Du finner noen kjente prosjekter i Bower-registeret

Bower vil også analysere filen når vi utfører flere kommandoer som bower versjon og bower installasjon.

Bower Install

bower installasjon er kommandoen for å installere en pakke som er registrert i Bower-registeret. Denne kommandoen vil også installere pakkene som er oppført i bower.json under "avhengigheter". Som standard blir disse pakkene lagt til i en navngitt mappe bower_components.

For eksempel, la oss installere Animate.css og Bootstrap med Bower. 

Til å begynne med trenger du faktisk å installere Bower. Ta en titt på Meet Bower: En Package Manager For The Web for detaljer om dette. Med det gjort kan du skrive følgende kommando i Terminal eller Kommandoprompt (hvis du bruker Windows) som installerer disse pakkene samtidig:

installer animate.css bootstrap

Nå bør du finne dem lagt i bower_components. 

Animate.css og Bootstrap-mappen lagt til i bower_components

Som du kan se over, har vi en ekstra mappe, jquery. Dette skyldes at Bootstrap angir det som en avhengighet; JavaScript-komponentene i Bootstrap-enheten krever at jQuery fungerer. Hvis du ser på bower.json-filen som følger med i pakken, finner du den oppført på slutten av filen, som følger.

jQuery er angitt som avhengighet i Bootstraps bower.json

Hva blir det neste?

Forutsatt at du nettopp har lastet ned et bibliotek med en tilhørende bower.json-fil, er det første jeg foreslår at du inspiserer filen for avhengigheter.

Som et eksempel har jeg lastet ned et JavaScript-bibliotek kalt Revealer.js. Revealer.js krever tilsynelatende Reveal.js å ​​fungere. Vi kan finne den oppført som en avhengighet i bower.json-filen, som vist nedenfor:

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

Bare for å bekrefte dette, hvis vi åpner indeksen.html fra visninger mappe, finner vi reveal.js filen er koblet i a manus tag, som så.

 

Nå må vi åpne bibliotekets mappe i Terminal eller Command Prompt, og skriv deretter inn:

bower installasjon 

Som nevnt tidligere vil denne kommandoen laste ned alle de registrerte pakkene i bower.json på en gang. 

Merk: I dette spesielle tilfellet legges pakken i offentlige / komponenter mappe, som angitt i .bowerrc fil. En .bowerrc-fil følger noen ganger bower.json-filen og brukes til å angi egendefinerte installasjonsmapper.

Oppdaterer pakken

Pakken som vi har installert, kan oppdateres over tid, enten for å fikse feilene eller legge til nye funksjoner. Med Bower er det en bris å oppdatere disse bibliotekene. Først av alt, la oss skrive:

bower liste 

Dette vil vise de oppdaterte pakkene i prosjektet, og vise oss den nyeste versjonen som er tilgjengelig. I vårt tilfelle ser det ut til Reveal.js har en nyere versjon. Så la oss oppdatere den.

Den nyeste versjonen av Reveal.js er tilgjengelig

Skriv denne kommandoen for å oppdatere Reveal.js.

bower install - lagre reveal.js # 2.6.2 

Dette vil også endre versjonen som er registrert i prosjektets bower.json.

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

Konklusjon

Bower er et veldig praktisk verktøy for å administrere prosjektbiblioteker. Det er litt som å ha vår egen AppStore eller Google Play; Vi kan enkelt installere, oppdatere og fjerne biblioteker. Jeg håper dette tipset har bidratt til å unngå forvirring du kan oppleve når du laster ned tredjepartsbiblioteker, og viste deg fordelene med å bruke Bower i arbeidsflyten din.

Ytterligere referanse

  • Bower Offisielt nettsted
  • Bower JSON spesifikasjon
  • Møt Bower: En Package Manager For Web
  • En KravJS, Ryggrad, og Bower Starter Template
  • Forskjellen mellom Grunt, NPM og Bower (package.json vs bower.json)