Gerenciar pacotes npm no Visual Studio

O npm permite que você instale e gerencie pacotes para uso em aplicativos Node.js e ASP.NET Core. O Visual Studio facilita a interação com o npm e a emissão de comandos npm por meio da interface do usuário ou diretamente. Se você não estiver familiarizado com o npm e quiser saber mais, vá para a documentação do npm.

A integração do Visual Studio com o npm é diferente dependendo do seu tipo de projeto.

ASP.NET Principais projetos

Para projetos como ASP.NET projetos principais, você pode adicionar suporte a npm em seu projeto e usar npm para instalar pacotes.

Se o seu projeto ainda não incluir um arquivo package.json , você pode adicionar um para habilitar o suporte ao npm adicionando um arquivo package.json ao projeto.

1. Para adicionar o arquivo package.json , clique com o botão direito do mouse no projeto no Gerenciador de Soluções e escolha Adicionar>Novo Item (ou pressione Ctrl + SHIFT + A). Use a caixa de pesquisa para localizar o arquivo npm, escolha o Arquivo de Configuração npm , use o nome padrão e clique em Adicionar .

2. Inclua um ou mais pacotes npm na dependencies seção ou devDependencies no package.json. Por exemplo, você pode adicionar o seguinte ao arquivo:

   "devDependencies": {
      "gulp": "4.0.2",
      "@types/jquery": "3.5.29"
   }
   

   Quando você salva o arquivo, o Visual Studio adiciona o pacote no nó Dependências / npm no Gerenciador de Soluções. Se você não vir o nó, clique com o botão direito do mouse empackage.json e escolha Restaurar pacotes. Para exibir o status da instalação do pacote, selecione saída npm na janela Saída.

   Observação

   O nó npm está disponível para a maioria dos tipos de projeto ASP.NET Core, incluindo Blazor. Para projetos MAUI Blazor, você deve usar a linha de comando npm porque nenhum nó npm estará presente no Gerenciador de Soluções.

   Você pode configurar pacotes npm usando package.jsono . Abra package.json diretamente ou clique com o botão direito do mouse no nó npm no Gerenciador de Soluções e escolha Abrir package.json.

Solução de problemas de pacotes npm

• Se você vir algum erro ao criar seu aplicativo ou transpilar o código TypeScript, verifique se há incompatibilidades no pacote npm como uma possível fonte de erros. Para ajudar a identificar erros, verifique a janela Saída npm ao instalar os pacotes, conforme descrito anteriormente neste artigo. Por exemplo, se uma ou mais versões do pacote npm tiverem sido preteridas e resultarem em um erro, talvez seja necessário instalar uma versão mais recente para corrigir erros. Para obter informações sobre como usar package.json para controlar versões de pacotes npm, consulte package.json configuração.

• Em alguns cenários ASP.NET Core, o Gerenciador de Soluções pode não mostrar o status correto para pacotes npm instalados devido a um problema conhecido descrito aqui. Por exemplo, o pacote pode aparecer como não instalado quando é instalado. Na maioria dos casos, você pode atualizar o Gerenciador de Soluções excluindopackage.json, reiniciando o Visual Studio e adicionando novamente o arquivo package.json , conforme descrito anteriormente neste artigo. Ou, ao instalar pacotes, você pode usar a janela Saída npm para verificar o status da instalação.

• Em alguns cenários ASP.NET Core, o nó npm no Gerenciador de Soluções pode não estar visível após a criação do projeto. Para tornar o nó visível novamente, clique com o botão direito do mouse no nó do projeto e escolha Descarregar projeto. Em seguida, clique com o botão direito do mouse no nó do projeto e escolha Recarregar projeto.