Gérer les packages npm dans Visual Studio

npm vous permet d’installer et de gérer des packages à utiliser dans les applications Node.js et ASP.NET Core. Visual Studio facilite l’interaction avec npm et émet des commandes npm via l’interface utilisateur ou directement. Si vous n’êtes pas familiarisé avec npm et que vous souhaitez en savoir plus, accédez à la documentation npm.

L’intégration de Visual Studio à npm est différente en fonction du type de projet.

projets ASP.NET Principaux

Pour les projets tels que ASP.NET Projets Principaux, vous pouvez ajouter la prise en charge de npm dans votre projet et utiliser npm pour installer des packages.

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, puis choisissez Ajouter>un 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 ou dependencies la devDependencies section de package.json. Par exemple, vous pouvez ajouter ce qui suit 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 surpackage.json et choisissez Restaurer les packages. Pour afficher l’état d’installation du package, sélectionnez la sortie npm dans la fenêtre Sortie.

   Remarque

   Le nœud npm est disponible pour la plupart des types de projets principaux ASP.NET, y compris Blazor. Pour les projets MAUI Blazor, vous devez utiliser la ligne de commande npm, car aucun nœud npm n’est présent dans l’Explorateur de solutions.

   Vous pouvez configurer des packages npm à l’aide package.jsonde . Ouvrez package.json directement ou cliquez avec le bouton droit sur le nœud npm dans l’Explorateur de solutions, puis 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 du code TypeScript, recherchez les incompatibilités de package npm comme source potentielle d’erreurs. Pour identifier les erreurs, consultez la fenêtre sortie npm lors de l’installation des packages, comme décrit précédemment dans cet article. Par exemple, si une ou plusieurs versions de package npm ont été dépréciées et entraînent une erreur, vous devrez peut-être installer une version plus récente pour corriger les erreurs. Pour plus d’informations sur l’utilisation depackage.json pour contrôler les versions du package npm, consultez package.json configuration.

• Dans certains scénarios ASP.NET Principaux, 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 précédemment dans cet article. Ou, lors de l’installation de packages, vous pouvez utiliser la fenêtre sortie npm pour vérifier l’état de l’installation.

• Dans certains scénarios ASP.NET Principaux, le nœud npm dans l’Explorateur de solutions peut ne pas être visible après avoir généré le projet. Pour rendre le nœud visible à nouveau, 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, puis choisissez Recharger le projet.