Asp.Net vNext – Gerenciadores de Pacotes (Bower e NPM)

Asp.Net vNext – Gerenciadores de Pacotes (Bower e NPM)

Fala galerinha tudo certo com 6?

Após algum tempo sem escrever, decidi escrever este breve post sobre como utilizar Bower e NPM no Visual Studio 2015 com Asp.Net vNext.

Antes de começar, vamos a uma breve explicação sobre esses dois gerenciadores de pacotes.

Nas versões anteriores do Visual Studio tínhamos como padrão e nativo o Nuget como principal gerenciador de pacotes e dependências, era possível utilizar gerenciadores de pacotes “terceiros”, porém com uso de plugins no Visual Studio, porém na versão 2015 da IDE é possível utilizar alguns gerenciadores de pacotes “terceiros” de forma nativa no VS.

Vale lembrar que ambos, Bower e NPM são desenvolvidos em NodeJS, então provavelmente quando você fez instalação do VS2015 o instalador já tenha instalado o NodeJS em sua máquina.

Para quem não sabe, o que raios é Bower e NPM , ambos são gerenciadores de pacotes, assim como falado anteriormente baseados em NodeJS e portanto open source, ambos são amplamente utilizados em projetos front-end.

Então se ambos gerenciam pacotes front-end, qual a diferença entre eles?

NPM foi criado para instalar pacotes e módulos NodeJS, usados em ambiente de desenvolvimento que utilizam ferramentas baseadas em NodeJS, como Karma, JSLint, minifiers, task runners e assim por diante, NPM também controla e gerencias as dependências entre esses módulos.

Já o Bower foi criado para gerenciar pacotes e dependências no front-end. Como bibliotecas jQuery, Angular, Bootstrap, underscore e etc.

Ambos gerenciadores tem seus pacotes gerenciados por um arquivo de configuração escrito em formato json.

Vamos ao exemplo, utilizando Bower e NPM:

1-) Vamos ao nosso digníssimo Visual Studio

post_vs_bower_npm (1)

Visual Studio – Bower e NPM

 

2-) Vamos iniciar um projeto.

post_vs_bower_npm (2)

Visual Studio – Bower e NPM

 

3-) Crie um projeto Web -> ASP.NET Web Application

post_vs_bower_npm (3)

Visual Studio – Bower e NPM

 

4-) Escolha o template vazio do ASP.NET 5

post_vs_bower_npm (4)

Visual Studio – Bower e NPM

 

5-) E “Voialá”, temos nosso esqueleto de projeto pronto. #ateaquinenhumanovidade

post_vs_bower_npm (5)

Visual Studio – Bower e NPM

 

6-) Vamos adicionar os arquivo de configuração dos gerenciadores de pacote, vamos começar pelo NPM.

post_vs_bower_npm (6)

Visual Studio – Bower e NPM

 

7-) Escolha no menu a esquerda “Client-side” e nos templates procure pelo arquivo de configuração do NPM, não altere o nome do arquivo.

post_vs_bower_npm (7)

Visual Studio – Bower e NPM

 

😎 Após adicionado o arquivo de configuração, você pode abrir o arquivo json de configuração e já teremos algumas informações básicas, dentro do nó “devDependencies” você irá inserir o nome e a versão dos pacotes que deseja instalar, caso você não saiba em qual versão esta o pacote o intellisense te ajuda, no meu exemplo estarei instalando o KARMA que é um Test Runner báseado em NodeJs que realiza entre outros testes unitários em seu JS. (Não farei o exemplo de uso do KARMA nesse post).

post_vs_bower_npm (8)

Visual Studio – Bower e NPM

9-) Após inserir o nome e a versão do pacote, salve o arquivo e o Visual Studio irá fazer o trabalho de executar o comando NodeJs responsável por instalar os pacotes e dependências.

post_vs_bower_npm (9)

Visual Studio – Bower e NPM

 

10-) Feito isso, será criado na raiz de seu projeto uma pasta chamada “node_modules“, todos os módulos e pacotes que você instalar estarão la dentro para uso.

11-) Vamos instalar pacotes front-end utilizando bower. Adicione um arquivo de configuração na sua solution.

Capturar

Visual Studio – Bower e NPM

 

12-) Após criar o arquivo, faça da mesma forma que o NPM e insira o nome do pacote e a versão. Feito isso o Visual Studio irá se encarregar de chamar o comando que faz o download dos pacotes.

Capturar3

Visual Studio – Bower e NPM

 

13-) Caso algum erro ocorre e nenhum dos pacotes seja transferido você pode forçar o “Restore Packages” clicando com o botão direito sobre a pasta “Dependencies” e escolhendo a opção “restore packages”.

Capturar5

Visual Studio – Bower e NPM

 

14-) Diferente do NPM, o BOWER cria uma pasta chamada LIB no diretório wwwroot de seu projeto para que ele seja acessível para as páginas html fazer referencia as bibliotecas que você desejar utilizar.

Conclusão

De fato ambos são muito parecido em seu uso e funcionalidades, porém cada um cuida de uma especificidade diferente no desenvolvimento do front-end de sua aplicação, enquanto o NPM trata de cuidar de ferramentas e módulos que você venha a usar em teste, task runner e até mesmo deploy. O bower atua na gerencia das dependências e bibliotecas front-end que você possa usar em seu projeto.

Mas e o Nuget, já tínhamos ele, por que mudar? Essa é uma pergunta um pouco difícil de responder, pois o NUGET gerencia pacotes .Net muito bem, porém quando precisamos gerenciar pacotes front-end a eficiência não é a mesma, visto que tanto NMP quanto Bower busca os pacotes de seus repositórios GIT originais, oque “NEM SEMPRE” ocorre com o nuget para pacotes front-end.

Vale lembrar também que Bower e NPM são vastamente utilizados pela comunidade open-source e em projeto front-end.

Junto com o Asp.Net vNext que será lançado no começo de 2016 ainda muitas outras novidades estão vindo.

Obrigado por ter vindo até, se você curtiu esse simples porém objetivo post, deixe seu comentário abaixo, pode xingar, mas pode elogiar também.

Vlw, até a próxima.

user

Related Posts