LearnGearnGetting Started with Bower

Existem agora mais bibliotecas e frameworks disponíveis para desenvolvimento de front-end do que nunca. Não é raro ter cinco ou mais destas bibliotecas envolvidas em um único projeto. Mas manter o controle de todas essas bibliotecas e certificar-se de que elas estejam atualizadas pode ser complicado. Entre Bower, um gerenciador de pacotes que facilita o gerenciamento de todas as dependências front-end da sua aplicação.

Neste post de blog você vai aprender como começar a rodar com Bower. Você vai começar instalando o utilitário de linha de comando Bower e depois vai aprender sobre os vários comandos que estão disponíveis para gerenciar pacotes.

Vamos começar!

Installing Bower

Bower pode ser instalado usando npm, o gerenciador de pacotes Node. Se você ainda não tem o npm instalado, vá até o site Node.js e baixe a cópia relevante do Node.js para o seu sistema. O programa npm está incluído com a instalação do Node.js.

Após ter o npm instalado, abra o Terminal (ou Prompt de Comando) e digite o seguinte comando:

npm install -g bower

Isto irá instalar o Bower globalmente no seu sistema.

Agora que você tenha o Bower instalado, podemos começar a olhar para os comandos que são usados para gerenciar pacotes.

Finding Packages

Existem duas maneiras diferentes de encontrar os pacotes Bower. Usando o diretório de componentes online, ou usando o utilitário de linha de comando.

Para procurar por pacotes na linha de comando você usa o comando search. Isto deve ser seguido pela sua busca.

bower search <query>

Por exemplo para procurar por pacotes que contenham a palavra ‘jquery’ você poderia fazer o seguinte:

bower search jquery

Este comando retornaria um monte de resultados, alguns dos quais são exibidos no snippet abaixo.

Cada resultado exibe o nome do pacote e um endpoint do Git. Você precisará ou do nome ou do endpoint do Git para instalar um pacote.

Installing Packages

Para adicionar um novo pacote Bower ao seu projeto você usa o comando install. Isto deve ser passado o nome do pacote que você deseja instalar.

bower install <package>

Como também usar o nome do pacote, você também pode instalar um pacote especificando um dos seguintes:

• Um endpoint Git como git://github.com/components/jquery.git
• Um caminho para um repositório Git local.
• Um endpoint shorthand como components/jquery. Bower irá assumir que GitHub está sendo usado, neste caso, o endpoint é a parte após github.com na URL do repositório.
• Uma URL para um arquivo zip ou tar. O conteúdo dos arquivos será extraído automaticamente.

Você pode instalar uma versão específica do pacote adicionando um sinal de libra (#) após o nome do pacote, seguido pelo número da versão.

bower install <package>#<version>

Os pacotes instalados serão colocados em um diretório bower_components. Isto é criado na pasta onde o programa bower foi executado. Você pode alterar este destino usando as opções de configuração em um arquivo..bowerrc

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.map
    • …
  • modernizr
    • modernizr.js
    • …

Once instalado, você pode usar um pacote simplesmente adicionando uma tag <script> ou <link> à sua marcação HTML. Embora os pacotes Bower mais comumente contenham arquivos JavaScript, eles também podem conter CSS ou mesmo imagens.

<script src="https://blog.teamtreehouse.com/path/to/bower_components/jquery/jquery.min.js"></script>

Installing Packages Using a bower.json File

If you are using multiple packages within your project it’s often a good idea to list these packages in a bower.json file. Isto irá permitir-lhe instalar e actualizar múltiplos pacotes com um único comando.

{ "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true}

O exemplo simples acima mostra um ficheiro bower.json que define alguma informação sobre os projectos assim como uma lista de dependências. O arquivo bower.json é realmente usado para definir um pacote Bower, então na verdade você está criando seu próprio pacote que contém todas as dependências para sua aplicação.

As propriedades usadas neste exemplo são explicadas abaixo.

• name – O nome de sua aplicação/pacote.
• version – Um número de versão para sua aplicação/pacote.
• dependencies – Os pacotes que são requeridos por sua aplicação. Você deve especificar um número de versão para cada um desses pacotes, como mostrado no exemplo acima. Especificar latest, fará com que o Bower instale a versão mais recente de um pacote.
• private – Definir esta propriedade para true significa que você quer que o pacote permaneça privado e não deseja adicioná-lo ao registro no futuro.

Após ter o seu ficheiro bower.json configurado pode simplesmente executar o comando bower install para instalar todos os pacotes especificados.

Bower inclui um útil utilitário que o ajudará a criar um ficheiro bower.json para o seu projecto. Executando o comando bower init na raiz do seu projecto irá lançar um programa interactivo que irá criar o ficheiro para si. No entanto, você mesmo pode ainda precisar adicionar alguns pacotes ao arquivo.

Note: Para uma lista completa de propriedades que podem ser adicionadas ao seu arquivo bower.json verifique a especificação.

Listing Installed Packages

Você pode facilmente descobrir quais pacotes são instalados usando o comando list.

bower list

O snippet abaixo mostra a saída para um projeto simples que usa jQuery, Modernizr e Sass. Note que o Bower também faz uma verificação para ver se uma nova versão de cada um dos pacotes está disponível.

Updating Packages

Updating a package is pretty straightforward. Se você usou um arquivo bower.json você pode executar um simples comando update para atualizar todos os pacotes de uma só vez. No entanto, a ferramenta de actualização irá respeitar as restrições de versão que especificou no ficheiro bower.json ficheiro.

bower update

Para actualizar um pacote individual, utilize novamente o comando update, desta vez especificando o nome do pacote que deseja actualizar.

bower update <package>

Desinstalar pacotes

Para remover um pacote você pode usar o comando uninstall seguido do nome do pacote que você deseja remover.

bower uninstall <package>

É possível remover múltiplos pacotes de uma vez listando os nomes dos pacotes.

bower uninstall jquery modernizr sass-bootstrap

Pensamentos Finais

Os gerentes de pacotes revolucionaram a forma como compartilhamos o código. Eles tornaram o uso de bibliotecas de código mais fácil do que nunca, e tiraram muito da dor de cabeça de lidar com atualizações.

Por um longo tempo os desenvolvedores front-end olharam para projetos como RubyGems com inveja; desejando que um dia nós também tivéssemos uma maneira direta de gerenciar as dependências dos projetos. Bower nos forneceu essa ferramenta. À medida que mais grandes bibliotecas se tornam comuns entre as nossas aplicações web, a complexidade dos nossos projectos irá inevitavelmente aumentar. Bower nos fornece uma forma de gerenciar essa complexidade.

Ligações úteis

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• código
• javascript
• aplicação web