Share
Naarmate het webplatform volwassener werd, zijn de tools voor het beheer van onze projecten ook volwassen geworden. In deze zelfstudie laat ik je kennismaken met een van deze hulpprogramma's waarmee je de afhankelijkheden van je project aanzienlijk eenvoudiger kunt beheren: Bower.
Toen ik voor het eerst naar Bower keek, wist ik niet precies hoe het paste: het was niet alleen een JavaScript-pakketbeheerder, zoals Jam, en het was geen module-loader, zoals RequireJS. Het noemt zichzelf een browserpakketbeheerder, maar wat betekent dit precies? Hoe is dat anders dan een JavaScript-pakketbeheerder? Het grootste verschil is dat Bower niet alleen JavaScript-bibliotheken verwerkt: het beheert alle pakketten, ook als dat HTML, CSS of afbeeldingen betekent. In dit geval, a pakket betekent elke ingekapselde code van een derde partij, meestal publiek toegankelijk vanuit een Git-repository.
Bower is net een pakketbeheerder.
Het belangrijkste om op te merken is dat Bower dat is net een pakketbeheerder en niets anders. Het biedt niet de mogelijkheid om code samen te voegen of te verkleinen, het biedt geen ondersteuning voor een modulesysteem zoals AMD: het enige doel is om pakketten te beheren.
Genoeg chatten: laten we eens kijken hoe dit ding werkt!
Voordat we Bower daadwerkelijk kunnen gebruiken, moeten we het natuurlijk installeren. Dit is gemakkelijk: gebruik NPM:
npm install -g bower
Zorg ervoor dat u het wereldwijd installeert (met -g), omdat dit projectspecifiek is.
Als u de naam van het gewenste pakket niet weet, kunt u pakketten vinden met behulp van de prieel zoeken commando. Als u het zonder een zoekterm gebruikt, krijgt u een lijst met alle beschikbare prikpakketten. Gebruik een zoekterm om die te filteren.
prieel zoeken prieel zoeken backbone prieel zoeken bootstrap
Als u liever via een GUI zoekt, gaat u naar http://sindresorhus.com/bower-components/.
Zodra u het pakket hebt gevonden dat u wilt installeren, gebruikt u gewoon installatie van prieel om het te installeren.
prieel installeer jQuery bower installeer backbone
Als u een specifieke versie van een pakket wilt installeren, voegt u het versienummer erna toe, met een hash tussen:
prieel installeer jQuery # 1.7.0
Kijk dat eens componenten map die Bower zojuist voor ons heeft gemaakt. Binnenin zou je drie mappen moeten zien: ruggegraat, jQuery, en laag streepje. Underscore is geïnstalleerd omdat het afhankelijk is van Backbone; dat is handig! Als u vervolgens de inhoud van deze mappen vergelijkt met hun repository-URL's (van de zoek- of installeer-uitvoer), ziet u dat ze exact hetzelfde zijn. Dit illustreert het feit dat Bower op zijn meest elementaire niveau een kortere weg is voor Git.
Maar je kunt slagen voor de installatie van prieel beveel ook andere dingen. Op basis van wat we zojuist hebben gezien, is het logisch dat u een Git-URL kunt gebruiken:
prieel installeren git: //github.com/pivotal/jasmine.git
U kunt ook een link naar een enkel bestand gebruiken:
prieel installeren http://backbonejs.org/backbone-min.js
Je kunt zelfs een pakket installeren vanaf je eigen computer: iets waar je aan werkt, misschien:
prieel installeer ~ / code / secretProject
U kunt het opmerken aan de uitgang van de installatie van prieel commando dat het caching van het pakket vermeldt: het doet dit door er een kopie van op te slaan ~ / .Bower /. Bower kan deze repo vervolgens gebruiken om latere installaties van hetzelfde pakket te versnellen.
Als de volgende versie van een bibliotheek verschijnt en u deze wilt bijwerken, kunt u dit eenvoudig doen door dit uit te voeren:
prieelupdate
Merk op dat u een pakketnaam niet kunt doorgeven aan de bijwerken commando en update alleen dat individuele pakket: het zal ze nog steeds allemaal updaten. Je kunt de nieuwste versie van een enkel pakket krijgen door te draaien installatie van prieel ; het overschrijft gewoon de versie die je momenteel hebt.
Als uw behoeften ooit veranderen, kunt u eenvoudig een pakket verwijderen met de uninstall commando:
bower verwijderen jQuery
Dus we hebben onze pakketten geïnstalleerd. Nu willen we ze gebruiken. Onthoud dat Bower slechts een pakketbeheerder is, dus er is geen specifieke manier om deze pakketten te gebruiken. Voorlopig houden we vast aan normale oude script-tags:
Open dit in een browser en je ziet de tekst "JQUERY!"; dat is het teken dat het werkt!
Zoals ik hierboven al zei, heeft Bower geen systeem om pakketten op je pagina te laden, maar dat betekent niet dat je er geen zou moeten gebruiken. Bower is niet-eigenwijs en laat het aan jou over om de methode te kiezen waarmee je het meest vertrouwd bent. Misschien zijn het meerdere script-tags die samenvoegen en verkleinen tijdens de build-tijd. Misschien is het RequireJS (wat we kunnen krijgen, via Bower). Misschien is het Sprockets of een ander server-side assetverpakkingssysteem. Het is helemaal aan jou.
Er zijn een paar andere Bower-opdrachten die u moet kennen. Eerste, lijst met bogen of prieel ls toont de pakketten die u momenteel hebt geïnstalleerd.
Merk op dat dit niet betekent dat we jQuery twee keer hebben geïnstalleerd; het betekent dat jQuery een afhankelijkheid is van 'sayHi' (een pakket dat we later zullen bouwen).
Als u wilt zien naar welke repository-URL een bepaald pakket verwijst, gebruikt u de prieel opzoeken opdracht, waarbij de pakketnaam als argument wordt gebruikt:
De prieel info commando zal u vertellen welke versies van een pakket beschikbaar zijn:
Ten slotte, om alle pakketten te verwijderen die in de cache zijn opgeslagen ~ / .Bower, rennen prieel cache-schoon:
Accentsconagua
component.json het dossierDe component.json bestand is een belangrijk onderdeel van Bower-pakketten. We zullen kijken naar het volgende pakket; maar laten we eerst eens kijken hoe we een kunnen gebruiken component.json bestand om het installeren van pakketten voor een (niet-pakket) project een beetje eenvoudiger te maken.
Er zijn slechts vier eigenschappen die Bower gebruikt in de component.json het dossier. De eerste is de naam van het project; simpel genoeg.
"naam": "MyProject"
Volgende is een versienummer:
"name": "MyProject", "version": "0.0.1"
De hoofd property is voor het definiëren van de onderdelen van uw component, maar omdat we nog geen component opbouwen, komen we hierop terug. Het uiteindelijke eigendom is afhankelijkheden, waarin wordt geschetst van welke pakketten onze component (of in dit geval ons project) afhankelijk is. Het is een object; en voor elke eigenschap is de sleutel de pakketnaam en de waarde de versie.
"name": "MyProject", "version": "0.0.1", "dependencies": "backbone": "latest", "requirejs": "2.1.1"
Nu, als je een projectmap aanmaakt en het bovenstaande in je plaatst component.json bestand kunnen we alle componenten eenvoudig installeren door het uitvoeren van:
installatie van prieel
En nu zijn al onze pakketten geïnstalleerd. Als we achteraf andere pakketten willen installeren en deze in onze component.json, we kunnen de gebruiken --opslaan vlag.
prieel installeer jQuery - opslaan
Nu kunt u onze openen component.json bestand en zien dat een vermelding voor jQuery is toegevoegd aan onze afhankelijkheden voorwerp.
Laten we deze tutorial ombouwen door zelf een supereenvoudig pakket te maken en het via Bower te installeren. Het zal een vrij zinloos pakket zijn, maar het zal bijna elke stap van het proces van het maken van een pakket omvatten.
Laten we een supereenvoudig pakket bouwen.
Maak een projectmap, genaamd zeg gedag. Daarin beginnen we met onze component.json het dossier. U bent bekend met alle eigenschappen, behalve hoofd.
"name": "SayHi", "version": "1.0.0", "main": "./sayhi.js", "dependencies": "jquery": "latest"
De hoofd eigenschap moet het pad naar het hoofdbestand zijn dat uw pakket vormt; als u meerdere bestanden hebt, kunt u dit instellen op een reeks paden. Om eerlijk te zijn, weet ik niet precies wat dit doet. Je mag maar één bestand van elk type hebben (dus één .html bestand, of een bestand .js bestand) in uw hoofd array en Bower downloadt nog steeds de hele repository en niet alleen de belangrijkste bestanden wanneer u het installeert. Ik kan geen documentatie vinden die duidelijk aangeeft waar het voor is, maar ik kan merken dat anderen zich hetzelfde afvragen. Misschien zal het in toekomstige versies van Bower worden gebruikt. Als u hierover informatie heeft, kunt u hieronder een reactie achterlaten!
Hoe dan ook, nu is het tijd om de Git-repository te maken.
git init git add component.json git commit -m 'heeft component.json' toegevoegd
Zoals je hebt gezien, zullen we, als we de afhankelijkheden van ons pakket installeren terwijl we in ontwikkeling zijn, een componenten map in onze repo. Ik heb verschillende repos van componenten bekeken, en geen van deze heeft dit componenten map ingecheckt, dus we gaan het toevoegen aan de .gitignore het dossier; de afhankelijkheden worden automatisch geïnstalleerd wanneer een gebruiker ons pakket installeert. Bij de ontwikkeling voor Node.js doen we hetzelfde met de node_modules map en de package.json het dossier.
Dus in a .gitignore het dossier:
componenten
En dan:
git add .gitignore git commit -m '.gitignore file' bower install toegevoegd
Nu kunnen we onze schrijven sayhi.js code:
function sayHi (selector) var el = $ (selector); return-functie (naam) el.text ("Hallo" + naam + "!"); Het is vrij eenvoudig; we passeren gewoon de zeg gedag functioneer een selector voor een element en retourneert een functie die een naam kan aannemen en het bericht naar dat element kan schrijven. Ik heb het op deze manier gedaan omdat het ons toestaat om het element te "cachen" en omdat het de code een beetje interessanter maakt.
Oké, nu moeten we het plegen:
git add sayhi.js git commit -m 'added sayhi.js'
De laatste stap is het toevoegen van een Git-tag met het versienummer, omdat Bower zo de versie onderscheidt:
git tag -a 1.0.0 -m 'sayHi v1.0.0'
De volgende stap zou zijn om deze repository naar GitHub te pushen en het pakket vervolgens bij Bower te registreren. Registratie is eenvoudig: gebruik de prieelregister commando, doorgeven van de naam die je wilt dat je pakket heeft, en de git URL voor de repository:
bower register packageName git: //your/git/url.git
Ik ga dit niet doen, omdat het een waardeloos pakket is. Maar vergeet niet dat we Bower ook kunnen gebruiken om een lokaal pakket te installeren. Wat ik ga doen, om GitHub zo dicht mogelijk te simuleren, is om een blote kloon van deze repository te maken (GitHub slaat kale repos op).
git clone --bare pad / naar / sayHi path / to / sayHi.git
Maak een nieuwe projectmap buiten uw zeg gedag map, CD in to, en probeer dit:
prieel installeren pad / naar / sayHi.git
De uitvoer zou u moeten vertellen dat het prima is geïnstalleerd en dat jQuery ook is geïnstalleerd. Je kunt zien dat dit het geval was door te kijken in de componenten map.
Nu kunnen we de code gebruiken in een index.html het dossier:
Maak het open. Het werkt!
Configureer Bower door een
.bowerrchet dossier.
U kunt niet veel doen om Bower te configureren, maar er zijn een paar dingen. Configureer Bower door een .bowerrc bestand in uw thuismap. Het is een JSON-bestand met een combinatie van deze drie eigenschappen:
directory: de naam van de componentendirectory; het is standaard ingesteld op componenten.json: de naam van het componentenbestand; het is standaard ingesteld op components.json.eindpunt: Hiermee kunt u uw eigen Bower-server uitvoeren om aangepaste pakketten van achter een firewall te gebruiken. U kunt een eenvoudige implementatie van een Bower-server op Github krijgen.Bijvoorbeeld:
"directory": "packages", "json": "libraries.json"
Als je naar andere pakketbeheerders hebt gekeken, vraag je je misschien af wat er aan de hand is met Bower, vooral als het lijkt te ontbreken aan veel functies die andere hebben. Ik had dezelfde vraag ook. Maar nadat u greep had gekregen op het gebruik van Bower, was deze regel uit de FAQ veel logischer:
Bower is een component op een lager niveau dan Jam, Volo of Ender. Deze managers kunnen Bower gebruiken als een afhankelijkheid.
Dus zelfs als u Bower niet zelf gebruikt, is het goed om de commando's te kennen, omdat er andere hulpmiddelen omheen worden gebouwd. In feite gebruikt de nieuwe en al populaire Yeoman Bower voor pakketbeheer. Als je Yeoman nog niet kent, is dat je volgende stap na het lezen van dit artikel!
Dat is dus Bower, de volledig onbetrouwbare browserpakketbeheerder! Whaddaya denk je? Is dit een bibliotheek die je gaat gebruiken, of kan het je niet schelen? Laten we het horen in de reacties.
