A maioria das linguagens já possuem ferramentas para automatizar e facilitar esse tipo de tarefa.
Por exemplo: Java – (Maven e Ivy), Ruby – (Rubygems), Python – (pip), entre outras.
No desenvolvimento front-end, uma ferramenta que vem ganhando bastante espaço nessa área é o Bower.
Como o bower é para gerenciar componentes de front-end, pode ser adicionado em qualquer projeto, independente do seu back-end ser Java, Ruby, Python, Node, PHP, etc.
Andei pesquisando a respeito dessa ferramenta e senti a falta de artigos em português que ensinem o passo-a-passo de como incorpora-lo em nossas aplicações, por isso resolvi escrever esse tutorial, ajudar com que todos possam dar seus primeiros passos com o Bower e melhorar o gerenciamento de dependências dos seus respectivos front-ends.
Instalação
Inicialmente é necessário primeiro que você tenha o Node junto com o NPM instalado na sua máquina. Caso contrário, basta acessar o nodejs.org, fazer download e instalar. Bem simples!
Feito isso, vamos para o terminal/cmd e instalar o bower com o seguinte comando:
Para quem ainda não conhece, o NPM é um gerenciador de pacotes de programas que rodam com o Node. Aqui estamos basicamente mandando ele instalar o bower no nosso computador, uma coisa que gostaria de ressaltar é a opção -g que está dizendo para o npm instalar o bower globalmente em nossa máquina, assim ele já fica nas nossas variáveis de ambiente e podemos utiliza-lo facilmente em outros projetos.
Adicionando o Bower ao projeto
Nesse exemplo, vamos ilustrar um projeto web simples, sem back-end, mas garanto que vai ficar fácil de entender como incorpora-lo ao seu projeto, independente da linguagem. Caso vocês tenham alguma dúvida, perguntem nos comentários que vou me esforçar para ajudar.
Nosso projeto vai se chamar “zombie-striker” e terá a seguinte estrutura:
Para adicionarmos o bower, vamos até a pasta do projeto “/zombie-striker” e digitar o comando:
O bower irá iniciar um wizard para gerar o arquivo “bower.json” pedindo pra você completar as seguintes informações:
Observação: Algumas das opções acimas são válidas apenas para pacotes que vão ser distribuídos como novos componentes, por exemplo: caso você esteja criando um novo framework e queira disponibilizar aos demais através do bower .Porém, não é nosso caso, então podemos utilizar o “bower.json” gerado pelo wizard e modificar de acordo com a nossa necessidade. Caso você queira, pode pular a etapa de wizard do bower init e criar o “bower.json” na mão com as opções que você queira.
Ao terminar o wizard, você terá um “bower.json” parecido com esse:
Adicionando dependências
Como de costume na maioria dos projetos front-end, vamos utilizar o JQuery como dependência. Vou mostrar duas maneiras de fazer isso.
Editando o arquivo “bower.json”
Você pode editar o seu arquivo “bower.json” e adicionar
e em seguida executar:
Toda vez que você executa o bower install, ele verifica quais as dependências existentes no seu arquivo “bower.json” e caso elas não estejam presentes na pasta de componentes serão instaladas.
Executando o comando bower install
Outra maneira é executando o camando bower install
A opção --save serve para adicionar o componente no “dependencies” do “bower.json”.
Por padrão, o diretório que o bower utiliza pra salvar os componentes instalados é “bower_components/”, caso você queira modificar, basta criar um arquivo chamado “.bowerrc” com o seguinte conteúdo:
Depois de alterar o diretório dos componentes, o ideal é que você remova o diretório anterior, “bower_componentes” e execute o bower install, pra ele fazer download das dependências novamente. Ou simplesmente renomeie 😛
Para importar o jquery no nosso projeto é o mesmo “arroz com feijão”, só adicionar a tag script no html:
Pesquisando componentes
Caso você queira pesquisar mais componentes para adicionar ao seu projeto, é só utilizar o bower search. Por exemplo, quero adicionar o bootstrap ao meu projeto, mas não sei o nome correto do pacote.
Assim você consegue listar todos os pacotes que tenham relação com o bootstrap, é bem confuso de ver no terminal,como acontece na pesquisa de qualquer gerenciador de pacotes, mas da pra encontrar.
Dicas
Não versione o diretório de componentes
Não versione a pasta que vc estiver utilizando pra salvar os componentes gerenciados pelo bower, se a sua pasta for a padrão(“bower_components/”), coloque no seu .gitignore, assim você deixa seu repositório mais leve e evita conflitos de libs que foram adicionadas por diferentes desenvolvedores.
Atenção com as dependências
Mantenham todas as dependências configuradas no “bower.json” algumas vezes pode acontecer de você executar um bower install jquery, esquecer da opção --save ou esquecer de adicionar manualmente no “bower.json” Quando outro desenvolvedor for participar do seu projeto e executar um bower install, o jquery não vai estar lá.
Ferramenta visual para pesquisa de pacotes
Outra forma de visualizar os componentes registrados no bower de maneira mais agradável é através do site: https://sindresorhus.com/bower-components/.
That’s all folks, espero que tenham gostado, que passem a utilizar o bower em seus projetos, pois facilita muito controlar quais dependências existentes no projeto. Se quiserem pesquisar mais sobre as possibilidades que o bower oferece, basta acessar o site oficial: https://bower.io/.
Qualquer dúvida, critica ou sugestões comentem aqui em baixo.
[]’s !!!
Apoio: Conheça os pacotes NET Fone e fale ilimitado com todo o Brasil.