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 comandos npm e npm por meio da interface do usuário ou diretamente. Se você não estiver familiarizado com o npm e quiser saber mais, acesse a documentação do npm.

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

projetos do ASP.NET Core

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

Se o projeto ainda não incluir um arquivo package.json , você poderá 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 seção ou dependencies no devDependenciespackage.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 mousepackage.json e escolha Restaurar Pacotes. Para exibir o status de instalação do pacote, selecione a saída npm na janela Saída.

   Observação

   O nó npm está disponível para a maioria dos tipos de projeto do 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.json. package.json Abra 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 erros ao criar seu aplicativo ou transpilar o código TypeScript, verifique se há incompatibilidades de pacote npm como uma possível fonte de erros. Para ajudar a identificar erros, verifique a janela de saída do npm ao instalar os pacotes, conforme descrito anteriormente neste artigo. Por exemplo, se uma ou mais versões de 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 as versões do pacote npm, consulte package.json configuração.

• Em alguns cenários do 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 está instalado. Na maioria dos casos, você pode atualizar o Gerenciador de Soluções excluindo package.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 de saída do npm para verificar o status da instalação.

• Em alguns cenários do ASP.NET Core, o nó npm no Gerenciador de Soluções pode não estar visível depois que você compilar o 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.