Fala galera, beleza?
Hoje vamos falar sobre gerenciamento de pacotes com o Bower. Uma das coisas que mais me irritou quando comecei a desenvolver front-end, usando somente módulos javascript, foi justamente o gerenciamento das dependências desses módulos. Como eu tenho raízes no Java, já estava acostumado a ter o Maven ou o Gradle gerenciando toda essa parafernália de libs para mim. Depois de muito trabalho manual, acessando sites e baixando os javascripts (ou pegando somente a referência) conheci finalmente o Bower.
Vale ressaltar que o Bower não é somente um gerenciador de módulos javascript, é também um gerenciador de dependências para front-end. Mas qual a diferença? A diferença é que para ele não interessa se tem javascript, css, html, imagem etc. dentro de um pacote, o que importa é que o código está encapsulado, normalmente acessível ao público e hospedado em um repositório git.
O Bower nada mais é do que um gerenciador de pacotes.
Também é importante frisar que o Bower é apenas um gerenciador de pacotes e nada mais. Ele não oferece, por exemplo, a capacidade de concatenar ou minificar código.
Agora chega de papo e vamos ver como ele funciona!
Instalação
Antes de mais nada, é necessário ter o nodejs instalado, caso não o tenha a instalação é muito simples, basta acessar o site e fazer o download.
Com o nodejs instalado, vamos fazer a instalação do Bower através do npm. O npm é o gerenciador de pacotes do nodejs, mas você não precisará instalá-lo, uma vez que ele já vem empacotado junto ao nodejs.
$ npm install -g bower
Com este comando executado no terminal estamos mandando o npm instalar o Bower. Uma observação importante é a utilização do -g , que informa ao npm para instalar o bower globalmente. Assim, ele poderá ser usado como uma feature do sistema e não de um projeto específico.
Iniciando um projeto com o Bower
Como exemplo, vamos criar um projeto web simples. Nosso projeto possui a seguinte estrutura:
Para adicionar o Bower, vá até a pasta do projeto e digite o seguinte comando:
$ bower init
O Bower irá iniciar um wizard para gerar o arquivo bower.json. Ele fará algumas perguntas como o nome do projeto, qual a versão, solicitará uma descrição, entre outras informações. Neste exemplo utilizei todas as configurações default:
Aqui você encontra mais informações sobre as tags do arquivo bower.json.
Procurando Pacotes
Agora que você já sabe iniciar o bower no seu projeto, é chegada a hora de procurar os pacotes que deseja usar. Para isso o Bower dispõe do comando abaixo:
$ bower search "nome do pacote"
Caso você não use o termo “nome do pacote”, todos os pacotes serão listados. Se você não gosta de fazer a pesquisa no terminal, assim com eu, há a opção de pesquisar o pacote no site do bower.
Instalando Pacotes
Uma vez que já sabemos o nome do pacote a ser instalado – no nosso exemplo será o angularjs -, vamos solicitar sua instalação ao Bower.
$ bower install angularjs --save
Ao executar esse comando estamos dizendo ao Bower para instalar o pacote do angularjs. Ele será instalado dentro do diretório bower_components, como na imagem abaixo.
Também é possível notar que passei o argumento --save
. Ele indica que queremos salvar essa dependência dentro do arquivo bower.json. O novo arquivo bower.json, já com a dependência do angularjs, pode ser visto no gist abaixo:
Há outras formas de instalar os pacotes, como editar o bower.json e adicionar as dependências que necessitamos. Na sequência é só executar o comando abaixo para que as dependências que ainda não foram instaladas sejam baixadas para o diretório bower_components:
$ bower install
Atualizando e Removendo Pacotes
Se há uma nova versão disponível de um pacote que estamos usando, o Bower pode fazer essa atualização de uma forma bem simples:
$ bower update
Com esse comando solicitamos ao bower que atualize todos os pacotes que estão como dependência dentro do arquivo bower.json.
Por fim, temos a opção de desinstalar um pacote utilizando o comando uninstall:
$ bower uninstall angularjs
Se quisermos remover também a referência do bower.json precisamos utilizar a flag --save
.
Há outros comandos que não abordei aqui como o list, que serve para listar os pacotes locais e informar se há uma versão mais atual do pacote que estamos usando. Neste link você pode ver quais os outros comandos disponíveis.
E por hoje é isso pessoal. O Bower é uma excelente ferramenta para mantermos as nossas bibliotecas sempre atualizadas e organizadas, vamos utilizá-lo.
Abraços e até a próxima!