Je veux mettre à jour Bootstrap dans ASP.NET Core avec NuGet. J'ai utilisé ceci :
Install-Package bootstrap -Version 4.0.0Il a ajouté les dépendances mais comment puis-je les ajouter à mon projet maintenant ? Quel est le chemin pour les dépendances NuGet locales ?
Comme d'autres l'ont déjà mentionné, le gestionnaire de paquets Bower qui était habituellement utilisé pour les dépendances de ce type dans les applications qui ne reposent pas sur des scripts côté client lourds, est le suivant en sortant et recommander activement de passer à d'autres solutions :
psst ! Bien que Bower soit maintenu, nous recommandons fils et webpack pour de nouveaux projets frontaux !
Ainsi, bien que vous puissiez toujours l'utiliser dès maintenant, Bootstrap a également annoncé abandonner son soutien . En conséquence, les modèles intégrés d'ASP.NET Core sont lentement modifiés pour s'en éloigner également.
Malheureusement, il n'y a pas de voie claire à suivre. Cela est principalement dû au fait que les applications Web se déplacent de plus en plus vers le côté client, ce qui nécessite des systèmes de construction complexes côté client et de nombreuses dépendances. Donc, si vous construisez quelque chose comme ça, vous savez peut-être déjà comment résoudre ce problème et vous pouvez étendre votre processus de construction existant pour y inclure simplement Bootstrap et jQuery.
Mais il existe encore beaucoup d'applications web qui ne sont pas si lourdes du côté client, où l'application fonctionne principalement sur le serveur et le serveur sert des vues statiques en conséquence. Bower a déjà comblé cette lacune en facilitant la publication des dépendances côté client sans trop de processus.
Dans le monde .NET, nous avons également NuGet et avec les versions précédentes d'ASP.NET, nous pouvions également utiliser NuGet pour ajouter des dépendances à certaines dépendances côté client puisque NuGet se contentait de placer correctement le contenu dans notre projet. Malheureusement, avec la nouvelle version .csproj et le nouveau NuGet, les paquets installés sont situés en dehors de notre projet, nous ne pouvons donc pas simplement les référencer.
Cela nous laisse quelques options pour ajouter nos dépendances :
C'est ce que font actuellement les modèles ASP.NET Core, qui ne sont pas des applications à page unique. Lorsque vous les utilisez pour créer une nouvelle application, l'élément wwwroot contient simplement un dossier lib qui contient les dépendances :
Si vous regardez de près les fichiers actuels, vous pouvez voir qu'ils ont été placés là à l'origine avec Bower pour créer le modèle, mais cela devrait bientôt changer. L'idée de base est que les fichiers sont copiés une fois à la wwwroot afin que vous puissiez compter sur eux.
Pour ce faire, nous pouvons simplement suivre l'introduction de Bootstrap et télécharger les fichiers compilés directement. Comme indiqué sur le site de téléchargement, cela ne comprend pas jQuery Nous devons donc le télécharger séparément. contient Popper.js mais si nous choisissons d'utiliser le bootstrap.bundle plus tard, ce que nous ferons. Pour jQuery, nous pouvons simplement obtenir un seul fichier "compressé, de production" à partir de le site de téléchargement (cliquez avec le bouton droit de la souris sur le lien et sélectionnez "Enregistrer le lien sous..." dans le menu).
Il nous reste donc quelques fichiers à extraire et à copier dans le dossier de l'utilisateur. wwwroot dossier. On peut aussi faire un lib pour qu'il soit plus clair qu'il s'agit de dépendances externes :
C'est tout ce dont nous avons besoin, donc maintenant nous devons juste ajuster notre _Layout.cshtml pour inclure ces dépendances. Pour cela, nous ajoutons le bloc suivant au fichier <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>Et le bloc suivant, à la toute fin de l'élément <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>Vous pouvez également vous contenter d'inclure les versions réduites et ignorer l'option <environment> des aides de balises ici pour rendre les choses un peu plus simples. Mais c'est tout ce que vous devez faire pour continuer à démarrer.
La méthode la plus moderne, également si vous souhaitez maintenir vos dépendances à jour, consiste à obtenir les dépendances à partir du dépôt de paquets NPM. Vous pouvez utiliser soit NPM soit Yarn pour cela ; dans mon exemple, j'utiliserai NPM.
Pour commencer, nous devons créer un package.json pour notre projet, afin que nous puissions spécifier nos dépendances. Pour ce faire, il suffit de le faire à partir de la boîte de dialogue "Add New Item" :
Une fois que nous l'avons, nous devons l'éditer pour inclure nos dépendances. Cela devrait ressembler à ceci :
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}En enregistrant, Visual Studio va déjà exécuter NPM pour installer les dépendances pour nous. Elles seront installées dans le répertoire node_modules dossier. Donc ce qu'il reste à faire est de récupérer les fichiers de ce dossier dans notre wwwroot dossier. Il existe plusieurs options pour ce faire :
bundleconfig.json pour le regroupement et la miniaturisationNous pouvons utiliser l'une des différentes manières de consommer un bundleconfig.json pour le regroupement et la réduction, comme expliqué dans le document la documentation . Un moyen très simple consiste à utiliser l'option Paquet NuGet BuildBundlerMinifier qui met automatiquement en place une tâche de construction pour cela.
Après avoir installé ce paquet, nous devons créer un fichier bundleconfig.json à la racine du projet avec le contenu suivant :
[
{
"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 }
}
]Il s'agit essentiellement de configurer les fichiers à combiner en quoi. Et quand nous construisons, nous pouvons voir que le fichier vendor.min.css et vendor.js.css sont créés correctement. Donc, tout ce que nous devons faire est d'ajuster nos _Layouts.html à nouveau pour inclure ces fichiers :
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>Si nous voulons aller un peu plus loin dans le développement côté client, nous pouvons également commencer à utiliser les outils que nous utiliserions là-bas. Par exemple Webpack qui est un outil de construction très communément utilisé pour vraiment tout. Mais nous pouvons aussi commencer avec un gestionnaire de tâches plus simple comme Gulp et faire les quelques démarches nécessaires nous-mêmes.
Pour cela, nous ajoutons un gulpfile.js dans notre projet Root, avec le contenu suivant :
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'));Maintenant, nous devons aussi ajuster notre package.json pour avoir des dépendances sur gulp et 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"
}
}Enfin, nous modifions notre .csproj pour ajouter la tâche suivante qui s'assure que notre tâche Gulp s'exécute lorsque nous construisons le projet :
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>Maintenant, quand nous construisons, le default La tâche Gulp s'exécute, ce qui permet de lancer la build-vendor qui construisent ensuite notre vendor.min.css et vendor.min.js comme nous l'avons fait avant. Donc, après avoir ajusté notre _Layout.cshtml comme ci-dessus, nous pouvons utiliser jQuery et Bootstrap.
Bien que la configuration initiale de Gulp soit un peu plus compliquée que celle de l'application bundleconfig.json ci-dessus, nous sommes maintenant entrés dans le monde de Node et nous pouvons commencer à utiliser tous les autres outils sympas qui s'y trouvent. Il peut donc être intéressant de commencer par cela.
Bien que cela devienne soudainement beaucoup plus compliqué qu'en utilisant simplement Bower, nous gagnons également beaucoup de contrôle avec ces nouvelles options. Par exemple, nous pouvons maintenant décider quels fichiers sont réellement inclus dans le fichier wwwroot et à quoi ils ressemblent exactement. Et nous pouvons également l'utiliser pour faire les premiers pas dans le monde du développement côté client avec Node, ce qui devrait au moins nous aider un peu avec la courbe d'apprentissage.
Lorsque j'utilisais la méthode npm, je recevais des erreurs comme "Uncaught SyntaxError : Unexpected token export". Pour résoudre ce problème, je suis passé au fichier umd popper.js "node_modules/popper.js/dist/umd/popper.min.js". Sinon, l'une des meilleures réponses que j'aie jamais vues sur stack, merci.
@JamesBlake Merci pour vos commentaires ! - Laissez-moi vérifier cette erreur, utilisez-vous la solution basée sur Gulp, ou le bundleconfig-one ?
En y réfléchissant, il semble que l'approche LibMan soit la plus adaptée à mes besoins avec l'ajout de Bootstrap. Je l'apprécie parce qu'elle est maintenant intégrée à Visual Studio 2017 (15.8 ou plus) et qu'elle possède ses propres boîtes de dialogue.
Mise à jour 6/11/2020 : bootstrap 4.1.3 est maintenant ajouté par défaut avec VS-2019.5 (Merci à Harald S. Hanssen de l'avoir remarqué).
La méthode par défaut que VS ajoute aux projets utilise Bower mais il semble qu'elle soit en voie de disparition. Dans l'en-tête de Microsofts bower page qu'ils écrivent : 
En suivant quelques liens, on arrive à Utiliser LibMan avec ASP.NET Core dans Visual Studio où il montre comment les librairies peuvent être ajoutées en utilisant un dialogue intégré :
Dans l'explorateur de solutions, cliquez avec le bouton droit de la souris sur le dossier du projet dans lequel les fichiers doivent être ajoutés. Choisissez Ajouter > Bibliothèque côté client. La boîte de dialogue Add Client-Side Library apparaît : [source : Scott Addie 2018 ]
Ensuite, pour le bootstrap, il suffit de (1) sélectionner le unpkg, (2) taper "bootstrap@..". (3) Installer. Après cela, vous voudrez simplement vérifier que toutes les inclusions dans le _Layout.cshtml ou d'autres endroits sont correctes. Ils devraient être quelque chose comme href="~/lib/bootstrap/dist/js/bootstrap..." )
J'ai VS 4.7.02558 (Community Edition) et c'était l'option la plus facile pour moi. Je l'ai utilisé dans des projets d'entraînement créés pour étudier l'examen MS 70-486 (MVC), je ne peux donc pas répondre à la question de savoir si c'est efficace pour des projets destinés à la production.
Pour moi, c'était aussi la façon la plus simple d'installer le matériel avec le MS STANDARD TOOL. Avec les conseils de votre message - changer Provider en unpkg, taper bootstrap@4 , j'ai pu installer. Libman n'est vraiment pas intuitif (dans mon cas, j'ai également dû entrer le . (point) après 4, avant que les paquets ne soient affichés (j'ai pensé que libman ne fonctionnait pas dans mon environnement).
Juste un rappel : si vous cherchez Bootstrap sur CdnJS, sachez que le nom est twitter-bootstrap comme il était appelé à l'origine.
Essayez Libman Pour ce faire, il suffit d'utiliser Bower et de spécifier wwwroot/lib/ comme dossier de téléchargement.
Pas encore dans la version de VS2017 : MISE À JOUR : 24-mai-2018 - Il semble que LibMan n'ait pas été intégré à la version finale de 15.7. Il est dans l'aperçu pour 15.8.x.
Ce qui marche pour moi, c'est :
1) Cliquez avec le bouton droit de la souris sur wwwroot > Add > Client Side Library.
2) Tapez "bootstrap" dans le champ de recherche.
3) Sélectionnez "Choisir des fichiers spécifiques".
4) Faites défiler vers le bas et sélectionnez un dossier. Dans mon cas, j'ai choisi "twitter-bootstrap".
5) Vérifiez "css" et "js".
6) Cliquez sur "Installer".
Quelques secondes plus tard, je les ai tous dans le dossier wwwroot. Faites la même chose pour tous les paquets côté client que vous voulez ajouter.
Malheureusement, vous aurez du mal à utiliser NuGet pour installer Bootstrap (ou la plupart des autres frameworks JavaScript/CSS) sur un projet .NET Core. Si vous regardez l'installation NuGet, elle vous indique qu'elle est incompatible :
si vous devez savoir où se trouvent les dépendances des paquets locaux, elles se trouvent maintenant dans le répertoire de votre profil local. c'est à dire %userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts .
Cependant, je suggère de passer à npm, ou bower - comme dans la réponse de Saineshwar.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
BS4 ne devrait pas avoir le support de Bower (source : getbootstrap.com/docs/4.0/migration/#breaking )
0 votes
Remplacez bootstrap@4.0.0-beta.3 par bootstrap@4.0.0 : stackoverflow.com/questions/47985337/
2 votes
Actuellement, cela devrait être la réponse acceptée, la plus facile en utilisant Libman : stackoverflow.com/a/53012140/578552
0 votes
Version 4.4.1 compatible maintenant par NUGET.
0 votes
Après 2019, il est préférable d'utiliser LibMan comme expliqué dans ce poste.