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!
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:
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-registeretBower vil også analysere filen når vi utfører flere kommandoer som bower versjon
og bower installasjon
.
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_componentsSom 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.jsonForutsatt 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.
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 tilgjengeligSkriv 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", // ...
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.