Dica Rápida: O Que Fazer Quando Encontrar Um Arquivo do Bower

() translation by (you can also view the original English article)

Você, alguma vez, já clonou ou baixou um repositório do GitHub, só para se deparar com vários arquivos estranhos que não reconhece?

Digamos, por exemplo, que está trabalhando em um site e precisa de uma biblioteca JavaScript, ou mesmo de uma CSS, para adicionar alguma funcionalidade ao seu projeto. Você encontra a biblioteca perfeit\ em um repositório do GitHub e a baixa de imediato. Quando extrai o conteúdo do pacote, descobre inúmeros arquivos estranhos, dos quais, um é o bower.json.

Além disso, talvez tenha encontrado instruções no repositório, geralmente, dizendo algo como:

Instalação com o Bower: bower install bootstrap.

Você se pergunta para que serve esse arquivo e, ainda por cima, porque deveria instalá-lo usando o Bower. Recentemente, um amigo web designer fez essas mesmas perguntas para mim e, suspeito, há inúmeras outras pessoas que também estão confusas. Se você é uma delas, essa dica rápida deve ajudar!

Um Arquivo Bower

O Bower é um gerenciador de pacotes para a web. Ele ajuda a administrar dependências: arquivos (talvez de terceiros, geralmente, publicamente disponíveis através do GitHub) que você precisa para seu projeto.

O bower.json, arquivo do qual estamos falando, tem um papel fundamental no ambiente do Bower. Antes, chamávamos de component.json, mas, recentemente, o nome foi trocado para bower.json, para evitar conflitos que possam ocorrer com outras ferramentas que usem o mesmo nome de arquivo.

O arquivo bower.json ajuda o Bower a entender o projeto. Ele salva metadados, como o nome do projeto, a versão, o autor, a licença, as dependências e outros. A informação está estruturada em formato JSON que, tipicamente, se parece com o que vemos abaixo:

{
  "name": "impressionante",
	"version": "1.0.0",
	"authors": [
"John Doe"
	],
	"description": "A coisa impressionante da Galáxia",
	"license": "MIT",
	"dependencies": {
"cool-library": "1.1.2",
"good-library": "2.1.3"
	}
}

Desse arquivo JSON, legível por humanos, podemos deduzir que esse projeto é chamado de "impressionante", está, atualmente, na versão "1.0.0", foi criado por "John Doe", além de alguns outros detalhes, e que tem algumas dependências, necessárias para seu funcionamento.

Se você encontrou um arquivo bower.json em uma biblioteca, isso significa duas coisas:

Primeiro, o autor do projeto definiu que a biblioteca é um pacote do Bower. O projeto deve ter sido pulicado na Listagem do Bower, um coleção centralizada de pacotes, de modo que possa ser adicionado ao seu projeto, através da linha de comando do Bower.
Segundo, o autor do projeto deve ter usado o Bower para organizar as bibliotecas do projeto, tornando mais fácil a vida de outros desenvolvedores que a usem ou queiram estender o projeto futuramente.

O Bower usa esse arquivo de diversas maneiras. Ele usa os meta dados para mostrar informações sobre o pacote quando buscamos pela Listagem do Bower.

Você encontrará alguns projetos conhecidos na listagem do Bower

O Bower também analisa o arquivo quando executamos diversos comandos, como o bower version e o bower install.

Bower Install

bower install é o comando para a instalação de um pacote que esteja registrado na Listagem do Bower. Esse comando também instalará pacotes listados no arquivo bower.json, na seção "dependencies". Por padrão, esses pacotes serão adicionados a um diretório chamado bower_components.

Como exemplo, instalemos o Animate.css e o Bootstrap com o Bower.

De início, você precisará, primeiro, instalar o Bower. Veja o artigo Conheça o Bower: Um Administrador de Pacotes para a Web para mais detalhes sobre o procedimento. Com o Bower instalado, você pode digitar o seguinte comando no Terminal ou na Linha de Comando (se estiver usando o Windows), que instalará esses pacotes, simultaneamente:

1	bower install animate.css bootstrap

Você deve ser capaz de encontrá-los na pasta bower_components.

Pastas do Animate.css e Bootstrap adicionadas a bower_components

Como pode ver acima, temos um diretório extra, jquery. Isso é porque o Boostrap coloca-o como dependência; Os componentes JavaScript do Bootstrap requerem o jQuery para funcionar. Se der uma olhada no arquivo bower.json do pacote, verá ele listado ao final do arquivo, como segue:

jQuery é uma dependência adicionada ao arquivo bower.json do Boostrap

E Agora?

Assumindo que você baixou uma biblioteca com um arquivo bower.json, a primeira coisa que sugiro fazer é que o inspecione em busca de dependências.

Como exemplo, baixei uma biblioteca JavaScript chamada Revealer.js. Revealer.js, aparentemente, requer o Reveal.js para funcionar. Podemos encontrá-lo listado como uma dependência dentro do arquivo bower.json, como mostrado abaixo:

1	{
2	// ...
3	"dependencies": {
4	"reveal.js": "~2.5.0"
5	},
6	// ...
7	}

Só para confirmar, se abrirmos o arquivo index.html da pasta views, encontraremos o arquivoreveal.js como link em uma tag script, dessa forma.

1	<script src="components/reveal.js/js/reveal.min.js"></script>

Precisamos, agora, abrir o diretório da biblioteca no Terminal ou na Linha de Comando, e digitar:

1	bower install

Como mencionado anteriormente, esse comando baixará todos os pacotes registrados no arquivo bower.json de uma só vez.

Nota: Nessa caso em particular, o pacote foi adicionado ao diretório public/components, como especificado no arquivo .bowerrc. Algumas vezes, um arquivo .bowerrc acompanha o arquivo bower.json e é usado para especificar diretórios customizados de instalação.

Atualizando o Pacote

O pacote que acabamos de instalar, pode ser atualizado com o tempo, seja para resolver algum problema (bug) ou para adicionar novos recursos. Com o Bower, atualizar as bibliotecas é bem simples. Antes de tudo, digite:

1	bower list

Isso listará todos os pacotes instalados em nosso projeto e mostrará a última versão disponível. Em nosso caso, mostrará que o Reveal.js tem uma nova versão. Então, vamos atualizá-lo.

A versão mais nova do Reveal.js já está disponível

Digite esse comando para atualizar o Reveal.js.

1	bower install --save reveal.js#2.6.2

Isso alterará a versão salva no arquivo bower.json do nosso projeto.

1	{
2	// ...
3	"dependencies": {
4	"reveal.js": "2.6.2"
5	},
6	// ...
7	}

Conclusão

O Bower é uma ferramenta muito útil para a administração de bibliotecas em projetos. É como se tivéssemos nossa própria AppStore ou Google Play; podemos instalar, atualizar e remover bibliotecas, facilmente. Espero que essa dica tenha ajudado a acabar com qualquer confusão que você tenha passado ao baixar bibliotecas de terceiros, mostrando os benefícios de usar o Bower em seu fluxo de trabalho.

Referências Adicionais

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!