Ich verwende npm zum Verwalten der jQuery-, Bootstrap-, Font Awesome- und ähnlichen Client-Bibliotheken, die ich für meine ASP.NET Core-Anwendung benötige.

Der Ansatz, der für mich funktioniert hat, begann mit dem Hinzufügen einer package.json-Datei zum Projekt, die folgendermaßen aussieht:

{
    "version": "1.0.0",
    "name": "myapp",
    "private": true,
    "devDependencies": {
  },
  "dependencies": {
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.6.1",
    "jquery": "^2.2.3"
  }
}

npm stellt diese Pakete im Ordner node_modules wieder her, der sich auf derselben Ebene wie wwwroot im Projektverzeichnis befindet:

Da ASP.NET Core die statischen Dateien aus dem Ordner wwwroot bereitstellt und node_modules nicht vorhanden ist, musste ich einige Änderungen vornehmen, damit dies funktioniert. Die erste: Hinzufügen von app.UseFileServer direkt vor app.UseStaticFiles in meinem Startup. CS-Datei:

app.UseFileServer(new FileServerOptions()
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")), 
    RequestPath = new PathString("/node_modules"),
    EnableDirectoryBrowsing = true
});

app.UseStaticFiles();

und die zweite, einschließlich node_modules in meinen PublishOptions in der Datei project.json:

"publishOptions": {
  "include": [
    "web.config",
    "wwwroot",
    "Views",
    "node_modules"
  ]
},

Dies funktioniert in meiner Entwicklungsumgebung und auch, wenn ich es auf meiner Azure App Service-Instanz bereitstelle. Die statischen Dateien jquery, bootstrap und font-awesome werden gut bereitgestellt, aber ich bin mir bei dieser Implementierung nicht sicher.

Was ist der richtige Ansatz dafür?

Diese Lösung kam, nachdem viele Informationen aus verschiedenen Quellen gesammelt und einige ausprobiert wurden, die nicht funktionierten, und es scheint ein bisschen seltsam, diese Dateien von außerhalb von wwwroot bereitstellen zu müssen.

Jeder Rat wird sehr geschätzt.

Durch die Veröffentlichung Ihres gesamten node_modulesOrdners stellen Sie weit mehr Dateien bereit, als Sie tatsächlich in der Produktion benötigen.

Verwenden Sie stattdessen einen Task Runner als Teil Ihres Erstellungsprozesses, um die benötigten Dateien zu packen und in Ihrem wwwrootOrdner bereitzustellen. Auf diese Weise können Sie auch Ihre Assets gleichzeitig konzentrieren und minimieren, anstatt jede einzelne Bibliothek einzeln bedienen zu müssen.

Sie können die FileServerKonfiguration dann auch vollständig entfernen und sich UseStaticFilesstattdessen darauf verlassen.

Derzeit ist gulp der VS-Task-Runner der Wahl. Fügen Sie a gulpfile.jszum Stammverzeichnis Ihres Projekts hinzu und konfigurieren Sie es so, dass Ihre statischen Dateien beim Veröffentlichen verarbeitet werden.

Sie können beispielsweise den folgenden scriptsAbschnitt zu Ihrem hinzufügen project.json:

 "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  },

Welches würde mit der folgenden Gulpfile funktionieren (die Standardeinstellung beim Gerüstbau mit yo):

/// <binding Clean='clean'/>
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify");

var webroot = "./wwwroot/";

var paths = {
    js: webroot + "js/**/*.js",
    minJs: webroot + "js/**/*.min.js",
    css: webroot + "css/**/*.css",
    minCss: webroot + "css/**/*.min.css",
    concatJsDest: webroot + "js/site.min.js",
    concatCssDest: webroot + "css/site.min.css"
};

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.concatCssDest, cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

• Die Verwendung npmfür die Verwaltung clientseitiger Bibliotheken ist eine gute Wahl (im Gegensatz zu Bower oder NuGet). Sie denken in die richtige Richtung :)
• Teilen Sie serverseitige (ASP.NET Core) und clientseitige (z. B. Angular 2, Ember, React) Projekte in separate Ordner auf (andernfalls kann Ihr ASP.NET-Projekt viel Rauschen aufweisen - Komponententests für den clientseitigen Code node_modules Ordner, Build-Artefakte usw.). Front-End-Entwickler, die mit Ihnen im selben Team arbeiten, werden es Ihnen danken :)
• Stellen Sie npm-Module auf Lösungsebene wieder her (ähnlich wie Sie Pakete über NuGet wiederherstellen - nicht im Projektordner). Auf diese Weise können Sie Unit- und Integrationstests auch in einem separaten Ordner durchführen (im Gegensatz zu clientseitigen JavaScript-Tests in Ihrem Ordner) ASP.NET Core-Projekt).
• Die Verwendung ist möglicherweise nicht erforderlich FileServer, StaticFilessollte ausreichen, um statische Dateien (.js, Bilder usw.) bereitzustellen.
• Verwenden Sie Webpack, um Ihren clientseitigen Code in einen oder mehrere Blöcke (Bundles) zu bündeln.
• Möglicherweise benötigen Sie Gulp / Grunt nicht, wenn Sie einen Modulbündler wie Webpack verwenden
• Schreiben Sie Build-Automatisierungsskripte in ES2015 + JavaScript (im Gegensatz zu Bash oder PowerShell). Sie funktionieren plattformübergreifend und sind für verschiedene Webentwickler zugänglicher (heutzutage spricht jeder JavaScript).
• Umbenennen wwwrootin public, da sonst die Ordnerstruktur in Azure Web Apps verwirrend ist ( D:\Home\site\wwwroot\wwwrootvs D:\Home\site\wwwroot\public)
• Veröffentlichen Sie nur die kompilierte Ausgabe in Azure Web Apps (Sie sollten niemals node_modulesauf einen Webhosting-Server pushen ). Siehe tools/deploy.jsals Beispiel.

Besuchen Sie das ASP.NET Core Starter Kit auf GitHub (Haftungsausschluss: Ich bin der Autor)

Installieren Sie den Bundler und den Minifier in Visual Studio Extensions

Dann erstellen Sie eine bundleconfig.jsonund geben Folgendes ein:

// Configure bundling and minification for the project.
// More info at https://go.microsoft.com/fwlink/?LinkId=808241
[
 {
    "outputFileName": "wwwroot/js/jquery.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.js"
    ],
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": false
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

Der Bundler und Minifier (gulp-basiert) hat also Zugriff auf die Quelldateien (die aus Visual Studio und auch aus GIT ausgeschlossen werden sollten) und fügt sie wie angegeben in die WWW-Wurzel ein

Bei jedem Speichern wird dies nur als Nebeneffekt ausgeführt (Sie können jedoch festlegen, dass es manuell ausgeführt wird).

Ich gebe Ihnen zwei Antworten. npm in Kombination mit anderen Tools ist leistungsstark, erfordert jedoch einige Arbeit zum Einrichten. Wenn Sie nur einige Bibliotheken herunterladen möchten, können Sie stattdessen den Bibliotheksmanager verwenden (veröffentlicht in Visual Studio 15.8).

NPM (Fortgeschrittene)

Fügen Sie zuerst package.json im Stammverzeichnis Ihres Projekts hinzu. Fügen Sie den folgenden Inhalt hinzu:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "3.9.1",
    "del": "3.0.0"
  },
  "dependencies": {
    "jquery": "3.3.1",
    "jquery-validation": "1.17.0",
    "jquery-validation-unobtrusive": "3.2.10",
    "bootstrap": "3.3.7"
  }
}

Dadurch lädt NPM Bootstrap, JQuery und andere Bibliotheken, die in einem neuen asp.net-Kernprojekt verwendet werden, in einen Ordner mit dem Namen node_modules herunter. Der nächste Schritt besteht darin, die Dateien an einen geeigneten Ort zu kopieren. Dazu verwenden wir gulp, das ebenfalls von NPM heruntergeladen wurde. Fügen Sie dann im Stammverzeichnis Ihres Projekts eine neue Datei mit dem Namen gulpfile.js hinzu . Fügen Sie den folgenden Inhalt hinzu:

/// <binding AfterBuild='default' Clean='clean' />
/*
This file is the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');
var del = require('del');

var nodeRoot = './node_modules/';
var targetPath = './wwwroot/lib/';

gulp.task('clean', function () {
    return del([targetPath + '/**/*']);
});

gulp.task('default', function () {
    gulp.src(nodeRoot + "bootstrap/dist/js/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/js"));
    gulp.src(nodeRoot + "bootstrap/dist/css/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/css"));
    gulp.src(nodeRoot + "bootstrap/dist/fonts/*").pipe(gulp.dest(targetPath + "/bootstrap/dist/fonts"));

    gulp.src(nodeRoot + "jquery/dist/jquery.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.js").pipe(gulp.dest(targetPath + "/jquery/dist"));
    gulp.src(nodeRoot + "jquery/dist/jquery.min.map").pipe(gulp.dest(targetPath + "/jquery/dist"));

    gulp.src(nodeRoot + "jquery-validation/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation/dist"));

    gulp.src(nodeRoot + "jquery-validation-unobtrusive/dist/*.js").pipe(gulp.dest(targetPath + "/jquery-validation-unobtrusive"));
});

Diese Datei enthält einen JavaScript-Code, der ausgeführt wird, wenn das Projekt erstellt und bereinigt wird. Es werden alle erforderlichen Dateien nach lib2 kopiert ( nicht nach lib - Sie können dies leicht ändern ). Ich habe die gleiche Struktur wie in einem neuen Projekt verwendet, aber es ist einfach, Dateien an einen anderen Speicherort zu ändern. Wenn Sie die Dateien verschieben, stellen Sie sicher, dass Sie auch _Layout.cshtml aktualisieren . Beachten Sie, dass alle Dateien im lib2-Verzeichnis entfernt werden, wenn das Projekt bereinigt wird.

Wenn Sie mit der rechten Maustaste auf gulpfile.js klicken , können Sie Task Runner Explorer auswählen . Von hier aus können Sie gulp manuell ausführen, um Dateien zu kopieren oder zu bereinigen.

Gulp kann auch für andere Aufgaben wie das Minimieren von JavaScript- und CSS-Dateien nützlich sein:

https://docs.microsoft.com/en-us/aspnet/core/client-side/using-gulp?view=aspnetcore-2.1

Bibliotheksverwalter (einfach)

Klicken Sie mit der rechten Maustaste auf Ihr Projekt und wählen Sie Clientseitenbibliotheken verwalten . Die Datei libman.json ist jetzt geöffnet. In dieser Datei geben Sie an, welche Bibliothek und Dateien verwendet werden sollen und wo sie lokal gespeichert werden sollen. Wirklich einfach! Die folgende Datei kopiert die Standardbibliotheken, die beim Erstellen eines neuen ASP.NET Core 2.1-Projekts verwendet werden:

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "files": [ "jquery.js", "jquery.min.map", "jquery.min.js" ],
      "destination": "wwwroot/lib/jquery/dist/"
    },
    {
      "library": "[email protected]",
      "files": [ "additional-methods.js", "additional-methods.min.js", "jquery.validate.js", "jquery.validate.min.js" ],
      "destination": "wwwroot/lib/jquery-validation/dist/"
    },
    {
      "library": "[email protected]",
      "files": [ "jquery.validate.unobtrusive.js", "jquery.validate.unobtrusive.min.js" ],
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "[email protected]",
      "files": [
        "css/bootstrap.css",
        "css/bootstrap.css.map",
        "css/bootstrap.min.css",
        "css/bootstrap.min.css.map",
        "css/bootstrap-theme.css",
        "css/bootstrap-theme.css.map",
        "css/bootstrap-theme.min.css",
        "css/bootstrap-theme.min.css.map",
        "fonts/glyphicons-halflings-regular.eot",
        "fonts/glyphicons-halflings-regular.svg",
        "fonts/glyphicons-halflings-regular.ttf",
        "fonts/glyphicons-halflings-regular.woff",
        "fonts/glyphicons-halflings-regular.woff2",
        "js/bootstrap.js",
        "js/bootstrap.min.js",
        "js/npm.js"
      ],
      "destination": "wwwroot/lib/bootstrap/dist"
    },
    {
      "library": "[email protected]",
      "files": [ "list.js", "list.min.js" ],
      "destination": "wwwroot/lib/listjs"
    }
  ]
}

Wenn Sie die Dateien verschieben, stellen Sie sicher, dass Sie auch _Layout.cshtml aktualisieren .

Anstatt zu versuchen, den Knotenmodulordner zu bedienen, können Sie auch Gulp verwenden, um das zu kopieren, was Sie für wwwroot benötigen.

https://docs.asp.net/en/latest/client-side/using-gulp.html

Dies könnte auch helfen

Visual Studio 2015 ASP.NET 5, Gulp-Task kopiert keine Dateien von node_modules

Was ist der richtige Ansatz dafür?

Es gibt viele "richtige" Ansätze. Sie müssen nur entscheiden, welcher Ihren Anforderungen am besten entspricht. Es scheint, als ob Sie falsch verstehen, wie man node_modules...

Wenn Sie mit NuGet vertraut sind , sollten Sie sich npm als clientseitiges Gegenstück vorstellen. Wo das node_modulesVerzeichnis wie das binVerzeichnis für NuGet ist . Die Idee ist, dass dieses Verzeichnis nur ein üblicher Speicherort für Pakete ist. Meiner Meinung nach ist es besser, dependencydie benötigten Pakete so zu übernehmen, wie Sie es in der Liste getan haben package.json. Verwenden Sie dann einen Task-Runner wie Gulpbeispielsweise, um die benötigten Dateien an den gewünschten wwwrootSpeicherort zu kopieren .

Ich habe im Januar einen Blog-Beitrag darüber geschrieben, der Details zu npm , Gulp und eine ganze Reihe anderer Details enthält, die heute noch relevant sind. Außerdem hat jemand auf meine SO-Frage aufmerksam gemacht, die ich gestellt und letztendlich hier selbst beantwortet habe , was wahrscheinlich hilfreich ist.

Ich habe eine erstellt Gist, die das gulpfile.jsals Beispiel zeigt.

In Ihrem ist Startup.cses immer noch wichtig, statische Dateien zu verwenden:

app.UseStaticFiles();

Dadurch wird sichergestellt, dass Ihre Anwendung auf das zugreifen kann, was sie benötigt.

Ein viel einfacherer Ansatz ist die Verwendung des OdeToCode.UseNodeModules Nuget-Pakets. Ich habe es gerade mit .Net Core 3.0 getestet. Sie müssen das Paket lediglich zur Lösung hinzufügen und in der Configure-Methode der Startup-Klasse darauf verweisen:

app.UseNodeModules();

Ich habe davon aus dem hervorragenden Kurs zum Erstellen einer Webanwendung mit ASP.NET Core, MVC, Entity Framework Core, Bootstrap und Angular Pluralsight von Shawn Wildermuth erfahren.

Shawn Wildermuth hat hier eine nette Anleitung: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

Der Artikel verweist auf die Gulpfile auf GitHub, in der er die Strategie im Artikel implementiert hat. Sie können einfach den größten Teil des gulpfile-Inhalts kopieren und in Ihren einfügen. Fügen Sie jedoch die entsprechenden Pakete in package.json unter devDependencies hinzu: gulp gulp-uglify gulp-concat rimraf merge-stream

Ich habe in meinem Projekt einen besseren Weg gefunden, um JS-Pakete mit NPM Gulp / Grunt-Task-Läufern zu verwalten. Ich mag die Idee nicht, ein NPM mit einer anderen Ebene der Javascript-Bibliothek zu haben, um die "Automatisierung" zu handhaben, und meine wichtigste Anforderung ist, das npm-Update einfach auszuführen, ohne sich darüber Gedanken zu machen, ob ich Schluck-Sachen ausführen muss. wenn es alles erfolgreich kopiert hat und umgekehrt.

Der NPM-Weg:

• Der JS-Minifier ist bereits im ASP.net-Kern enthalten. Suchen Sie nach bundleconfig.json, damit dies für mich kein Problem darstellt (keine benutzerdefinierte Kompilierung).
• Das Gute an NPM ist, dass es eine gute Dateistruktur hat, so dass ich die vorkompilierten / minimierten Versionen der Abhängigkeiten immer unter node_modules / module / dist finden kann
• Ich verwende ein NPM-Skript node_modules / .hooks / {eventname}, das das Kopieren / Aktualisieren / Löschen der Project / wwwroot / lib / module / dist / .js-Dateien übernimmt. Die Dokumentation finden Sie hier https: // docs.npmjs.com/misc/scripts (Ich aktualisiere das Skript, das ich für Git verwende, sobald es ausgefeilter ist.) Ich benötige keine zusätzlichen Task-Runner ( .js-Tools, die mir nicht gefallen.) Was hält mein Projekt sauber und einfach.

Der Python-Weg:

https://pypi.python.org/pyp ... aber in diesem Fall müssen Sie die Quellen manuell pflegen

Bitte entschuldigen Sie die Länge dieses Beitrags.

Dies ist ein Arbeitsbeispiel mit ASP.NET Core Version 2.5.

Bemerkenswert ist, dass die Datei project.json ( siehe hier ) zugunsten von .csproj veraltet ist . Ein Problem mit .csproj . Datei ist die große Menge an Funktionen und die Tatsache, dass es keinen zentralen Ort für die Dokumentation gibt ( siehe hier ).

In diesem Beispiel wird der ASP.NET-Kern in einem Docker Linux-Container (alpine 3.9) ausgeführt. Die Pfade werden dies widerspiegeln. Es wird auch gulp ^ 4.0 verwendet. Mit einigen Änderungen sollte es jedoch mit älteren Versionen von ASP.NET Core, Gulp, NodeJS und auch ohne Docker funktionieren.

Aber hier ist eine Antwort:

gulpfile.js sehen hier das eigentliche Arbeitsbeispiel

// ROOT and OUT_DIR are defined in the file above. The OUT_DIR value comes from .NET Core when ASP.net us built.
const paths = {
    styles: {
        src: `${ROOT}/scss/**/*.scss`,
        dest: `${OUT_DIR}/css`
    },
    bootstrap: {
        src: [
            `${ROOT}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
            `${ROOT}/node_modules/startbootstrap-creative/css/creative.min.css`
        ],
        dest: `${OUT_DIR}/css`
    },
    fonts: {// enter correct paths for font-awsome here.
        src: [
            `${ROOT}/node_modules/fontawesome/...`,
        ],
        dest: `${OUT_DIR}/fonts`
    },
    js: {
        src: `${ROOT}/js/**/*.js`,
        dest: `${OUT_DIR}/js`
    },
    vendorJs: {
        src: [
            `${ROOT}/node_modules/jquery/dist/jquery.min.js`
            `${ROOT}/node_modules/bootstrap/dist/js/bootstrap.min.js`
        ],
        dest: `${OUT_DIR}/js`
    }
};

// Copy files from node_modules folder to the OUT_DIR.
let fonts = () => {
    return gulp
        .src(paths.styles.src)
        .pipe(gulp.dest(paths.styles.dest));
};

// This compiles all the vendor JS files into one, jsut remove the concat to keep them seperate.
let vendorJs = () => {
    return gulp
        .src(paths.vendorJs.src)
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest(paths.vendorJs.dest));
}

// Build vendorJs before my other files, then build all other files in parallel to save time.
let build = gulp.series(vendorJs, gulp.parallel(js, styles, bootstrap));

module.exports = {// Only add what we intend to use externally.
    default: build,
    watch
};

Fügen Sie ein Ziel in die .csproj- Datei ein. Beachten Sie, dass wir auch eine Überwachung hinzugefügt haben , die überwacht und ausgeschlossen werden soll, wenn wir den dotnet run watchBefehl nutzen.

app.csprod

  <ItemGroup>
    <Watch Include="gulpfile.js;js/**/*.js;scss/**/*.scss" Exclude="node_modules/**/*;bin/**/*;obj/**/*" />
  </ItemGroup>

  <Target Name="BuildFrontend" BeforeTargets="Build">
    <Exec Command="yarn install" />
    <Exec Command="yarn run build -o $(OutputPath)" />
  </Target>

Wenn dotnet run buildes jetzt ausgeführt wird, werden auch Knotenmodule installiert und erstellt.