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.

• Projetos baseados em CLI (.esproj)
• ASP.NET Núcleo
• Abrir pasta (Node.js)

Importante

O npm espera que a pasta node_modules e package.json na raiz do projeto. Se a estrutura de pastas do seu aplicativo for diferente, você deverá modificar sua estrutura de pastas se quiser gerenciar pacotes npm usando o Visual Studio.

Projeto baseado em CLI (.esproj)

A partir do Visual Studio 2022, o gerenciador de pacotes npm está disponível para projetos baseados em CLI, portanto, agora você pode baixar módulos npm da mesma forma que você baixa pacotes NuGet para projetos ASP.NET Core. Em seguida, você pode usar package.json para modificar e excluir pacotes.

Para abrir o gerenciador de pacotes, no Gerenciador de Soluções, clique com o botão direito do mouse no nó npm em seu projeto e escolha Adicionar pacote npm.

Em seguida, você pode procurar pacotes npm, selecionar um e instalar selecionando Instalar pacote.

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.

Observação

Para projetos ASP.NET Core, você também pode usar ou yarn do Gerenciador de Bibliotecas em vez de npm para instalar arquivos JavaScript e CSS do lado do cliente. Uma dessas opções pode ser necessária se você precisar de integração com o MSBuild ou a CLI dotnet para gerenciamento de pacotes, que não é fornecida pelo npm.

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.