.net - visual - bootstrap asp net




Comment utiliser Bootstrap 4 dans ASP.NET Core (7)

Je souhaite mettre à jour Bootstrap dans ASP.NET Core avec NuGet. J'ai utilisé ceci:

Install-Package bootstrap -Version 4.0.0

Il a ajouté les dépendances mais comment puis-je l'ajouter à mon projet maintenant? Quel est le chemin pour les dépendances NuGet locales?


BS4 est maintenant disponible sur .NET Core 2.2 . Sur le programme d'installation du SDK 2.2.105 x64 à coup sûr. J'utilise Visual Studio 2017 avec. Jusqu'ici, tout va bien pour les nouveaux projets d'applications Web.


Comme d'autres l'ont déjà mentionné, le gestionnaire de paquets Bower , qui était généralement utilisé pour des dépendances comme celle-ci dans des applications qui ne reposent pas sur des scripts lourds 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 yarn et le webpack pour les nouveaux projets front-end!

Donc, bien que vous puissiez toujours l'utiliser maintenant, Bootstrap a également annoncé la getbootstrap.com/docs/4.0/migration/#breaking . En conséquence, les modèles ASP.NET Core intégrés sont en cours de modification pour s’éloigner également de celui-ci.

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 du 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 simplement y inclure également Bootstrap et jQuery.

Cependant, il existe encore de nombreuses applications Web qui ne sont pas très lourdes du côté client, l'application fonctionnant toujours principalement sur le serveur et le serveur fournissant des vues statiques en conséquence. Auparavant, Bower avait résolu ce problème en facilitant la publication de 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, car NuGet placerait simplement le contenu dans notre projet correctement. Malheureusement, avec le nouveau format .csproj et le nouveau NuGet, les paquetages installés étant situés en dehors de notre projet, nous ne pouvons 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 à une seule page. Lorsque vous utilisez ceux-ci pour créer une nouvelle application, le dossier wwwroot contient simplement un dossier lib contenant les dépendances:

Si vous examinez de près les fichiers, vous constaterez qu'ils ont été initialement placés là-bas avec Bower pour créer le modèle, mais cela est susceptible de changer rapidement. L'idée de base est que les fichiers sont copiés une fois dans le dossier wwwroot 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 le télécharger séparément aussi; il contient bien Popper.js cependant, si nous choisissons d’utiliser le fichier bootstrap.bundle ultérieurement, ce que nous ferons. Pour jQuery, nous pouvons simplement obtenir un seul fichier «compressé, de production» à partir du site de téléchargement .

Cela nous laisse quelques fichiers qui seront simplement extraits et copiés dans le dossier wwwroot . Nous pouvons également créer un dossier lib pour préciser qu'il s'agit de dépendances externes:

C’est tout ce dont nous avons besoin. Nous devons maintenant ajuster notre fichier _Layout.cshtml pour inclure ces dépendances. Pour cela, nous ajoutons le bloc suivant à la <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 tout à la 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 réduites et ignorer les aides de balises <environment> ici pour simplifier un peu la tâche. Mais c’est tout ce que vous devez faire pour continuer à démarrer.

Dépendances du NGP

La manière la plus moderne, même si vous souhaitez conserver 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, je vais utiliser NPM.

Pour commencer, nous devons créer un fichier package.json 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 dossier node_modules . Il ne reste donc plus qu’à placer les fichiers dans notre dossier wwwroot . Il y a quelques options pour faire ça:

bundleconfig.json pour le bundleconfig.json et la minification

Nous pouvons utiliser l'une des différentes manières de consommer un bundleconfig.json pour le regroupement et la minification, comme expliqué dans la documentation . Un moyen très simple consiste simplement à utiliser le package BuildBundlerMinifier NuGet, qui configure automatiquement une tâche de construction à cet effet.

Après avoir installé ce paquet, 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 lorsque nous construisons, nous pouvons voir que les vendor.min.css et vendor.js.css sont correctement créés. Donc, tout ce que nous avons à faire est d’ajuster à nouveau notre _Layouts.html 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 les outils que nous utiliserions là-bas. Par exemple webpack qui est un outil de compilation très 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 du 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 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 .csproj notre .csproj pour ajouter la tâche suivante qui garantit que notre tâche Gulp est exécutée lors de la construction du projet:

<Target Name="RunGulp" BeforeTargets="Build">
  <Exec Command="node_modules\.bin\gulp.cmd" />
</Target>

Maintenant, lorsque nous construisons, la tâche Gulp default exécutée, ce qui exécute les tâches build-vendor , qui construisent ensuite nos vendor.min.css et vendor.min.js comme nous le faisions auparavant. 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 bundleconfig.json ci-dessus, nous sommes maintenant entrés dans le monde des nœuds et nous pouvons commencer à utiliser tous les autres outils intéressants de la société. Donc, il pourrait être intéressant de commencer par ceci.

Conclusion

Bien que cela devienne soudainement beaucoup plus compliqué que d'utiliser simplement Bower, nous obtenons également beaucoup de contrôle avec ces nouvelles options. Par exemple, nous pouvons maintenant décider quels fichiers sont réellement inclus dans le dossier 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 aider un peu à l'apprentissage.


Essayez Libman , c’est aussi simple que Bower et vous pouvez spécifier wwwroot / lib / comme dossier de téléchargement.


Libman semble être l'outil préféré par Microsoft maintenant. Il est intégré à Visual Studio 2017 (15.8).

Libman explique comment l'utiliser et même comment configurer une restauration effectuée par le processus de génération.

La documentation de Bootstrap vous indique les fichiers dont vous avez besoin dans votre projet.

L'exemple suivant devrait fonctionner comme une configuration pour libman.json.

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/bootstrap",
    "files": [
    "js/bootstrap.bundle.js",
    "css/bootstrap.min.css"
    ]
  },
  {
    "library": "[email protected]",
    "destination": "wwwroot/lib/jquery",
    "files": [
      "jquery.min.js"
    ]
  }
]

}


Nous utilisons bootstrap 4 dans asp.net core, mais nous référençons les bibliothèques de "npm" à l’aide de l’extension "Package Installer" et nous avons trouvé que cette solution était meilleure que Nuget pour les bibliothèques Javascript / CSS.

Nous utilisons ensuite l’extension "Bundler & Minifier" pour copier les fichiers pertinents pour la distribution (à partir du dossier npm node_modules, situé en dehors du projet) dans wwwroot comme bon nous semble pour le développement / déploiement.



Utilisez le fichier de configuration nmp (ajoutez-le à votre projet Web), puis ajoutez les packages nécessaires de la même manière que nous avons utilisé bower.json et enregistrez. Visual Studio va le télécharger et l'installer. Vous trouverez le package sous le nœud nmp de votre projet.





asp.net-core-2.0