Ich möchte Bootstrap in ASP.NET Core mit NuGet aktualisieren. Ich habe dies verwendet:
Install-Package bootstrap -Version 4.0.0
Es hat die Abhängigkeiten hinzugefügt, aber wie füge ich sie jetzt zu meinem Projekt hinzu? Wie lautet der Pfad für lokale NuGet-Abhängigkeiten?
Wie bereits von anderen erwähnt, ist der Paketmanager Bower, der normalerweise für Abhängigkeiten wie diese in Anwendungen verwendet wird, die nicht auf umfangreiche clientseitige Skripte angewiesen sind, auf dem Rückzug und empfiehlt aktiv den Wechsel zu anderen Lösungen: Während Bower beibehalten wird, empfehlen wir yarn und webpack für neue Frontend-Projekte! Obwohl Sie Bower im Moment noch verwenden können, hat Bootstrap angekündigt, die Unterstützung dafür einzustellen. Infolgedessen werden die eingebauten ASP.NET Core-Templates langsam überarbeitet, um ebenfalls davon wegzukommen. Leider gibt es keinen klaren Weg nach vorne. Das liegt vor allem daran, dass Webanwendungen immer weiter auf die Client-Seite verlagert werden, was komplexe Client-seitige Build-Systeme und viele Abhängigkeiten erfordert. Wenn Sie also so etwas bauen, dann wissen Sie vielleicht schon, wie Sie das Problem lösen können, und Sie können Ihren bestehenden Build-Prozess so erweitern, dass er einfach auch Bootstrap und jQuery enthält. Aber es gibt immer noch viele Webanwendungen, die nicht so stark auf der Client-Seite sind, bei denen die Anwendung immer noch hauptsächlich auf dem Server läuft und der Server als Ergebnis statische Ansichten serviert. Bower hat dies früher erfüllt, indem es die Veröffentlichung von clientseitigen Abhängigkeiten ohne großen Prozess vereinfacht hat. In der .NET-Welt gibt es auch NuGet, und mit früheren ASP.NET-Versionen konnten wir NuGet ebenfalls verwenden, um Abhängigkeiten zu einigen clientseitigen Abhängigkeiten hinzuzufügen, da NuGet den Inhalt einfach korrekt in unserem Projekt platzieren würde. Leider befinden sich die installierten Pakete mit dem neuen "csproj"-Format und dem neuen NuGet außerhalb unseres Projekts, so dass wir diese nicht einfach referenzieren können. So bleiben uns nur ein paar Optionen, wie wir unsere Abhängigkeiten hinzufügen können:
Dies ist das, was die ASP.NET Core-Vorlagen, die keine Single-Page-Anwendungen sind, derzeit tun. Wenn Sie diese verwenden, um eine neue Anwendung zu erstellen, enthält der Ordner wwwroot
einfach einen Ordner lib
, der die Abhängigkeiten enthält:
Wenn Sie sich die Dateien derzeit genau ansehen, können Sie erkennen, dass sie ursprünglich mit Bower dort abgelegt wurden, um die Vorlage zu erstellen, aber das wird sich wahrscheinlich bald ändern. Die Grundidee ist, dass die Dateien einmal in den wwwroot
-Ordner kopiert werden, damit man von ihnen abhängen kann.
Um dies zu tun, können wir einfach der Einführung von Bootstrap folgen und die kompilierten Dateien direkt herunterladen. Wie auf der Download-Seite erwähnt, ist jQuery nicht enthalten, so dass wir es separat herunterladen müssen; es enthält Popper.js, wenn wir uns entscheiden, die Datei bootstrap.bundle
später zu verwenden - was wir tun werden. Für jQuery können wir einfach eine einzelne "komprimierte, produktive" Datei von der Download-Seite erhalten.
Damit haben wir ein paar Dateien, die wir einfach entpacken und in den Ordner wwwroot
kopieren. Wir können auch einen lib
-Ordner anlegen, um deutlicher zu machen, dass es sich um externe Abhängigkeiten handelt:
Das ist alles, was wir brauchen. Jetzt müssen wir nur noch unsere Datei _Layout.cshtml
anpassen, um diese Abhängigkeiten einzubeziehen. Dazu fügen wir den folgenden Block in den <head>
ein:
<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>
Und den folgenden Block ganz am Ende des <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>
Sie können auch nur die verkleinerten Versionen einfügen und die <environment>
Tag-Helfer hier weglassen, um es etwas einfacher zu machen. Aber das ist alles, was Sie tun müssen, um den Anfang zu machen.
Der modernere Weg, auch wenn Sie Ihre Abhängigkeiten auf dem neuesten Stand halten wollen, wäre es, die Abhängigkeiten aus dem NPM-Paket-Repository zu beziehen. Sie können dafür entweder NPM oder Yarn verwenden; in meinem Beispiel werde ich NPM verwenden.
Zu Beginn müssen wir eine package.json
-Datei für unser Projekt erstellen, damit wir unsere Abhängigkeiten angeben können. Um dies zu tun, gehen wir einfach in den Dialog "Add New Item":
Sobald wir diese Datei haben, müssen wir sie bearbeiten, um unsere Abhängigkeiten einzuschließen. Sie sollte in etwa so aussehen:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Beim Speichern wird Visual Studio bereits NPM ausführen, um die Abhängigkeiten für uns zu installieren. Sie werden in den Ordner node_modules
installiert. Jetzt müssen wir die Dateien nur noch von dort in unseren wwwroot
-Ordner holen. Dafür gibt es ein paar Möglichkeiten:
bundleconfig.json
für Bündelung und MinifizierungWir können eine der verschiedenen Möglichkeiten nutzen, um eine bundleconfig.json
für die Bündelung und Minifizierung zu verwenden, wie in der Dokumentation erklärt. Ein sehr einfacher Weg ist die Verwendung des BuildBundlerMinifier NuGet-Pakets, das automatisch einen Build-Task für diesen Zweck einrichtet.
Nach der Installation dieses Pakets müssen wir eine bundleconfig.json
in der Wurzel des Projekts mit dem folgenden Inhalt erstellen:
[
{
"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 }
}
]
Damit wird im Grunde genommen konfiguriert, welche Dateien zu was kombiniert werden sollen. Und wenn wir bauen, können wir sehen, dass die Dateien vendor.min.css
und vendor.js.css
korrekt erstellt werden. Alles, was wir also tun müssen, ist, unsere _Layouts.html
erneut anzupassen, um diese Dateien einzubinden:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Wenn wir uns ein wenig mehr in die clientseitige Entwicklung begeben wollen, können wir auch anfangen, Tools zu verwenden, die wir dort einsetzen würden. Zum Beispiel Webpack, ein sehr häufig verwendetes Build-Tool für wirklich alles. Wir können aber auch mit einem einfacheren Taskmanager wie Gulp beginnen und die wenigen notwendigen Schritte selbst durchführen.
Dazu fügen wir eine gulpfile.js
in unseren Projektstamm ein, mit folgendem Inhalt:
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'));
Nun müssen wir auch unsere package.json
anpassen, um Abhängigkeiten von gulp
und gulp-concat
zu haben:
{
"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"
}
}
Schließlich bearbeiten wir unsere .csproj
, um die folgende Aufgabe hinzuzufügen, die sicherstellt, dass unsere Gulp-Aufgabe läuft, wenn wir das Projekt bauen:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Wenn wir nun das Projekt bauen, läuft der default
Gulp Task, der die build-vendor
Tasks ausführt, die dann unsere vendor.min.css
und vendor.min.js
bauen, genau wie wir es vorher getan haben. Nachdem wir also unser _Layout.cshtml
wie oben angepasst haben, können wir jQuery und Bootstrap verwenden.
Obwohl die anfängliche Einrichtung von Gulp etwas komplizierter ist als die obige bundleconfig.json
, haben wir nun die Node-Welt betreten und können all die anderen coolen Tools dort nutzen. Es könnte sich also lohnen, damit anzufangen.
Während dies plötzlich viel komplizierter geworden ist, als wenn wir nur Bower verwenden, gewinnen wir mit den neuen Optionen auch eine Menge Kontrolle. Zum Beispiel können wir nun entscheiden, welche Dateien tatsächlich in den wwwroot
-Ordner aufgenommen werden und wie diese genau aussehen. Und wir können dies auch nutzen, um die ersten Schritte in die Client-seitige Entwicklungswelt mit Node zu machen, was zumindest ein bisschen bei der Lernkurve helfen sollte.
Leider werden Sie es schwer haben, NuGet zu verwenden, um Bootstrap (oder die meisten anderen JavaScript/CSS-Frameworks) in einem .NET Core-Projekt zu installieren. Wenn Sie auf die NuGet-Installation schauen, sagt es Ihnen, es ist nicht kompatibel:
Wenn Sie wissen müssen, wo die lokalen Paketabhängigkeiten sind, befinden sie sich jetzt in Ihrem lokalen Profilverzeichnis, z.B. %Benutzerprofil%\.nuget\packages\bootstrap\4.0.0\content\Scripts
.
Ich schlage jedoch vor, zu npm oder bower zu wechseln - wie in Saineshwars Antwort.
Wir verwenden Bootstrap 4 in asp.net core, verweisen aber auf die Bibliotheken von "npm" mit der "Package Installer" Erweiterung und fanden dies besser als Nuget für Javascript/CSS-Bibliotheken zu sein.
Wir verwenden dann die Erweiterung "Bundler & Minifier", um die relevanten Dateien für die Verteilung (aus dem npm node_modules-Ordner, der sich außerhalb des Projekts befindet) in wwwroot zu kopieren, wie wir es für die Entwicklung/Bereitstellung wünschen.