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 baseados em CLI (.esproj)
• ASP.NET Core
• Abrir pasta (Node.js)

Importante

O npm espera a pasta node_modules e package.json na raiz do projeto. Se a estrutura de pastas do 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 de forma semelhante à maneira como você baixa pacotes NuGet para projetos do 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 pesquisar pacotes npm, selecionar um e instalar selecionando Instalar Pacote.

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.

Observação

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

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.