Share
Siden nettplattformen er modnet, har verktøyene for å håndtere våre prosjekter også blitt modnet. I denne opplæringen vil jeg introdusere deg til et av disse verktøyene som gjør det enklere å håndtere avhengighetene i prosjektet ditt: Bower.
Da jeg først så på Bower, var jeg ikke helt sikker på hvordan det passer inn: det var ikke bare en JavaScript-pakkebehandling, som Jam, og det var ikke en modullaster, som RequireJS. Det kaller seg en nettleserpakkebehandling, men hva betyr dette egentlig? Hvordan er det annerledes enn en JavaScript-pakkebehandling? Hovedforskjellen er at Bower ikke bare håndterer JavaScript-biblioteker: det vil administrere noen pakker, selv om det betyr HTML, CSS eller bilder. I dette tilfellet a pakke betyr enhver innkapslet, tredjepartskode, vanligvis offentlig tilgjengelig fra et Git-depot.
Bower er bare en pakkebehandling.
Det viktige å merke seg her er at Bower er bare en pakkebehandling, og ingenting annet. Det gir ikke muligheten til å sammenkoble eller redusere kode, den støtter ikke et modulsystem som AMD: det er eneste formål å administrere pakker.
Nok snakk: la oss se hvordan denne tingen fungerer!
Selvfølgelig, før vi faktisk kan bruke Bower, må vi installere det. Dette er enkelt: bruk NPM:
npm installer -g bower
Pass på å installere den globalt (med -g), fordi dette er prosjektspesifikt.
Hvis du ikke vet navnet på pakken du vil ha, kan du finne pakker ved å bruke bower søk kommando. Hvis du bruker det uten et søkeord, får du en liste over alle bower-pakkene som er tilgjengelige. For å filtrere dem ned, bruk et søkeord.
bower search bower search backbone bower søk bootstrap
Hvis du hellere vil søke via en GUI, gå over til http://sindresorhus.com/bower-components/.
Når du har funnet pakken du vil installere, bruk bare bower installasjon å installere den.
bower install jquery bower installer ryggrad
For å installere en bestemt versjon av en pakke, ta med versionsnummeret etter det, med en hash mellom:
bower install jquery # 1.7.0
Sjekk ut det komponenter mappe som Bower nettopp opprettet for oss. Inne i det, bør du se tre mapper: ryggrad, jquery, og understrek. Underscore ble installert fordi det er en avhengighet av Backbone; det er praktisk! Så, hvis du sammenligner innholdet i disse mappene med deres adresserettadresser (fra søke- eller installeringsutgangen), ser du at de er akkurat det samme. Dette illustrerer godt det faktum at Bower er på sitt mest grunnleggende nivå, et kortklipp for Git.
Men du kan passere bower installasjon beordre andre ting også. Basert på det vi nettopp har sett, er det fornuftig at du kan bruke en Git url:
bower install git: //github.com/pivotal/jasmine.git
Du kan også bruke en lenke til en enkelt fil:
bower installere http://backbonejs.org/backbone-min.js
Du kan til og med installere en pakke fra din egen datamaskin: noe du jobber med, kanskje:
bower installer ~ / kode / hemmeligProjekt
Du kan merke i utgangen av bower installasjon beordre at det nevner caching pakken: det gjør dette ved å lagre en kopi av det til ~ / .Bower /. Bower kan da bruke denne repoen for å få fart på senere installasjoner av samme pakke.
Hvis den neste versjonen av et bibliotek kommer ut og du vil oppdatere til det, kan du gjøre det enkelt ved å kjøre dette:
bower oppdatering
Merk at du ikke kan sende et pakke navn til Oppdater kommandoen og bare oppdatere den individuelle pakken: den vil fortsatt oppdatere dem alle. Du kan få den nyeste versjonen av en enkelt pakke ved å kjøre bower installasjon ; det vil bare over-skrive den versjonen du har for øyeblikket.
Hvis dine behov endres, kan du enkelt avinstallere en pakke med avinstallere kommando:
bower avinstallere jquery
Så, vi har våre pakker installert. Nå vil vi bruke dem. Husk, Bower er bare en pakkebehandling, så det er ingen Bower-spesifikk måte å bruke disse pakkene på. For nå holder vi bare med vanlige gamle skriptetiketter:
Åpne dette i en nettleser, og du vil se teksten "JQUERY!"; Det er tegnet at det fungerer!
Som nevnt ovenfor har Bower ikke et system for lasting av pakker på siden din, men det betyr ikke at du ikke bør bruke en. Bower er un-opinionated og overlater det til deg å velge den metoden du er mest komfortabel med. Kanskje det er flere skriptetiketter som sammenføyer og reduserer på byggetid. Kanskje det krever JJ (som vi kan få, via Bower). Kanskje det er Sprockets eller et annet systempakke for server side. Det er helt opp til deg.
Det er noen andre Bower-kommandoer som du burde vite. Først, bower liste eller bower ls vil liste opp pakkene du for øyeblikket har installert.
Merk at dette ikke betyr at vi har installert jQuery to ganger; det betyr at jQuery er en avhengighet av "sayHi" (en pakke vi skal bygge senere).
Hvis du vil se hvilken repository-URL en bestemt pakke refererer til, bruker du bower oppslag kommando, bruker pakkenavnet som argumentet:
De bower info kommandoen vil fortelle deg hvilke versjoner av en pakke som er tilgjengelige:
Til slutt, for å fjerne alle pakkene som er cachet til ~ / .Bower, løpe bower cache-clean:
Accentsconagua
component.json FilDe component.json Filen er en viktig del av Bower-pakkene. Vi ser på å lage en pakke neste; men først, la oss se på hvordan vi kan bruke en component.json fil for å gjøre installering av pakker for et (ikke-pakke) prosjekt litt enklere.
Det er bare fire egenskaper som Bower bruker i component.json fil. Først er navnet på prosjektet; enkelt nok.
"navn": "MyProject"
Neste er et versjonsnummer:
"navn": "MyProject", "version": "0.0.1"
De hoved- Egenskapen er for å definere delene av komponenten din, men siden vi ikke bygger en komponent ennå, kommer vi tilbake til det. Den endelige eiendommen er avhengig, som skisserer hvilke pakker vår komponent (eller i dette tilfellet vårt prosjekt) avhenger av. Det er et objekt; og for hver eiendom er nøkkelen pakkenavnet og verdien er versjonen.
"navn": "MyProject", "version": "0.0.1", "avhengigheter": "ryggrad": "nyeste", "krav": "2.1.1"
Nå hvis du oppretter en prosjektmappe og legger det ovenfor i din component.json fil, kan vi installere alle komponentene ved å kjøre:
bower installasjon
Og nå er alle våre pakker installert. Hvis vi etterpå vil installere andre pakker og inkludere dem i vår component.json, vi kan bruke --lagre flagg.
bower install jquery - save
Nå kan du åpne vår component.json filen og se at en oppføring for jQuery ble lagt til vår avhengig gjenstand.
La oss pakke opp denne opplæringen ved å bygge en super enkel pakke av oss selv, og installere den via Bower. Det vil være en ganske meningsløs pakke, men det vil dekke nesten hvert trinn i prosessen med å lage en pakke.
La oss bygge en super enkel pakke.
Opprett et prosjektkatalog, kalt si hei. Innenfor det begynner vi med vår component.json fil. Du er kjent med alle eiendommene, bortsett fra hoved-.
"navn": "SayHi", "versjon": "1.0.0", "main": "./sayhi.js", "avhengigheter": "jquery": "latest"
De hoved- eiendom bør være banen til hovedfilen som utgjør pakken din Hvis du har flere filer, kan du sette den til en rekke stier. For å være ærlig er jeg ikke helt sikker på hva dette gjør. Du har bare lov til å ha en fil av hver type (så en .html fil eller en .js fil) i din hoved- array, og Bower vil fortsatt laste ned hele arkivet, og ikke bare hovedfilene når du installerer det. Jeg finner ingen dokumentasjon som tydelig viser hva det er for, men jeg kan finne andre lurer på det samme. Kanskje det vil bli brukt i fremtidige versjoner av Bower. Hvis du har noen informasjon om dette, vennligst legg igjen en kommentar nedenfor!
Uansett, nå er det på tide å lage Git-depotet.
git init git legg til component.json git commit -m 'added component.json'
Som du har sett, når vi installerer avhengighetene til pakken vår mens du er i utvikling, får vi en komponenter mappe i vår repo. Jeg har sett på flere forskjellige komponentreposer, og ingen av dem har dette komponenter mappen er sjekket inn, så vi skal legge den til i .gitignore fil; Avhengighetene vil automatisk bli installert når en bruker installerer pakken. Når vi utvikler for Node.js, gjør vi det samme med node_modules mappe og package.json fil.
Så, i en .gitignore fil:
komponenter
Og så:
git add .gitignore git commit -m 'lagt til .gitignore fil' bower install
Nå kan vi skrive våre sayhi.js kode:
funksjon sayHi (selector) var el = $ (selector); returfunksjon (navn) el.text ("Hei" + navn + "!"); Det er ganske enkelt; vi passerer bare si hei fungere en väljare for et element, og det returnerer en funksjon som kan ta et navn og skrive meldingen til det elementet. Jeg har gjort det på denne måten fordi det gjør at vi kan "cache" elementet, og fordi det gjør koden litt mer interessant.
Ok, nå må vi forplikte det:
git legg til sayhi.js git commit -m 'added sayhi.js'
Det endelige trinnet er å legge til en Git-tag med versjonsnummeret, fordi det er hvordan Bower skiller versjon:
git tag -a 1.0.0 -m 'sayHi v1.0.0'
Det neste trinnet ville være å presse dette depotet opp til GitHub, og deretter registrere pakken med Bower. Registrering er enkel: bruk bower register kommando, sender den navnet du vil ha pakken din til, og git-nettadressen til depotet:
bower register pakkenavn git: //your/git/url.git
Jeg skal ikke gjøre dette, fordi det er en ubrukelig pakke. Men husk at vi kan bruke Bower til å installere en lokal pakke også. Hva jeg vil gjøre, for å simulere GitHub så tett som mulig, er å lage en bare klone i dette depotet (GitHub lagrer bare repos).
git klone --bar bane / til / sayHi bane / til / sayHi.git
Lag en ny prosjektmappe utenfor din si hei mappe, cd inn på, og prøv dette:
bower installasjonsvei / til / sayHi.git
Utgangen skal fortælle deg at den ble installert helt bra, og at jQuery ble installert også. Du kan se at dette var tilfellet ved å se i komponenter mappe.
Nå kan vi bruke koden i en index.html fil:
Åpne den opp. Det fungerer!
Konfigurer Bower ved å opprette en
.bowerrcfil.
Det er ikke mye du kan gjøre for å konfigurere Bower, men det er noen ting. Konfigurer Bower ved å opprette en .bowerrc filen i din hjemmekatalog. Det er en JSON-fil med en kombinasjon av disse tre egenskapene:
katalog: navnet på komponentkatalogen det er som standard komponenter.json: navnet på komponentfilen; det er som standard components.json.endepunkt: Dette lar deg kjøre din egen Bower-server for å betjene egendefinerte pakker bakfra en brannmur. Du kan få en enkel implementering av en Bower-server på Github.For eksempel:
"katalog": "pakker", "json": "libraries.json"
Hvis du har sett på andre pakkeforvaltere, kan du kanskje lure på hva som er overbevisende om Bower, spesielt når det ser ut til å mangle mange funksjoner som andre har. Jeg hadde det samme spørsmålet også. Men etter å ha tatt et grep om hvordan du bruker Bower, gjorde denne linjen fra FAQ mye mer mening:
Bower er en komponent på lavere nivå enn Jam, Volo eller Ender. Disse lederne kan forbruke Bower som en avhengighet.
Så selv om du ikke bruker Bower av seg selv, er det godt å vite kommandoene, fordi andre verktøy vil bli bygget rundt det. Faktisk bruker den nye og allerede populære Yeoman Bower for pakkehåndtering. Hvis du ikke er kjent med Yeoman, er det ditt neste skritt etter å ha lest denne artikkelen!
Så det er Bower, den helt uuttalte nettleserpakken leder! Whaddaya tror? Er dette et bibliotek du vil bruke, eller kan du ikke bryr deg mindre? La oss høre det i kommentarene.
