Te damos la bienvenida a proyecto on line, ahora hallarás la resolución de lo que buscas.
Solución:
Como otros ya mencionaron, el administrador de paquetes Bower, que generalmente se usaba para dependencias como esta en aplicaciones que no dependen de scripts pesados del lado del cliente, está en camino de desaparecer y recomienda activamente pasar a otras soluciones:
..psst! Mientras se mantiene Bower, recomendamos hilo y webpack para nuevos proyectos de front-end.
Entonces, aunque todavía puede usarlo en este momento, Bootstrap también ha anunciado que dejará de admitirlo. Como resultado, las plantillas ASP.NET Core integradas se están editando lentamente para alejarse también.
Desafortunadamente, no hay un camino claro a seguir. Esto se debe principalmente al hecho de que las aplicaciones web se están moviendo continuamente más hacia el lado del cliente, lo que requiere sistemas de compilación complejos del lado del cliente y muchas dependencias. Entonces, si está construyendo algo así, es posible que ya sepa cómo resolver esto, y puede expandir su proceso de compilación existente para simplemente incluir también Bootstrap y jQuery allí.
Pero todavía hay muchas aplicaciones web que no son tan pesadas en el lado del cliente, donde la aplicación todavía se ejecuta principalmente en el servidor y el servidor sirve static vistas como resultado. Bower anteriormente llenó esto al facilitar la publicación de dependencias del lado del cliente sin tanto proceso.
En el mundo .NET también tenemos NuGet y con versiones anteriores de ASP.NET, también podríamos usar NuGet para agregar dependencias a algunas dependencias del lado del cliente, ya que NuGet simplemente colocaría el contenido en nuestro proyecto correctamente. Desafortunadamente, con el nuevo .csproj y los nuevos paquetes instalados de NuGet se encuentran fuera de nuestro proyecto, por lo que no podemos simplemente hacer referencia a ellos.
Esto nos deja con algunas opciones sobre cómo agregar nuestras dependencias:
Instalación única
Esto es lo que están haciendo actualmente las plantillas ASP.NET Core, que no son aplicaciones de una sola página. Cuando los usa para crear una nueva aplicación, el wwwroot carpeta simplemente contiene una carpeta lib que contiene las dependencias:
Si observa detenidamente los archivos actualmente, puede ver que originalmente se colocaron allí con Bower para crear la plantilla, pero es probable que eso cambie pronto. La idea básica es que los archivos se copien una vez al wwwroot carpeta para que pueda confiar en ellos.
Para hacer esto, simplemente podemos seguir la introducción de Bootstrap y descargar los archivos compilados directamente. Como se mencionó en el sitio de descarga, esto no incluye jQuery, por lo que también debemos descargarlo por separado; contiene Popper.js aunque si elegimos usar el bootstrap.bundle archivo más tarde, lo que haremos. Para jQuery, simplemente podemos obtener un solo archivo “comprimido, de producción” del sitio de descarga (haga clic con el botón derecho en el enlace y seleccione “Guardar enlace como …” en el menú).
Esto nos deja con algunos archivos que simplemente se extraerán y copiarán en el wwwroot carpeta. También podemos hacer un lib carpeta para que quede más claro que se trata de dependencias externas:
Eso es todo lo que necesitamos, así que ahora solo tenemos que ajustar nuestro _Layout.cshtml archivo para incluir esas dependencias. Para eso, agregamos el siguiente bloque al :
Y el siguiente bloque al final del :
También puede incluir las versiones minimizadas y omitir el
Dependencias de NPM
La forma más moderna, también si desea mantener sus dependencias actualizadas, sería obtener las dependencias del repositorio de paquetes NPM. Puede utilizar NPM o Yarn para esto; en mi ejemplo, usaré NPM.
Para empezar, necesitamos crear un package.json para nuestro proyecto, para que podamos especificar nuestras dependencias. Para hacer esto, simplemente lo hacemos desde el cuadro de diálogo “Agregar nuevo elemento”:
Una vez que lo tengamos, necesitamos editarlo para incluir nuestras dependencias. Algo debería verse así:
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies":
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
Al guardar, Visual Studio ya ejecutará NPM para instalar las dependencias por nosotros. Se instalarán en el node_modules carpeta. Entonces, lo que queda por hacer es llevar los archivos desde allí a nuestro wwwroot carpeta. Hay algunas opciones para hacer eso:
bundleconfig.json para empaquetar y minificar
Podemos utilizar una de las diversas formas de consumir un bundleconfig.json para empaquetar y minificar, como se explica en la documentación. Una forma muy fácil es simplemente usar el paquete BuildBundlerMinifier NuGet que configura automáticamente una tarea de compilación para esto.
Después de instalar ese paquete, necesitamos crear un bundleconfig.json en la raíz del proyecto con los siguientes contenidos:
[
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"minify": "enabled": false
,
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"minify": "enabled": false
]
Esto básicamente configura qué archivos combinar en qué. Y cuando construimos, podemos ver que el vendor.min.css y vendor.js.css se crean correctamente. Así que todo lo que tenemos que hacer es ajustar nuestro _Layouts.html nuevamente para incluir esos archivos:
Usar un administrador de tareas como Gulp
Si queremos movernos un poco más hacia el desarrollo del lado del cliente, también podemos comenzar a usar herramientas que usaríamos allí. Por ejemplo, Webpack, que es una herramienta de construcción muy utilizada para realmente todo. Pero también podemos comenzar con un administrador de tareas más simple como Gulp y hacer los pocos pasos necesarios nosotros mismos.
Para eso, agregamos un gulpfile.js en la raíz de nuestro proyecto, con el siguiente contenido:
const gulp = require('gulp');
const concat = require('gulp-concat');
const vendorStyles = [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
];
gulp.task('build-vendor-css', () =>
return gulp.src(vendorStyles)
.pipe(concat('vendor.min.css'))
.pipe(gulp.dest('wwwroot'));
);
gulp.task('build-vendor-js', () =>
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest('wwwroot'));
);
gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));
gulp.task('default', gulp.series('build-vendor'));
Ahora, también necesitamos ajustar nuestro package.json tener dependencias en gulp y gulp-concat:
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies":
"bootstrap": "4.0.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.12.9"
Finalmente, editamos nuestro .csproj para agregar la siguiente tarea que se asegura de que nuestra tarea Gulp se ejecute cuando construimos el proyecto:
Ahora, cuando construimos, el default Se ejecuta la tarea Gulp, que ejecuta el build-vendor tareas, que luego construye nuestro vendor.min.css y vendor.min.js como lo hicimos antes. Entonces, después de ajustar nuestro _Layout.cshtml al igual que arriba, podemos hacer uso de jQuery y Bootstrap.
Si bien la configuración inicial de Gulp es un poco más complicada que la bundleconfig.json uno de arriba, ahora hemos ingresado al mundo de los nodos y podemos comenzar a hacer uso de todas las otras herramientas geniales allí. Por lo tanto, podría valer la pena comenzar con esto.
Conclusión
Si bien esto de repente se volvió mucho más complicado que con solo usar Bower, también obtenemos mucho control con esas nuevas opciones. Por ejemplo, ahora podemos decidir qué archivos se incluyen realmente en el wwwroot carpeta y cómo se ven exactamente. Y también podemos usar esto para dar los primeros pasos en el mundo del desarrollo del lado del cliente con Node, lo que al menos debería ayudar un poquito con la curva de aprendizaje.
Al analizar esto, parece que el enfoque LibMan funciona mejor para mis necesidades al agregar Bootstrap. Me gusta porque ahora está integrado en Visual Studio 2017 (15.8 o posterior) y tiene sus propios cuadros de diálogo.
Actualización 11/6/2020: bootstrap 4.1.3 ahora se agrega de forma predeterminada con VS-2019.5 (Gracias a Harald S. Hanssen por notarlo).
El método predeterminado que VS agrega a los proyectos usa Bower, pero parece que está a punto de desaparecer. En el encabezado de la página de la glorieta de Microsofts escriben:
Seguir un par de enlaces conduce a Use LibMan con ASP.NET Core en Visual Studio, donde muestra cómo se pueden agregar bibliotecas mediante un cuadro de diálogo integrado:
En el Explorador de soluciones, haga clic con el botón derecho en la carpeta del proyecto en la que se deben agregar los archivos. Elija Agregar> Biblioteca del lado del cliente. Aparece el cuadro de diálogo Agregar biblioteca del lado del cliente: [source: Scott Addie 2018]
Luego, para bootstrap, simplemente (1) seleccione el valor de unpkg, (2) escriba “[email protected]”(3) Instalar. Después de esto, solo querrá verificar que todas las inclusiones en _Layout.cshtml u otros lugares sean correctas. Deberían ser algo como href = “~ / lib / bootstrap / dist / js / bootstrap …”)
Pruebe Libman, es tan simple como Bower y puede especificar wwwroot / lib / como carpeta de descarga.
Reseñas y calificaciones
Te invitamos a reafirmar nuestro análisis fijando un comentario o dejando una valoración te damos la bienvenida.