Como ya han mencionado otros, 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 vías de salida. y recomienda activamente pasar a otras soluciones:
..psst! Mientras se mantenga Bower, recomendamos hilo y paquete web 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 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 ofrece vistas estáticas como resultado. Bower anteriormente llenó esto facilitando 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 formato y el nuevo NuGet, los paquetes instalados 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 hacen actualmente las plantillas ASP.NET Core, que no son aplicaciones de una sola página. Cuando los usa para crear una nueva aplicación, la wwwrootcarpeta simplemente contiene una carpeta libque 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 alwwwroot 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; que contiene Popper.js embargo, si optamos por utilizar el bootstrap.bundlearchivo más adelante, que vamos a hacer. 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 la wwwrootcarpeta. También podemos hacer una libcarpeta para dejar más claro que se trata de dependencias externas:
Eso es todo lo que necesitamos, así que ahora solo necesitamos ajustar nuestro _Layout.cshtmlarchivo para incluir esas dependencias. Para eso, agregamos el siguiente bloque al <head>:
<environment include="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>
Y el siguiente bloque al final del <body>:
<environment include="Development">
<script src="~/lib/js/jquery-3.3.1.js"></script>
<script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/js/jquery-3.3.1.min.js"></script>
<script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>
También puede incluir las versiones minimizadas y omitir los <environment>ayudantes de etiquetas aquí para hacerlo un poco más simple. Pero eso es todo lo que necesita hacer para seguir empezando.
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 usar NPM o Yarn para esto; en mi ejemplo, usaré NPM.
Para empezar, necesitamos crear un package.jsonarchivo 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, debemos 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 la node_modulescarpeta. Entonces, lo que queda por hacer es llevar los archivos desde allí a nuestra wwwrootcarpeta. Hay algunas opciones para hacer eso:
bundleconfig.json para empaquetar y minificar
Podemos utilizar una de las diversas formas de consumir un bundleconfig.jsonpaquete y minificación, 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.jsonen la raíz del proyecto con el siguiente contenido:
[
{
"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 vendor.min.cssy vendor.js.cssse crean correctamente. Entonces, todo lo que tenemos que hacer es ajustar nuestra _Layouts.htmlespalda para incluir esos archivos:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Usando 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 a gulpfile.jsen 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.jsonpara tener dependencias en gulpy 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 .csprojpara agregar la siguiente tarea que asegura que nuestra tarea Gulp se ejecute cuando construimos el proyecto:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Ahora, cuando defaultcompilamos, se ejecuta la tarea Gulp, que ejecuta las build-vendortareas, que luego construye nuestro vendor.min.cssy vendor.min.jstal como lo hicimos antes. Entonces, después de ajustar nuestro _Layout.cshtmlcomo 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.jsonanterior, ahora hemos ingresado al mundo de los nodos y podemos comenzar a hacer uso de todas las otras herramientas interesantes 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 ganamos mucho control con esas nuevas opciones. Por ejemplo, ahora podemos decidir qué archivos se incluyen realmente dentro de la wwwrootcarpeta 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 poco con la curva de aprendizaje.
