Share
Con la maturazione della piattaforma web, sono maturati anche gli strumenti per gestire i nostri progetti. In questo tutorial, ti presenterò uno di questi strumenti che semplifica notevolmente la gestione delle dipendenze del tuo progetto: Bower.
Quando ho guardato per la prima volta a Bower, non ero esattamente sicuro di come si adattasse: non era solo un gestore di pacchetti JavaScript, come Jam, e non era un caricatore di moduli, come RequireJS. Si definisce un gestore di pacchetti del browser, ma cosa significa esattamente? Com'è così diverso da un gestore di pacchetti JavaScript? La differenza principale è che Bower non gestisce solo le librerie JavaScript: gestirà tutti i pacchetti, anche se ciò significa HTML, CSS o immagini. In questo caso, a pacchetto indica qualsiasi codice incapsulato di terze parti, generalmente accessibile pubblicamente da un repository Git.
Bower è appena un gestore di pacchetti.
La cosa importante da notare qui è che Bower è appena un gestore di pacchetti e nient'altro. Non offre la possibilità di concatenare o minimizzare il codice, non supporta un sistema di moduli come AMD: il suo unico scopo è gestire i pacchetti.
Basta chat: vediamo come funziona questa cosa!
Ovviamente, prima di poter utilizzare Bower, dovremo installarlo. È facile: usa NPM:
npm install -g bower
Assicurati di installarlo globalmente (con -g), perché questo è specifico del progetto.
Se non conosci il nome del pacchetto che desideri, puoi trovare i pacchetti usando il ricerca pergola comando. Se lo usi senza un termine di ricerca, otterrai un elenco di tutti i pacchetti di bower disponibili. Per filtrare quelli in basso, utilizzare un termine di ricerca.
ricerca pergola ricerca pergolato ricerca backbone bower ricerca bootstrap
Se preferisci cercare tramite una GUI, vai su http://sindresorhus.com/bower-components/.
Una volta trovato il pacchetto che vuoi installare, basta usare installazione di bower per installarlo.
bower installare jquery bower installare backbone
Per installare una versione specifica di un pacchetto, includi il numero di versione dopo di esso, con un hash tra:
bower installa jquery # 1.7.0
Dai un'occhiata componenti cartella che Bower ha appena creato per noi. Al suo interno, dovresti vedere tre cartelle: spina dorsale, jquery, e sottolineare. Underscore è stato installato perché è una dipendenza di Backbone; è a portata di mano! Quindi, se si confrontano i contenuti di queste cartelle con i relativi URL di repository (dall'output di ricerca o installazione), si vedrà che sono esattamente gli stessi. Questo illustra bene il fatto che Bower è, al suo livello più elementare, una scorciatoia per Git.
Ma puoi passare il installazione di bower comando anche di altre cose. In base a ciò che abbiamo appena visto, è logico utilizzare un URL Git:
bower install git: //github.com/pivotal/jasmine.git
Puoi anche utilizzare un collegamento a un singolo file:
bower installa http://backbonejs.org/backbone-min.js
Puoi persino installare un pacchetto dal tuo computer: qualcosa su cui stai lavorando, forse:
bower install ~ / code / secretProject
Potresti notare nell'output di installazione di bower comando che menziona il caching del pacchetto: lo fa salvandone una copia in ~ / .Bower /. Bower può quindi utilizzare questo repository per accelerare le installazioni successive dello stesso pacchetto.
Se la prossima versione di una libreria viene fuori e ti piacerebbe aggiornarla, puoi farlo facilmente eseguendo questo:
aggiornamento del pergolato
Si noti che non è possibile passare il nome di un pacchetto al aggiornare comando e aggiorna solo quel singolo pacchetto: lo aggiornerà ancora. È possibile ottenere l'ultima versione di un singolo pacchetto eseguendo installazione di bower ; semplicemente sovrascriverà la versione che hai attualmente.
Se le tue esigenze cambiano, puoi facilmente disinstallare un pacchetto con disinstallazione comando:
bower disinstallare jquery
Quindi, abbiamo installato i nostri pacchetti. Ora, vogliamo usarli. Ricorda, Bower è solo un gestore di pacchetti, quindi non esiste un modo specifico di Bower per utilizzare questi pacchetti. Per ora, ci limiteremo a regolare i vecchi tag di script:
Apri questo in un browser e vedrai il testo "JQUERY!"; questo è il segno che sta funzionando!
Come accennato in precedenza, Bower non ha un sistema per caricare pacchetti sulla tua pagina, ma ciò non significa che non dovresti usarne uno. Bower non è d'accordo e lascia a te la scelta del metodo con cui ti trovi più a tuo agio. Forse sono più tag di script che concatenano e riducono al momento della compilazione. Forse è RequireJS (che possiamo ottenere, via Bower). Forse è Sprockets o un altro sistema di pacchettizzazione del lato server. Dipende solo da te.
Ci sono alcuni altri comandi di Bower che dovresti sapere. Primo, lista dei bower o bower ls elencherà i pacchetti che hai attualmente installato.
Nota che questo non significa che abbiamo installato jQuery due volte; significa che jQuery è una dipendenza di "sayHi" (un pacchetto che costruiremo in seguito).
Se vuoi vedere a quale URL di repository si riferisce un determinato pacchetto, usa il ricerca del pergolato comando, usando il nome del pacchetto come argomento:
Il informazioni sul pergolato comando ti dirà quali versioni di un pacchetto sono disponibili:
Infine, per rimuovere tutti i pacchetti memorizzati nella cache ~ / .Bower, correre bower cache-clean:
Accentsconagua
component.json FileIl component.json il file è una parte importante dei pacchetti di Bower. Vedremo la creazione di un pacchetto successivo; ma prima, diamo un'occhiata a come possiamo usare a component.json file per rendere l'installazione dei pacchetti per un progetto (non-package) un po 'più semplice.
Ci sono solo quattro proprietà che Bower usa nel component.json file. Il primo è il nome del progetto; abbastanza semplice.
"nome": "MyProject"
Il prossimo è un numero di versione:
"name": "MyProject", "version": "0.0.1"
Il principale proprietà è per definire le parti del tuo componente, ma poiché non stiamo ancora creando un componente, torneremo su di esso. La proprietà finale è dipendenze, che delinea i pacchetti da cui dipende il nostro componente (o in questo caso il nostro progetto). È un oggetto; e per ogni proprietà, la chiave è il nome del pacchetto e il valore è la versione.
"nome": "MyProject", "versione": "0.0.1", "dipendenze": "backbone": "latest", "requirejs": "2.1.1"
Ora se si crea una cartella di progetto e si inserisce quanto sopra nel proprio component.json file, possiamo installare tutti i componenti semplicemente eseguendo:
installazione di bower
E ora vengono installati tutti i nostri pacchetti. Se in seguito desideriamo installare altri pacchetti e includerli nel nostro component.json, possiamo usare il --salvare bandiera.
bower installa jquery --save
Ora puoi aprire il nostro component.json file e vedere che una voce per jQuery è stata aggiunta al nostro dipendenze oggetto.
Completiamo questo tutorial creando un nostro pacchetto super-semplice e installandolo tramite Bower. Sarà un pacchetto abbastanza privo di significato, ma coprirà quasi ogni fase del processo di creazione di un pacchetto.
Costruiamo un pacchetto super-semplice.
Crea una directory di progetto, chiamata dì ciao. Al suo interno, inizieremo con il nostro component.json file. Hai familiarità con tutte le proprietà, tranne principale.
"name": "SayHi", "version": "1.0.0", "main": "./sayhi.js", "dependencies": "jquery": "latest"
Il principale la proprietà dovrebbe essere il percorso del file principale che costituisce il pacchetto; se si dispone di diversi file, è possibile impostarlo su una serie di percorsi. Per essere onesti, non sono esattamente sicuro di cosa faccia. Puoi solo avere un file di ogni tipo (quindi, uno .html file o uno .js file) nel tuo principale array e Bower continuerà a scaricare l'intero repository e non solo i file principali quando lo si installa. Non riesco a trovare alcuna documentazione che indichi chiaramente a cosa serve, ma posso trovare altri che si chiedono la stessa cosa. Forse sarà usato nelle future versioni di Bower. Se si dispone di informazioni su questo, si prega di lasciare un commento qui sotto!
Comunque, ora è il momento di creare il repository Git.
git init git aggiungi component.json git commit -m 'aggiunto component.json'
Come hai visto, quando installiamo le dipendenze del nostro pacchetto mentre siamo in sviluppo, otterremo un componenti cartella nel nostro repository. Ho esaminato diversi repository di componenti e nessuno di essi ha questo componenti cartella selezionata, quindi lo aggiungeremo al file .gitignore file; le dipendenze verranno installate automaticamente quando un utente installa il nostro pacchetto. Durante lo sviluppo per Node.js, facciamo la stessa cosa con il node_modules cartella e il package.json file.
Quindi, in a .gitignore file:
componenti
E poi:
git aggiungi .gitignore git commit -m 'aggiunto .gitignore file' bower install
Ora possiamo scrivere il nostro sayhi.js codice:
funzione sayHi (selettore) var el = $ (selettore); return function (name) el.text ("Ciao" + nome + "!"); È piuttosto semplice; noi semplicemente passiamo il dì ciao funzione un selettore per un elemento e restituisce una funzione che può assumere un nome e scrivere il messaggio per quell'elemento. L'ho fatto in questo modo perché ci permette di "memorizzare in cache" l'elemento, e perché rende il codice un po 'più interessante.
Ok, ora dobbiamo impegnarlo:
git aggiungi sayhi.js git commit -m 'aggiunto sayhi.js'
Il passaggio finale consiste nell'aggiungere un tag Git con il numero di versione, perché in questo modo Bower distingue la versione:
git tag -a 1.0.0 -m 'sayHi v1.0.0'
Il prossimo passo sarebbe quello di spingere questo repository fino a GitHub e quindi registrare il pacchetto con Bower. La registrazione è semplice: usa il registro di bower comando, passandogli il nome che vorresti avere il tuo pacchetto e l'URL git per il repository:
registro bower packageName git: //your/git/url.git
Non ho intenzione di farlo, perché è un pacchetto inutile. Ma ricorda che possiamo usare Bower anche per installare un pacchetto locale. Quello che farò, per simulare GitHub il più fedelmente possibile, è creare un clone di questo repository (GitHub memorizza i repository nudi).
git clone --bare path / to / sayHi path / to / sayHi.git
Crea una nuova cartella di progetto al di fuori del tuo dì ciao cartella, CD in, e prova questo:
percorso di installazione di bower / to / sayHi.git
L'output dovrebbe dirti che è stato installato correttamente e che anche jQuery è stato installato. Potete vedere che questo era il caso guardando all'interno del componenti cartella.
Ora, possiamo usare il codice in un index.html file:
Aprilo. Funziona!
Configura Bower creando un
.bowerrcfile.
Non c'è molto che puoi fare per configurare Bower, ma ci sono alcune cose. Configura Bower creando un .bowerrc file nella tua home directory. È un file JSON con una combinazione di queste tre proprietà:
elenco: il nome della directory dei componenti; predefinito componenti.jSON: il nome del file dei componenti; predefinito components.json.endpoint: Consente di eseguire il proprio server Bower, per offrire pacchetti personalizzati da dietro un firewall. È possibile ottenere una semplice implementazione di un server Bower su Github.Per esempio:
"directory": "pacchetti", "json": "libraries.json"
Se hai guardato altri gestori di pacchetti, potresti chiederti che cosa sia avvincente su Bower, specialmente quando sembra che manchi di molte funzionalità di altri. Anch'io ho avuto la stessa domanda. Ma dopo aver preso confidenza su come usare Bower, questa linea delle FAQ ha molto più senso:
Bower è un componente di livello inferiore rispetto a Jam, Volo o Ender. Questi manager potrebbero consumare Bower come dipendenza.
Quindi, anche se non usi Bower da solo, è utile conoscere i comandi, perché altri strumenti saranno costruiti attorno ad esso. In effetti, il nuovo e già popolare Yeoman utilizza Bower per la gestione dei pacchetti. Se non hai ancora familiarità con Yeoman, questo è il tuo prossimo passo dopo aver letto questo articolo!
Quindi questo è Bower, il gestore di pacchetti del browser completamente privo di opinioni! Whaddaya pensa? Questa è una libreria che userai o non ti importerebbe di meno? Sentiamolo nei commenti.
