Comme d'autres l'ont déjà mentionné, le gestionnaire de packages Bower , qui était généralement utilisé pour des dépendances comme celle-ci dans les applications qui ne reposent pas sur de lourds scripts côté client, est en voie de disparition et recommande activement de passer à d'autres solutions:
..psst! Bien que Bower soit maintenu, nous recommandons le fil et le webpack pour les nouveaux projets frontaux!
Ainsi, bien que vous puissiez toujours l'utiliser pour le moment, Bootstrap a également annoncé l' abandon de son support . Par conséquent, les modèles ASP.NET Core intégrés sont lentement modifiés pour s'en éloigner également.
Malheureusement, il n'y a pas de voie à suivre claire. Cela est principalement dû au fait que les applications Web évoluent continuellement 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 de nombreuses applications Web qui ne sont pas si lourdes du côté client, où l'application s'exécute toujours principalement sur le serveur et le serveur sert par conséquent des vues statiques. Bower remplissait auparavant cela 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 pourrions également utiliser NuGet pour ajouter des dépendances à certaines dépendances côté client puisque NuGet placerait simplement le contenu correctement dans notre projet. Malheureusement, avec le nouveau .csprojformat et le nouveau NuGet, les packages 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:
Installation unique
C'est ce que font actuellement les modèles ASP.NET Core, qui ne sont pas des applications monopages. Lorsque vous les utilisez pour créer une nouvelle application, le wwwrootdossier contient simplement un dossier libcontenant les dépendances:
Si vous regardez de près les fichiers actuellement, vous pouvez voir qu'ils ont été initialement placés là avec Bower pour créer le modèle, mais cela est susceptible de changer bientôt. L'idée de base est que les fichiers sont copiés une fois dans le wwwrootdossier afin que vous puissiez en dépendre.
Pour ce faire, nous pouvons simplement suivre l'introduction de Bootstrap et télécharger directement les fichiers compilés . Comme mentionné sur le site de téléchargement, cela n'inclut pas jQuery , nous devons donc également le télécharger séparément; il contient cependant Popper.js si nous choisissons d'utiliser le bootstrap.bundlefichier plus tard - ce que nous ferons. Pour jQuery, nous pouvons simplement obtenir un seul fichier «compressé, production» à partir du site de téléchargement ( faites un clic droit sur le lien et sélectionnez «Enregistrer le lien sous ...» dans le menu).
Cela nous laisse avec quelques fichiers qui seront simplement extraits et copiés dans le wwwrootdossier. Nous pouvons également créer un libdossier pour préciser qu'il s'agit de dépendances externes:
C'est tout ce dont nous avons besoin, il ne nous reste plus qu'à ajuster notre _Layout.cshtmlfichier pour inclure ces dépendances. Pour cela, nous ajoutons le bloc suivant au <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 du <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 simplement inclure les versions minifiées et ignorer les <environment>aides de balises ici pour le rendre un peu plus simple. Mais c'est tout ce que vous devez faire pour continuer à démarrer.
Dépendances de NPM
La méthode la plus moderne, également si vous souhaitez maintenir vos dépendances à jour, serait d'obtenir les dépendances à partir du référentiel de packages NPM. Vous pouvez utiliser NPM ou Yarn pour cela; dans mon exemple, j'utiliserai NPM.
Pour commencer, nous devons créer un package.jsonfichier pour notre projet afin de pouvoir spécifier nos dépendances. Pour ce faire, nous le faisons simplement à partir de la boîte de dialogue «Ajouter un nouvel élément»:
Une fois que nous avons cela, nous devons le modifier 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 exécutera déjà NPM pour installer les dépendances pour nous. Ils seront installés dans le node_modulesdossier. Il ne reste donc plus qu'à récupérer les fichiers à partir de là dans notre wwwrootdossier. Il existe quelques options pour ce faire:
bundleconfig.json pour le regroupement et la minification
Nous pouvons utiliser l'une des différentes façons de consommer un bundleconfig.jsonpour le regroupement et la minification, comme expliqué dans la documentation . Un moyen très simple consiste simplement à utiliser le package NuGet BuildBundlerMinifier qui configure automatiquement une tâche de génération pour cela.
Après avoir installé ce package, nous devons créer un 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 }
}
]
Cela configure essentiellement les fichiers à combiner en quoi. Et quand nous construisons, nous pouvons voir que les vendor.min.csset vendor.js.csssont créés correctement. Donc, tout ce que nous devons faire est d'ajuster notre_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>
Utiliser un gestionnaire de tâches comme Gulp
Si nous voulons passer un peu plus au développement côté client, nous pouvons également commencer à utiliser des outils que nous utiliserions là-bas. Par exemple Webpack qui est un outil de construction très couramment utilisé pour vraiment tout. Mais nous pouvons aussi commencer avec un gestionnaire de tâches plus simple comme Gulp et effectuer nous-mêmes les quelques étapes nécessaires.
Pour cela, nous ajoutons un gulpfile.jsà la racine de notre projet, 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 également ajuster notre package.jsonpour avoir des dépendances sur gulpet 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 éditons notre .csprojpour ajouter la tâche suivante qui garantit 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, lorsque nous construisons, la defaulttâche Gulp s'exécute, qui exécute les build-vendortâches, qui construit ensuite notre vendor.min.csset vendor.min.jscomme nous l'avons fait auparavant. Donc, après avoir ajusté notre_Layout.cshtml comme ci-dessus, nous pouvons utiliser jQuery et Bootstrap.
Alors que la configuration initiale de Gulp est un peu plus compliquée que le bundleconfig.json ci-dessus, nous sommes maintenant entrés dans le monde des nœuds et pouvons commencer à utiliser tous les autres outils intéressants. Cela vaut donc la peine de commencer par ceci.
Conclusion
Bien que cela soit soudainement devenu beaucoup plus compliqué qu'avec la simple utilisation de 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 wwwrootdossier 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 au moins devrait aider un peu avec la courbe d'apprentissage.
