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:

Projeto exemplo

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:

{
  "name": "bower-exemplo",
  "version": "0.0.0",
  "homepage": "https://github.com/gabrielfeitosa/blog_exemplos",
  "authors": [
    "Gabriel Feitosa <gabfeitosa@gmail.com>"
  ],
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT"
}

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.

Pacote instalado no bower

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:

{
  "name": "bower-exemplo",
  "version": "0.0.0",
  "homepage": "https://github.com/gabrielfeitosa/blog_exemplos",
  "authors": [
    "Gabriel Feitosa <gabfeitosa@gmail.com>"
  ],
  "description": "",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "dependencies": {
    "angular": "angularjs#~1.4.6"
  }
}

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!