Alejarse de Bower(descontinuado) para usar Yarn/Npm en su lugar(.Net Core MVC) VS2017

asp.net-core-mvc visual-studio-2017

Question

Empecé a trabajar en una aplicación .Net Core hace aproximadamente 1 año. Utilicé .Net Core para configurar mi proyecto en Visual Studio y usé Bower para administrar mis paquetes del lado del cliente. Parece que bower está siendo mantenido / suspendido y las "personas a cargo" sugieren usar yarn o un webpack .

Entonces mi pregunta es ¿cómo empiezo a usar yarn lugar de bower ? (o npm si es más apropiado)

Cuando comencé mi proyecto, utilicé bower desde el administrador de paquetes de Visual Studio simplemente escribiendo:

bower install <package-name>

Y se las arregló para instalar los archivos / directorios dentro de mi carpeta wwwroot/lib/ . Solo tuve que agregar la dependencia a mi _Layout.cshtml y todo funcionó a la perfección.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
    asp-fallback-test="window.jQuery">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>

Me resulta bastante difícil averiguar cómo usar hilo o npm para lograr la misma "facilidad" dentro de Visual Studio 2017. Ya tengo acceso a minificar archivos a través del paquete BundlerMinifier.Core NuGet, y creo que lo hace automáticamente para archivos dentro de mi, por lo que no es un requisito para la solución que quiero usar.

He intentado buscar en Google, pero parece que este no es un problema muy común. Y todos los enlaces que encontré sugirieron usar npm y configurar gulp para mover archivos a wwwroot/lib/ y lo intenté, pero estoy obteniendo algunos errores extraños al hacerlo.

¿Cómo puedo usar yarn para instalar paquetes con similar a como lo hice con bower ? o debería usar npm en npm lugar?

Answer 1

Hilados y npm son casi lo mismo. Puede usar tanto hilo como npm para lograr exactamente el mismo objetivo, instalando paquetes de nodos. Esto es similar a lo que hizo Bower por usted anteriormente, excepto que Bower lo agregó a los activos web de su proyecto en lugar de node_modules.

WebPack es una herramienta puramente para crear activos web del lado del cliente y agruparlos con las dependencias.

Si no necesita esto, continúe usando Bower o Nuget para proyectos heredados. Para proyectos nuevos, use WebPack e hilo / npm.

Answer 2

Tuve la misma pregunta que tú y descubrí que Yarn no es demasiado difícil de usar. Aquí analizo la instalación de Yarn, los ajustes a Visual Studio 17 y el flujo de trabajo del proyecto.

Instalación de hilo

Para ejecutar Yarn, debes instalar dos cosas:

• El prerrequisito, Node.js
• La utilidad de línea de comando Yarn .

Deshabilitar NPM en Visual Studio 2017

Yarn usa un archivo en su proyecto, package.json , para realizar un seguimiento de lo que ha instalado. NPM también usa el mismo archivo. Para evitar cualquier conflicto, deshabilité los ganchos de NPM en Visual Studio. Si está habilitado, estos ganchos harán que NPM cargue paquetes cada vez que package.json cambie.

Para deshabilitar NPM, vaya al menú Herramientas y seleccione Opciones ... En el árbol de la izquierda, vaya a: Proyectos y soluciones -> Administración de paquetes web -> Restauración de paquetes . En el lado derecho, deshabilite los ganchos de NPM cambiando ambas opciones a False :

En la imagen de arriba también he desactivado los ganchos para Bower. Esto es opcional, lo hice para que accidentalmente Bower no instale ningún paquete.

Configuración del proyecto para hilados

Para utilizar Yarn con su proyecto, debe hacer un par de cosas:

• Asegúrese de que el proyecto tenga un archivo package.json . Debe estar ubicado debajo del directorio del proyecto. Inicialmente, el contenido del archivo debe contener un corchete abierto y un corchete cerrado:

{
}

• Asegúrese de que haya un directorio lib en wwwroot.

La siguiente estructura de directorio muestra un proyecto de ejemplo con estas dos cosas:

+ Solution
    + Project
        + wwwroot
            + lib
        + Program.cs
        + Startup.cs
        + package.json

Uso del hilado / flujo de trabajo del proyecto

Aquí está la parte que has estado esperando. Primero abra la consola del administrador de paquetes. La consola es solo una consola powershell dentro de VS. Cuando esté abierto, estará en el directorio de la solución, por lo que deberá introducir un CD en el directorio del proyecto. Después de eso, puede agregar bibliotecas usando Yarn:

cd [project dir]
yarn add --modules-folder=wwwroot/lib jquery
yarn add --modules-folder=wwwroot/lib [email protected]

Los paquetes ahora están instalados en wwwroot / lib, porque es ahí donde le está diciendo a Yarn que los instale.

Agregar un atajo de hilo en Visual Studio 2017

Si cree que la sección anterior involucraba demasiada mecanografía, puede simplificar las cosas agregando un atajo en VS. Cuando se configura esto, Yarn se ejecutará automáticamente desde el directorio del proyecto, especificando la carpeta de destino. Todo lo que tienes que hacer es decirle qué paquete instalar.

Dentro de Visual Studio, haga clic en Herramientas > Herramientas externas ... en el menú. En la ventana emergente, haga clic en el botón Agregar y complete los campos de la siguiente manera:

• Título: Hilado Agregar
  
• Comando (su directorio puede ser diferente): C: / Archivos de programa (x86) / Yarn / bin / yarn.cmd
  
• Argumentos: agregar --modules-folder = wwwroot / lib
  
• Directorio inicial: $ (ProjectDir)

También habilite estas casillas de verificación:

• Usar ventana de salida
• Preguntar por argumentos

Haga clic en el botón Aceptar para guardar el acceso directo.

Por lo tanto, ahora debe tener un artículo de Agregar hilo en el menú Herramientas . Haga clic en él y obtendrá una ventana emergente que le pedirá argumentos de entrada:

Todo lo que tiene que hacer es hacer clic en el primer cuadro de edición y agregar su paquete. Por ejemplo, para agregar jquery:

Haga clic en Aceptar en la ventana emergente y Yarn debería trabajar su magia e instalar su paquete.

Otras Consideraciones

• No desarrollo el nodo, así que no he considerado cómo lo anterior podría afectarlo. Para aquellos que desarrollan Node, algo para probar sería usar Yarn para instalar paquetes en la carpeta node_npm y ver si funcionan las cosas.
• Sospecho que actualmente hay paquetes que Bower puede instalar que Yarn no puede. Con suerte, con el tiempo, esta brecha se reduce.