Administración de paquetes npm en Visual Studio

npm permite instalar y administrar paquetes para su uso tanto en aplicaciones Node.js como en ASP.NET Core. Visual Studio facilita la interacción con npm y emite comandos npm a través de la interfaz de usuario o directamente. Si no está familiarizado con npm y quiere obtener más información, vaya a la documentación de npm.

La integración de Visual Studio con npm es diferente en función del tipo de proyecto.

• Proyectos basados en la CLI (.esproj)
• ASP.NET Core
• Abrir carpeta (Node.js)

Importante

npm espera la carpeta node_modules y package.json en la raíz del proyecto. Si la estructura de carpetas de la aplicación es diferente, debe modificar la estructura de carpetas si desea administrar paquetes npm mediante Visual Studio.

Proyecto basado en la CLI (.esproj)

A partir de Visual Studio 2022, el administrador de paquetes npm está disponible para proyectos basados en la CLI, por lo que ahora puede descargar módulos npm de forma similar a la forma en que descarga paquetes NuGet para proyectos de ASP.NET Core. A continuación, puede usar package.json para modificar y eliminar paquetes.

Para abrir el administrador de paquetes, en el Explorador de soluciones, haga clic con el botón derecho en el nodo npm del proyecto y elija Agregar paquete npm.

A continuación, puede buscar paquetes de npm, seleccionar uno e instalar seleccionando Instalar paquete.

proyectos de ASP.NET Core

Para proyectos como ASP.NET proyectos principales, puede agregar compatibilidad con npm en el proyecto y usar npm para instalar paquetes.

Nota:

Para los proyectos de ASP.NET Core, también puede usar Library Manager o yarn en lugar de npm para instalar archivos JavaScript y CSS del lado cliente. Una de estas opciones puede ser necesaria si necesita la integración con MSBuild o la CLI de dotnet para la administración de paquetes, que npm no proporciona.

Si el proyecto aún no incluye un archivo depackage.json , puede agregar uno para habilitar la compatibilidad con npm agregando un archivo package.json al proyecto.

1. Para agregar el archivo package.json , haga clic con el botón derecho en el proyecto en el Explorador de soluciones y elija Agregar>nuevo elemento (o presione Ctrl + MAYÚS + A). Use el cuadro de búsqueda para buscar el archivo npm, elija el archivo de configuración de npm, use el nombre predeterminado y haga clic en Agregar.

2. Incluya uno o varios paquetes de npm en la dependencies sección o devDependencies de package.json. Por ejemplo, puede agregar lo siguiente al archivo:

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

   Al guardar el archivo, Visual Studio agrega el paquete en el nodo Dependencias /npm en el Explorador de soluciones. Si no ve el nodo, haga clic con el botón derecho enpackage.json y elija Restaurar paquetes. Para ver el estado de instalación del paquete, seleccione npm output (Salida) en la ventana Salida.

   Nota:

   El nodo npm está disponible para la mayoría de los tipos de proyecto de ASP.NET Core, incluido Blazor. En el caso de los proyectos de MAUI Blazor, debe usar la línea de comandos npm porque ningún nodo npm estará presente en el Explorador de soluciones.

   Puede configurar paquetes de npm mediante package.json. package.json Abra directamente o haga clic con el botón derecho en el nodo npm en el Explorador de soluciones y elija Abrir package.json.

Solución de problemas de paquetes de npm

• Si ve algún error al compilar la aplicación o transpilar código TypeScript, compruebe si hay incompatibilidades de paquetes npm como posible origen de errores. Para ayudar a identificar errores, compruebe la ventana salida de npm al instalar los paquetes, como se ha descrito anteriormente en este artículo. Por ejemplo, si una o varias versiones del paquete npm han quedado en desuso y producen un error, es posible que tenga que instalar una versión más reciente para corregir errores. Para obtener información sobre el uso depackage.json para controlar las versiones del paquete de npm, consulte package.json configuración.

• En algunos escenarios de ASP.NET Core, es posible que el Explorador de soluciones no muestre el estado correcto para los paquetes npm instalados debido a un problema conocido que se describe aquí. Por ejemplo, el paquete puede aparecer como no instalado cuando está instalado. En la mayoría de los casos, puede actualizar el Explorador de soluciones eliminando package.json, reiniciando Visual Studio y agregando el archivo package.json tal como se describe anteriormente en este artículo. O bien, al instalar paquetes, puede usar la ventana Salida de npm para comprobar el estado de instalación.

• En algunos escenarios de ASP.NET Core, es posible que el nodo npm del Explorador de soluciones no esté visible después de compilar el proyecto. Para que el nodo vuelva a estar visible, haga clic con el botón derecho en el nodo del proyecto y elija Descargar proyecto. A continuación, haga clic con el botón derecho en el nodo del proyecto y elija Volver a cargar proyecto.