Gerenciar pacotes de npm no Visual Studio

O npm permite instalar e gerenciar pacotes a serem usados em seus aplicativos Node.js e ASP.NET Core. O Visual Studio facilita a interação com o npm e emite comandos do npm diretamente ou por meio da interface do usuário. Se você não conhece o npm e quer 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 na CLI (.esproj)
• ASP.NET Core
• Abrir pasta (Node.js)

Importante

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

Projeto baseado na 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 baixa pacotes NuGet para projetos ASP.NET Core. Em seguida, use 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

Em projetos como os do ASP.NET Core, é possível adicionar o suporte npm ao seu projeto e usar o npm para instalar pacotes.

Observação

Para projetos ASP.NET Core, você também pode 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 o gerenciamento de pacotes, funcionalidade que o npm não oferece.

Se o projeto ainda não incluir um arquivo package.json, adicione um para habilitar o suporte ao npm pelo arquivo package.json ao projeto.

1. Para adicionar o arquivo package.json, clique com o botão direito do mouse no projeto em 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 dependencies ou devDependencies de package.json. Por exemplo, é possível 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 em package.json e escolha Restaurar Pacotes. Para ver o status de instalação do pacote, selecione a saída npm na janela de Saída.

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

Solução de problemas de pacotes npm

• Se forem encontrados erros ao criar seu aplicativo ou transcompilar 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 Saída do npm ao instalar os pacotes, conforme descrito anteriormente neste artigo. Por exemplo, se uma ou mais dessas versões de pacote npm for preterida e gerar 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 de npm, confira Configuração de package.json.

• 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 aqui descrito. Por exemplo, o pacote pode aparecer como não instalado quando, na verdade, 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 Saída do npm para verificar o status da instalação.

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