Wie npm mit ASP.NET Core zu verwenden

Durch die Veröffentlichung Ihrer ganzen node_modules Ordner, den Sie bereitstellen, die weit mehr Dateien, als Sie tatsächlich benötigen in der Produktion.

Verwenden Sie stattdessen ein task-runner als Teil des Erstellungsprozesses zu Verpacken, die die Dateien, die Sie benötigen, und installieren Sie Sie auf Ihrem wwwroot Ordner. Dies wird auch ermöglichen es Ihnen, concat und verkleinern Ihrer Vermögen zur gleichen Zeit, anstatt zu dienen, jeder einzelnen Bibliothek getrennt.

Können Sie dann auch vollständig zu entfernen, die FileServer Konfiguration und verlassen Sie sich auf UseStaticFiles statt.

Derzeit gulp ist die VS-task-runner der Wahl. Hinzufügen eines gulpfile.js um den Stamm des Projekts fest, und konfigurieren Sie es, um Ihre statische Dateien, die auf "veröffentlichen".

Zum Beispiel können Sie fügen Sie den folgenden scripts Abschnitt, um Ihre project.json:

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

Das funktioniert mit den folgenden gulpfile (die Standardeinstellung, wenn Gerüste 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"]);

InformationsquelleAutor der Antwort Sock

Installieren Sie die Bundler und Minifier in Visual Studio-Erweiterungen

Dann erstellen Sie ein bundleconfig.json und geben Sie die folgenden wie :

//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
  }
]

Also die bundler und minifier (gulp Basis) hat Zugang zu den source-Dateien (die sollte ausgeschlossen werden von Visual Studio und auch ausgeschlossen aus dem GIT) und stellt Sie in den wwwroot wie angegeben

nur Nebeneffekt jedes mal, wenn Sie es speichern, werden auch diese (oder können Sie es oder führen Sie es manuell aus)

InformationsquelleAutor der Antwort ppumkin

Was ist der richtige Ansatz, dies zu tun?

Gibt es eine Menge von "richtigen" Ansätze, Sie müssen nur entscheiden, welche am besten Suiten Ihre Bedürfnisse. Es scheint, als ob Sie Missverständnisse wie zu verwenden node_modules...

Wenn Sie vertraut sind mit NuGet Sie sollten denken, npm als seine client-seitige Gegenstück. Wo die node_modules Verzeichnis ist wie die bin Verzeichnis für NuGet. Die Idee ist, dass dieses Verzeichnis nur einen gemeinsamen Speicherort für das speichern von Paketen, meiner Meinung nach ist es besser einen dependency auf die Pakete, die Sie benötigen, wie Sie getan haben, in der package.json. Dann mit einem task runner wie Gulp zum Beispiel zum kopieren der Dateien müssen Sie in Ihr gewünschtes wwwroot Lage.

Schrieb ich eine blog-post über diese wieder im Januar, details npm, Schluck und eine ganze Reihe von anderen details, die heute noch relevant sind. Darüber hinaus rief jemand auf meine Frage ALSO ich und fragte schließlich antwortete mir hier, das ist wahrscheinlich hilfreich.

Erstellte ich eine Gist zeigt, dass die gulpfile.js als Beispiel.

In Ihrem Startup.cs es ist immer wichtig, die Verwendung von statischen Dateien:

app.UseStaticFiles();

Dadurch wird sichergestellt, dass Ihre Anwendung zugreifen kann, was er braucht.

InformationsquelleAutor der Antwort David Pine

Ich habe einen besseren Weg gefunden, wie Sie zu verwalten JS-Pakete in mein Projekt mit NPM Gulp/Grunt task-Läufer. Ich weiß nicht, wie die Idee, einen NPM mit einer anderen Ebene der javascript-Bibliothek zu behandeln, der "automation", und meine Anforderung Nummer eins ist die einfache Ausführung der npm-update ohne irgendwelche anderen sorgen, wenn ich brauche zu laufen Schluck Zeug, wenn es erfolgreich kopiert alles und Umgekehrt.

Den NPM-Weg:

• Die JS minifier ist bereits gebündelt in die ASP.net Kern, suchen bundleconfig.json so ist dies kein Problem für mich (nicht kompilieren
  etwas Benutzerdefiniert)
• Die gute Sache über NPM ist, dass ist eine gute Dateistruktur so kann ich immer finden, dass die pre-compiled/minified Versionen der Abhängigkeiten
  unter node_modules/Modul/dist
• Ich bin mit einer NPM node_modules/.Haken/{eventname} Skript, welches ist der Umgang mit den kopieren/aktualisieren/löschen des
  Projekt/wwwroot/lib/module/dist/.js-Dateien, finden Sie die
  Dokumentation hier https://docs.npmjs.com/misc/scripts (ich werde aktualisieren, das script, dass ich mit git mal es werden mehr Poliert) brauche ich nicht
  zusätzliche Aufgabe Läufer (.js-tools, die ich nicht mag), was hält mein Projekt sauber und einfach.

Den python-Weg:

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

InformationsquelleAutor der Antwort Peter Húbek