Skip to content

NPM e Bower juntos no ASP.NET Core. Duas grandes ferramentas

No artigo de hoje irei explicar sobre NPM e Bower que são novidades no ASP.NET Core que será lançado esse ano. Os dois são gerenciadores de pacotes, mas cada um tem uma responsabilidade diferente. Também explico por que a Microsoft resolveu apostar neles e onde fica o Nuget nesse contexto. Espero que gostem do artigo de hoje e bora começar!

Que o ASP.NET Core mudou, isso muita gente já sabe, para quem não entendeu a mudança ou ainda está por fora eu oriento a leitura de um outro artigo meu que fala sobre o assunto. Mas se você ainda tem duvida sobre as mudanças e pensa que vai ter que reaprender o novo ASP.NET está enganado. Você ainda vai utilizar o bom MVC com suas Controllers e Actions. Ainda temos o Razor, com algumas leves mudanças. WEB API ainda existe porem agora dentro da caixa MVC, ou seja, Controller e WEB API herdam do mesmo objeto. Como eu disse no meu primeiro artigo as mudanças são mais internas que externas.

Mas uma coisa que me chamou muito a atenção quando vi o novo ASP.NET foi a introdução do NPM, Bower e Gulp. Hoje vou explicar sobre NPM e Bower e em um próximo artigo explicarei sobre Gulp.

 

NPM

Todo mundo deve ter uma breve ideia do que seja Node. Todos devem dizer que é algo onde se tem JS no servidor. Isso é um resumo e não chega a estar errado. Mas se você quiser saber mais sobre Node indico outro artigo meu que da uma boa introdução sobre o assunto.

Node é uma das plataformas de desenvolvimento mais utilizadas, ela pode não estar sendo utilizada diretamente para desenvolvimento, mas pode ser utilizada para auxiliar o desenvolvimento e é assim que ela foi introduzida no novo ASP.NET. Você não vai utilizar Node para desenvolver, mas ele vai te ajudar a desenvolver, você pode não querer enxergar ele, mas ele está lá trabalhando por você.

Mas se ele faz seu trabalho eu preciso aprender Node? Eu respondo que sim, o próximo ASP.NET não irá funcionar apenas no Windows, e com isso um belo dia você pode estar em uma empresa onde seu sistema operacional seja Linux e ai adeus Visual Studio. Outro motivo que dou é que não faz mal nenhum saber um pouco mais sobre coisas que nos cercam em nosso processo de desenvolvimento.

Como eu disse mais acima, Node é um auxiliar e NPM é o seu gerenciador de pacote. Através dele é possível instalar Yeoman para gerar um esqueleto do novo projeto. Instalar o Bower para gerenciar pacotes clientes e ainda ter o Gulp para tarefas de minificação de arquivos e geração da publicação do projeto. Isso tudo só acontece graças ao NPM, pois todos esses são pacotes criados para o mundo Node e que agora também é utilizado em desenvolvimento ASP.NET.

Outras plataformas de desenvolvimento também estão utilizando o Node como auxiliar, isso é uma tendência e a Microsoft também está apostando nisso.

Quando você cria um novo projeto ASP.NET Core é possível ver a utilização do Node no Visual Studio conforme a imagem abaixo, onde é mostrado todos os pacotes instalados através do NPM:

imagem1

Dentro de “Dependencies” é possível ver os pacotes que falei mais acima, de inicio todos esses pacotes são utilizados pelo Gulp que estarei explicando em outro artigo. Se você ainda tem duvida sobre NPM, ele é igual ao nosso Nuget.

Ai você deve estar se perguntando, como o NPM já instalou todos esses pacotes? Simples, todos esses pacotes estão “cadastrados” em um arquivo chamado package.json conforme a imagem abaixo. Esse arquivo, como o próprio nome já diz, informa todos os pacotes que são utilizados pelo sistema. Note que os pacotes instalados pelo NPM estão dentro do “DevDependencies” que são pacotes necessários apenas para o desenvolvimento. Na publicação esses pacotes não são levados.

imagem2

Caso você precise de mais pacotes, você poderá instalar apenas alterando este arquivo que ao começar a digitar, o NPM já busca pacotes similar e pronto, no momento que você da Enter, o NPM começa a instalar o pacote (Isso é maravilhoso). A outra maneira é através do CMD onde você informa algo parecido como npm install <pacote>. Nesse momento o pacote instalado começa a aparecer como dependência.

 

Bower

Bower, assim como o NPM, é uma ferramenta que gerencia pacotes, mas desta vez pacotes clientes como jQuery, Angular e tantos outros. Nesse momento vem uma forte interrogação, para que utilizar o Bower sendo que o Nuget já faz isso? Confesso que inicialmente essa também foi minha duvida, mas quando fui pesquisar e sair da plataforma ASP.NET para estudar outras, percebi que já havia um padrão de utilizar o Bower para gerenciamento de pacotes clientes. Isso por que ele é referencia e o desenvolvedor que cria um pacote novo já desenvolve para ser armazenado nele.

No caso do Nuget não funciona assim, alguém tem que ir e replicar esse pacote para deixar preparado também no Nuget. Pensando nisso a Microsoft resolveu mudar, se o Bower é uma referencia de pacotes clientes então vamos utilizar e o Nuget fica responsável apenas por pacotes .Net (Como Identity, MVC, Web API). Nesse contexto fica claro que o Nuget continua pois a base de pacotes em .Net é vasta.

imagem3

Conforme a imagem acima, o Bower esta também como dependências no Visual Studio. Na imagem é possível ver sua pasta e os pacotes clientes que ele está gerenciando.

Da mesma forma que funciona no NPM, no Bower nos também temos um arquivo de configuração chamado bower.json que gerencia os pacotes.

imagem4

Caso você queira adicionar, remover ou alterar basta alterar este arquivo que ao começar a digitar ele traz os pacotes similares e ao enter o pacote é adicionado. A imagem abaixo mostra bem esse comportamento que funciona da mesma forma no NPM.

imagem5

No ASP.NET Core temos uma nova pasta chamada WWWRoot, nela temos os arquivos estáticos e os arquivos gerados como CSS e JS. Quando o Bower instala seus pacotes é enviado para a pasta lib e através deste endereço é onde o projeto fará referencia para utilizar esses pacotes.

A imagem abaixo mostra a nova pasta e a pasta lib onde o bower instala os pacotes.

imagem6

Para que o Bower instale esses pacotes dentro dessa pasta é necessária uma configuração para informar onde será a instalação. Esse arquivo de configuração chama .bowerrc e nele informamos o caminho para instalação.

 

Conclusão

NPM e Bower são novos e por default já vem instalados no projeto ASP.NET Core. Utilizar é uma questão de preferencia. Necessariamente você não precisa utilizar o Bower para utilizar um pacote jQuery ou Angular, a moda antiga de buscar na internet e baixar para o projeto ainda funciona. Mas não podemos negar a facilidade que ele nos traz para buscar novos pacotes e tudo isso sem sair da IDE. Começar a utilizar NPM e Bower talvez seja uma superação da mudança de zona de conforto e como toda mudança leva certo tempo para se acostumar.

Porem, depois que essa superação for alcançada o difícil será voltar a atrás, principalmente quando você tem um sistema legado e tem que dar manutenção.

Espero que você tenha entendido sobre NPM e Bower e o artigo termina por aqui. Até a próxima e Deus te abençoe.

 

Published in.Net Core.Net FrameworkVisual Studio

Be First to Comment

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *