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


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 bower es siendo mantenido / suspendido y las "personas a cargo" sugieren usar yarn o webpack en lugar.

Entonces mi pregunta es ¿cómo empiezo a usar yarn en 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 wwwroot/lib/ carpeta. 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 BundlerMinifier.Core El paquete NuGet, y creo que lo hace automáticamente para los 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.

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


32
2018-06-30 10:14


origen


Respuestas:


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:

Deshabilitar NPM en Visual Studio 2017

Yarn usa un archivo en su proyecto, paquete.json, para hacer un seguimiento de lo que tiene 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 causarán que NPM cargue paquetes cada vez que paquete.json cambios.

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

Disable NPM in Visual Studio

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úrate de que el proyecto tenga paquete.json archivo. Debe estar ubicado debajo del directorio del proyecto. Inicialmente, el contenido del archivo debe contener un corchete abierto y un corchete cerrado:

{
}
  • Asegúrate de que haya un lib directorio bajo 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 bootstrap@v4.0.0

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 ... del menú En la ventana emergente, haga clic en Añadir botón 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 DE ACUERDO para guardar el acceso directo.

Entonces ahora deberías tener un Hilado Agregar artículo debajo del Herramientas menú. Haga clic en él y obtendrá una ventana emergente que le pedirá argumentos de entrada:

Yarn Popup

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:

Yarn Add 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.

16
2018-01-23 20:16



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.


2
2017-08-16 21:40