Administrar paquetes de npm en Visual Studio

npm permite instalar y administrar paquetes para su uso en las aplicaciones de Node.js y ASP.NET Core. Visual Studio facilita la interacción con npm y la emisión de comandos de 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 cambiarla para poder administrar paquetes de npm con Visual Studio.

Proyecto basado en la CLI (.esproj)

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

Para abrir el administrador de paquetes, desde el Explorador de soluciones, haga clic con el botón derecho en el nodo npm de su proyecto.

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

Proyectos de ASP.NET Core

En el caso de proyectos como los de ASP.NET Core, se puede agregar la compatibilidad con npm en el proyecto y usar npm para instalar paquetes.

Nota:

En el caso de los proyectos de ASP.NET Core, también se puede usar el Administrador de bibliotecas o yarn, en lugar de npm, para instalar los 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 package.json, se puede agregar compatibilidad para habilitar npm incorporando 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 encontrar el archivo npm, elija el archivo de configuración npm, use el nombre predeterminado y haga clic en Agregar.

2. Incluya uno o más paquetes de npm en las secciones dependencies o devDependencies de package.json. Por ejemplo, se podría agregar lo siguiente al archivo:

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

   Cuando se guarda el archivo, Visual Studio agrega el paquete en el nodo Dependencias/npm del Explorador de soluciones. Si no se ve el nodo, haga clic con el botón derecho en package.json y elija Restaurar paquetes. Para ver el estado de instalación del paquete, seleccione la salida npm en la ventana Salida.

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

Solución de problemas con paquetes de npm

• Si ve algún error al compilar la aplicación o al transpilar el código TypeScript, compruebe las incompatibilidades del paquete de npm como posible fuente de errores. Para poder identificar los errores, compruebe la ventana de salida de npm al instalar los paquetes, tal y como se describe anteriormente en este artículo. Por ejemplo, si una o varias de las versiones del paquete de npm están en desuso y generan un error, deberá instalar una versión más reciente para corregir los errores. Para obtener información sobre cómo usar package.json para controlar las versiones del paquete de npm, consulte package.json configuration (Configuración de package.json).

• En algunos escenarios de ASP.NET Core, es posible que el Explorador de soluciones no muestre el estado correcto de los paquetes de npm instalados. Esto se debe a un error conocido que se describe aquí. Por ejemplo, es posible que el paquete aparezca como no instalado cuando sí que lo está. En la mayoría de los casos, se puede actualizar el Explorador de soluciones eliminando package.json, reiniciando Visual Studio y agregando de nuevo el archivo package.json, tal como se ha descrito anteriormente en este artículo. También puede usar la ventana de salida de npm para comprobar el estado de instalación al instalar paquetes.

• En algunos escenarios de ASP.NET Core, es posible que el nodo npm del Explorador de soluciones no esté visible después de que compile 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 el proyecto. Después, haga clic con el botón derecho en el nodo del proyecto y elija Volver a cargar el proyecto.