Share
Har du någonsin klonat eller laddat ner ett GitHub repo, bara för att hitta ett antal konstiga och främmande filer som du inte känner igen?
Låt oss säga att du till exempel arbetar på en webbplats och behöver ett bibliotek, JavaScript eller CSS, för att lägga till några funktioner i ditt projekt. Du hittar det perfekta biblioteket i ett GitHub-arkiv, så du kan ladda ner det direkt. När du tar ut paketet upptäcker du flera konstiga filer, varav en är bower.json.
Vidare kan du också ha hittat instruktioner i förvaret som vanligtvis säger något i linje med:
Installera med Bower:
bower installation bootstrap.
Du kanske undrar vad den här filen används för, än mindre varför du ska installera den med Bower. Jag har nyligen frågat dessa mycket frågor av min webbdesigner och jag misstänker att det finns många som känner sig lika förvirrade. Om du är ett av dessa personer, bör det här snabba tipset hjälpa dig!
Bower är en paketchef för webben. Det hjälper dig att hantera beroenden; filer (kanske tredje part, ofta allmänt tillgängliga via GitHub) som du behöver för ditt projekt.
bower.json, filen vi pratar om här spelar en central roll i en Bower-miljö. Tidigare namngavs det komponent.json, men namnet ändrades sedan till bower.json för att undvika konflikter som kan uppstå med de andra verktygen som använder samma filnamn.
bower.json hjälper Bower att förstå projektet; Det registrerar metadata som projektets namn, versionen, författaren, licensen, beroenden och så vidare. Informationen är strukturerad i JSON som vanligtvis ser ut som följer:
"name": "awesome", "version": "1.0.0", "författare": ["John Doe"], "beskrivning": "The Most Awesome thing in the Galaxy" "," beroenden ": " cool-library ":" 1.1.2 "," good-library ":" 2.1.3 "
Från den här läsbara JSON-filen kan vi härleda att projektet är namnet "awesome", är för närvarande på version 1.0.0, författat av John Doe, ett par andra detaljer och kräver ett antal beroenden att vara närvarande för att arbeta.
Om du hittar bower.json i ett bibliotek, innebär det två saker:
Bower använder den här filen på flera sätt. Det använder metadetaljerna för att visa paketinformation när vi söker i Bower-registret.
Du hittar några kända projekt i Bower-registretBower kommer också att analysera filen när vi utför flera kommandon som bower version och bower installation.
bower installation är kommandot att installera ett paket som är registrerat i Bower-registret. Detta kommando kommer också att installera de paket som anges i bower.json under "beroenden". Som standard läggs dessa paket i en mapp som heter bower_components.
Låt oss exempelvis installera Animate.css och Bootstrap med Bower.
Till att börja med behöver du faktiskt installera Bower. Ta en titt på Meet Bower: En pakethanterare för webben för mer information om detta. Med det gjort kan du skriva följande kommando i Terminal eller Command Prompt (om du använder Windows) som installerar dessa paket samtidigt:
bower installera animate.css bootstrap
Nu borde du hitta dem i bower_components.
Animate.css och Bootstrap-mappen läggas till i bower_componentsSom du kan se ovan har vi en extra mapp, jQuery. Detta beror på att Bootstrap ställde det som ett beroende; JavaScript-komponenterna för Bootstrap kräver att jQuery fungerar. Om du tittar på bower.json-filen som ingår i paketet, hittar du den listad i slutet av filen, enligt följande.
jQuery är inställd som beroende i Bootstraps bower.jsonFörutsatt att du just har laddat ner ett bibliotek med en bifogad bower.json-fil, är det första jag föreslår att du inspekterar filen för beroenden.
Som ett exempel har jag laddat ner ett JavaScript-bibliotek som heter Revealer.js. Revealer.js förutsätter uppenbarligen att Reveal.js ska fungera. Vi kan hitta den listad som ett beroende i filen bower.json, som visas nedan:
// ... "beroenden": "reveal.js": "~ 2.5.0", // ...
Bara för att bekräfta detta, om vi öppnar index.html från visningar mapp hittar vi reveal.js filen är länkad inom a manus tagg, som så.
Nu måste vi öppna bibliotekets mapp i terminalen eller kommandotolken och skriva sedan:
bower installation
Som nämnts tidigare kommer det här kommandot att ladda ner alla registrerade paket i bower.json samtidigt.
Notera: I det här fallet läggs paketet i offentliga / komponenter mapp, som anges i .bowerrc fil. En .bowerrc-fil följer ibland bower.json-filen och används för att ange anpassade installationsmappar.
Paketet som vi har installerat kan uppdateras över tid, antingen för att fixa buggarna eller lägga till nya funktioner. Med Bower är uppdateringen av dessa bibliotek en bris. Först av allt, låt oss skriva:
bower lista
Det här listar de för tillfället installerade paketen i vårt projekt och visar oss den senaste versionen som finns tillgänglig. I vårt fall verkar det Reveal.js har en nyare version. Så, låt oss uppdatera det.
Den senaste versionen av Reveal.js är tillgängligSkriv det här kommandot för att uppdatera Reveal.js.
bower install - save reveal.js # 2.6.2
Detta kommer också att ändra den version som spelats in i vårt projekt bower.json.
// ... "beroenden": "reveal.js": "2.6.2", // ...
Bower är ett mycket användbart verktyg för att hantera projektbibliotek. Det är lite som att ha vår egen AppStore eller Google Play; Vi kan enkelt installera, uppdatera och ta bort bibliotek. Jag hoppas att det här tipset har hjälpt till att undvika all förvirring du kan uppleva när du hämtar bibliotek från tredje part och visar dig fördelarna med att använda Bower i ditt arbetsflöde.
Accentsconagua