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 basés sur l’interface CLI (.esproj)
• ASP.NET Core
• Ouvrir le 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 devez modifier votre structure de dossiers si vous souhaitez gérer les packages npm à l’aide de Visual Studio.

Projet basé sur l’interface CLI (.esproj)

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

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

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

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.

Remarque

Pour ASP.NET projets principaux, vous pouvez également utiliser gestionnaire de bibliothèques ou yarn au lieu de npm pour installer des fichiers JavaScript et CSS côté client. L’une de ces options peut être nécessaire si vous avez besoin d’une intégration avec 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, 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 devDependencies la dependencies 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.