Wie bereits erwähnt, ist der Paketmanager Bower , der normalerweise für solche Abhängigkeiten in Anwendungen verwendet wurde, die nicht auf umfangreichen clientseitigen Skripten basieren, auf dem Weg nach draußen und empfiehlt aktiv, auf andere Lösungen umzusteigen:
..psst! Während Bower gewartet wird, empfehlen wir Garn und Webpack für neue Front-End-Projekte!
Obwohl Sie es jetzt noch verwenden können, hat Bootstrap auch angekündigt, die Unterstützung dafür einzustellen . Infolgedessen werden die integrierten ASP.NET Core-Vorlagen langsam bearbeitet, um sich auch davon zu entfernen.
Leider gibt es keinen klaren Weg vorwärts. Dies ist hauptsächlich auf die Tatsache zurückzuführen, dass Webanwendungen kontinuierlich weiter in die Clientseite verlagert werden und komplexe clientseitige Build-Systeme und viele Abhängigkeiten erfordern. Wenn Sie also so etwas erstellen, wissen Sie möglicherweise bereits, wie Sie dies lösen können, und Sie können Ihren vorhandenen Erstellungsprozess erweitern, um dort einfach auch Bootstrap und jQuery einzuschließen.
Es gibt jedoch immer noch viele Webanwendungen, die auf der Clientseite nicht so schwer sind, wobei die Anwendung immer noch hauptsächlich auf dem Server ausgeführt wird und der Server daher statische Ansichten bereitstellt. Bower hat dies zuvor gefüllt, indem es einfach gemacht wurde, clientseitige Abhängigkeiten ohne großen Aufwand zu veröffentlichen.
In der .NET-Welt haben wir auch NuGet und mit früheren ASP.NET-Versionen könnten wir NuGet auch verwenden, um einigen clientseitigen Abhängigkeiten Abhängigkeiten hinzuzufügen, da NuGet den Inhalt nur korrekt in unser Projekt einfügt. Leider .csprojbefinden sich die installierten Pakete mit dem neuen Format und dem neuen NuGet außerhalb unseres Projekts, sodass wir nicht einfach auf diese verweisen können.
Dies lässt uns einige Optionen, wie wir unsere Abhängigkeiten hinzufügen können:
Einmalige Installation
Dies tun derzeit die ASP.NET Core-Vorlagen, bei denen es sich nicht um einseitige Anwendungen handelt. Wenn Sie diese zum Erstellen einer neuen Anwendung verwenden, wwwrootenthält der Ordner einfach einen Ordner lib, der die Abhängigkeiten enthält:
Wenn Sie sich die aktuellen Dateien genau ansehen, können Sie sehen, dass sie ursprünglich bei Bower abgelegt wurden, um die Vorlage zu erstellen. Dies wird sich jedoch wahrscheinlich bald ändern. Die Grundidee ist, dass die Dateien einmal in den wwwrootOrdner kopiert werden , damit Sie sich darauf verlassen können.
Dazu können wir einfach der Einführung von Bootstrap folgen und die kompilierten Dateien direkt herunterladen . Wie auf der Download-Site erwähnt, beinhaltet dies nicht jQuery , daher müssen wir dies auch separat herunterladen. Es enthält jedoch Popper.js, wenn wir die bootstrap.bundleDatei später verwenden - was wir auch tun werden. Für jQuery können wir einfach eine einzelne "komprimierte Produktionsdatei" von der Download-Site abrufen (klicken Sie mit der rechten Maustaste auf den Link und wählen Sie "Link speichern unter ..." aus dem Menü).
So bleiben uns einige Dateien, die einfach extrahiert und in den wwwrootOrdner kopiert werden . Wir können auch einen libOrdner erstellen, um klarer zu machen, dass es sich um externe Abhängigkeiten handelt:
Das ist alles, was wir brauchen. Jetzt müssen wir nur noch unsere _Layout.cshtmlDatei anpassen , um diese Abhängigkeiten einzuschließen. Dazu fügen wir dem folgenden Block hinzu <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>
Und der folgende 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 einfach die minimierten Versionen einfügen und die <environment>Tag-Helfer hier überspringen , um es ein bisschen einfacher zu machen. Aber das ist alles, was Sie tun müssen, um am Start zu bleiben.
Abhängigkeiten von NPM
Der modernere Weg, auch wenn Sie Ihre Abhängigkeiten auf dem neuesten Stand halten möchten, besteht darin, die Abhängigkeiten aus dem NPM-Paket-Repository abzurufen. Sie können hierfür entweder NPM oder Garn verwenden. In meinem Beispiel verwende ich NPM.
Zu Beginn müssen wir eine package.jsonDatei für unser Projekt erstellen , damit wir unsere Abhängigkeiten angeben können. Dazu tun wir dies einfach im Dialogfeld "Neues Element hinzufügen":
Sobald wir das haben, müssen wir es bearbeiten, um unsere Abhängigkeiten einzuschließen. Es sollte ungefähr 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"
}
}
Durch das Speichern führt Visual Studio bereits NPM aus, um die Abhängigkeiten für uns zu installieren. Sie werden im node_modulesOrdner installiert . Was also noch zu tun bleibt, ist, die Dateien von dort in unseren wwwrootOrdner zu bekommen. Dafür gibt es einige Möglichkeiten:
bundleconfig.json zur Bündelung und Minimierung
Wir können eine der verschiedenen Möglichkeiten verwenden, um a bundleconfig.jsonzum Bündeln und Minimieren zu verwenden, wie in der Dokumentation erläutert . Eine sehr einfache Möglichkeit besteht darin, einfach das NuGet-Paket BuildBundlerMinifier zu verwenden, mit dem automatisch eine Build-Aufgabe dafür eingerichtet wird.
Nach der Installation dieses Pakets müssen wir eine bundleconfig.jsonim Stammverzeichnis des Projekts mit den folgenden Inhalten 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 }
}
]
Dadurch wird grundsätzlich konfiguriert, welche Dateien zu welchen kombiniert werden sollen. Und wenn wir bauen, können wir sehen, dass die vendor.min.cssund vendor.js.cssrichtig erstellt werden. Alles, was wir tun müssen, ist, unsere _Layouts.htmlerneut anzupassen , um diese Dateien einzuschließen:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Verwenden eines Task-Managers wie Gulp
Wenn wir uns ein bisschen mehr mit der clientseitigen Entwicklung befassen möchten, können wir auch damit beginnen, Tools zu verwenden, die wir dort verwenden würden. Zum Beispiel Webpack , ein sehr häufig verwendetes Build-Tool für wirklich alles. Wir können aber auch mit einem einfacheren Task-Manager wie Gulp beginnen und die wenigen notwendigen Schritte selbst ausführen.
Dazu fügen wir gulpfile.jsunserem Projektstamm ein mit folgenden Inhalten hinzu:
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'));
Jetzt müssen wir auch unsere anpassen package.json, um Abhängigkeiten von gulpund zu haben 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"
}
}
Schließlich bearbeiten wir unsere .csproj, um die folgende Aufgabe hinzuzufügen, die sicherstellt, dass unsere Gulp-Aufgabe beim Erstellen des Projekts ausgeführt wird:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Wenn wir jetzt erstellen, wird die defaultGulp-Aufgabe ausgeführt, die die build-vendorAufgaben ausführt , die dann unsere erstellt vendor.min.cssund vendor.min.jsgenau wie zuvor. Nachdem _Layout.cshtmlwir unsere Einstellungen wie oben beschrieben vorgenommen haben, können wir jQuery und Bootstrap verwenden.
Während die anfängliche Einrichtung von Gulp etwas komplizierter ist als die bundleconfig.jsonoben beschriebene, haben wir jetzt die Node-Welt betreten und können beginnen, alle anderen coolen Tools dort zu nutzen. Es könnte sich also lohnen, damit zu beginnen.
Fazit
Während dies plötzlich viel komplizierter wurde als nur mit Bower, gewinnen wir mit diesen neuen Optionen auch viel Kontrolle. Zum Beispiel können wir jetzt entscheiden, welche Dateien tatsächlich im wwwrootOrdner enthalten sind und wie diese genau aussehen. Und wir können dies auch nutzen, um mit Node die ersten Schritte in die clientseitige Entwicklungswelt zu unternehmen, die zumindest ein wenig bei der Lernkurve helfen sollten .
