Gestire i pacchetti npm in Visual Studio

npm consente di installare e gestire pacchetti da usare sia nelle applicazioni Node.js che in ASP.NET Core. Visual Studio semplifica l'interazione con npm e genera comandi npm direttamente o attraverso l'interfaccia utente. Se non si ha familiarità con npm e sono necessarie altre informazioni, consultare la documentazione di npm.

L'integrazione di Visual Studio con npm è diversa a seconda del tipo di progetto.

• Progetti basati sull'interfaccia della riga di comando (con estensione esproj)
• ASP.NET Core
• Apri cartella (Node.js)

Importante

npm prevede la cartella node_modules e package.json nella radice del progetto. Se la struttura delle cartelle dell'app è diversa, è necessario modificare la struttura di cartelle se si vogliono gestire pacchetti npm usando Visual Studio.

Progetto basato sull'interfaccia della riga di comando (con estensione esproj)

A partire da Visual Studio 2022, la gestione pacchetti npm è disponibile per i progetti basati sull'interfaccia della riga di comando, quindi è ora possibile scaricare moduli npm in modo analogo al modo in cui si scaricano pacchetti NuGet per i progetti ASP.NET Core. È quindi possibile usare package.json per modificare ed eliminare pacchetti.

Per aprire gestione pacchetti, da Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo npm nel progetto e scegliere Aggiungi pacchetto npm.

Successivamente, è possibile cercare pacchetti npm, selezionare uno e installarli selezionando Installa pacchetto.

progetti di base ASP.NET

Per progetti come ASP.NET progetti Core, è possibile aggiungere il supporto npm nel progetto e usare npm per installare i pacchetti.

Nota

Per ASP.NET progetti Core, è anche possibile usare Gestione librerie o yarn anziché npm per installare file JavaScript e CSS sul lato client. Una di queste opzioni potrebbe essere necessaria se è necessaria l'integrazione con MSBuild o l'interfaccia della riga di comando dotnet per la gestione dei pacchetti, non fornita da npm.

Se il progetto non include già un file package.json , è possibile aggiungerne uno per abilitare il supporto npm aggiungendo un file package.json al progetto.

1. Per aggiungere il file package.json, fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Aggiungi>nuovo elemento (oppure premere CTRL + MAIUSC + A). Usare la casella di ricerca per trovare il file npm, scegliere il file di configurazione npm, usare il nome predefinito e fare clic su Aggiungi.

2. Includere uno o più pacchetti npm nella dependencies sezione o devDependencies di package.json. Ad esempio, è possibile aggiungere quanto segue al file:

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

   Quando si salva il file, Visual Studio aggiunge il pacchetto nel nodo Dependencies/npm in Esplora soluzioni. Se il nodo non viene visualizzato, fare clic con il pulsante destro del mouse package.json e scegliere Ripristina pacchetti. Per visualizzare lo stato di installazione del pacchetto, selezionare npm output nella finestra Output.

   È possibile configurare pacchetti npm usando package.json. Aprire package.json direttamente oppure fare clic con il pulsante destro del mouse sul nodo npm in Esplora soluzioni e scegliere Apri package.json.

Risoluzione dei problemi relativi ai pacchetti npm

• Se vengono visualizzati errori durante la compilazione dell'app o la transpilazione del codice TypeScript, verificare la presenza di incompatibilità del pacchetto npm come potenziale origine di errori. Per identificare gli errori, controllare la finestra output npm durante l'installazione dei pacchetti, come descritto in precedenza in questo articolo. Ad esempio, se una o più versioni del pacchetto npm sono state deprecate e genera un errore, potrebbe essere necessario installare una versione più recente per correggere gli errori. Per informazioni sull'uso di package.json per controllare le versioni del pacchetto npm, vedere Configurazione di package.json.

• In alcuni scenari ASP.NET Core, Esplora soluzioni potrebbe non mostrare lo stato corretto per i pacchetti npm installati a causa di un problema noto descritto qui. Ad esempio, il pacchetto potrebbe non essere installato quando è installato. Nella maggior parte dei casi, è possibile aggiornare Esplora soluzioni eliminando package.json, riavviando Visual Studio e aggiungendo nuovamente il file package.json come descritto in precedenza in questo articolo. In alternativa, quando si installano pacchetti, è possibile usare la finestra di output npm per verificare lo stato di installazione.

• In alcuni scenari ASP.NET Core, il nodo npm in Esplora soluzioni potrebbe non essere visibile dopo la compilazione del progetto. Per rendere nuovamente visibile il nodo, fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Scarica progetto. Fare quindi clic con il pulsante destro del mouse sul nodo del progetto e scegliere Ricarica progetto.