Gérer les packages npm dans Visual Studio

npm vous permet d’installer et de gérer des packages pour une utilisation dans les applications Node.js et ASP.NET Core. Visual Studio simplifie l’interaction avec npm et l’exécution de commandes npm par le biais de l’interface utilisateur ou directement. Si vous ne connaissez pas npm et souhaitez en savoir plus, consultez la documentation de npm.

L’intégration de Visual Studio à npm diffère selon le type de votre projet.

• Projets CLI (.esproj)
• ASP.NET Core
• Ouvrir un dossier (Node.js)

Important

npm attend le dossier node_modules et package.json dans la racine du projet. Si la structure de dossiers de votre application est différente, vous devriez modifier votre structure de dossiers si vous voulez gérer des packages npm avec Visual Studio.

Projet CLI (.esproj)

À compter de Visual Studio 2022, le gestionnaire de package npm est disponible pour les projets CLI. Vous pouvez donc désormais télécharger les modules npm de la même façon que vous téléchargez des packages NuGet pour des projets ASP.NET Core. Vous pouvez ensuite utiliser package.json pour modifier et supprimer des packages.

Pour ouvrir le gestionnaire de package, dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud npm dans votre projet.

Ensuite, vous pouvez rechercher des packages npm, en sélectionner un et l’installer en sélectionnant Installer le package.

Projets ASP.NET Core

Pour les projets de type ASP.NET Core, vous pouvez intégrer la prise en charge de npm dans votre projet et utiliser npm pour installer des packages.

Remarque

Pour les projets ASP.NET Core, vous pouvez également utiliser le Gestionnaire de bibliothèque ou yarn au lieu de npm pour installer des fichiers JavaScript et CSS côté client. Une de ces options peut être nécessaire si vous avez besoin d’une intégration à MSBuild ou de l’interface CLI dotnet pour la gestion des packages, qui n’est pas fournie par npm.

Si votre projet n’inclut pas encore de fichier package.json, vous pouvez en ajouter un pour activer la prise en charge de npm en ajoutant un fichier package.json au projet.

1. Pour ajouter le fichier package.json, cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions et choisissez Ajouter>Nouvel élément (ou appuyez sur Ctrl + Maj + A). Utilisez la zone de recherche pour rechercher le fichier npm, choisissez le fichier de configuration npm, utilisez le nom par défaut, puis cliquez sur Ajouter.

2. Incluez un ou plusieurs packages npm dans la section dependencies ou devDependencies du fichier package.json. Par exemple, vous pouvez ajouter les éléments suivants au fichier :

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

   Lorsque vous enregistrez le fichier, Visual Studio ajoute le package sous le nœud Dépendances/npm dans l’Explorateur de solutions. Si vous ne voyez pas le nœud, cliquez avec le bouton droit sur package.json et choisissez Restaurer les packages. Pour voir l’état d’installation du package, sélectionnez la sortie npm dans la fenêtre Sortie.

   Vous pouvez configurer des packages npm avec package.json. Ouvrez directement package.json ou cliquez avec le bouton droit sur le nœud npm dans l’Explorateur de solutions et choisissez Ouvrir package.json.

Résolution des problèmes liés aux packages npm

• Si vous voyez des erreurs lors de la génération de votre application ou de la transpilation de code TypeScript, recherchez les incompatibilités de package npm comme source potentielle d’erreurs. Pour identifier les erreurs, vérifiez la fenêtre de sortie npm lors de l’installation des packages, comme décrit précédemment dans cet article. Par exemple, si une ou plusieurs des versions de package npm sont dépréciées et génèrent des erreurs, vous devrez peut-être installer une version plus récente pour corriger ces erreurs. Pour plus d’informations sur l’utilisation de package.json pour gérer les versions des packages npm, consultez Configuration de package.json.

• Dans certains scénarios ASP.NET Core, l’Explorateur de solutions peut ne pas afficher l’état correct des packages npm installés en raison d’un problème connu décrit ici. Par exemple, le package peut apparaître comme n'étant pas installé lorsqu'il est installé. Dans la plupart des cas, vous pouvez mettre à jour l’Explorateur de solutions en supprimant package.json, en redémarrant Visual Studio et en ajoutant à nouveau le fichier package.json, comme décrit plus haut dans cet article. Ou, lors de l’installation de packages, vous pouvez utiliser la fenêtre de sortie npm pour vérifier l’état de l’installation.

• Dans certains scénarios ASP.NET Core, le nœud npm dans l’Explorateur de solutions peut ne pas être visible une fois le projet généré. Pour rendre le nœud à nouveau visible, cliquez avec le bouton droit sur le nœud du projet et choisissez Décharger le projet. Cliquez ensuite avec le bouton droit sur le nœud du projet et choisissez Recharger le projet.