Jak używać npm z ASP.NET Core

Question

Używam npm do zarządzania jQuery, Bootstrap, Font Awesome i podobnych bibliotek klienckich potrzebuję do mojej aplikacji ASP.NET Core.

Podejście, że pracował dla mnie rozpoczął dodając plik package.json do projektu, który wygląda tak:

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

npm przywraca te pakiety w folderze node_modules która znajduje się na tym samym poziomie co wwwroot w katalogu projektu:

Jak ASP.NET Rdzeń służy statycznych plików z folderu wwwroot i node_modules nie ma, musiałem zrobić kilka zmian do tej pracy, pierwszy : Dodaj ing app.UseFileServer tuż przed app.UseStaticFiles w moim pliku Startup.cs:

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

app.UseStaticFiles(); 

a drugi, w tym node_modules w moim publishOptions w pliku project.json:

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

Działa to w moje środowisko programistyczne i działa również po wdrożeniu go w mojej instancji usługi Azure App Service, pliki jQuery, bootstrap i font-awesome są dobrze obsługiwane, ale nie jestem pewien co do tej implementacji.

Jakie jest właściwe podejście do tego?

To rozwiązanie pojawiło się po zebraniu dużej ilości informacji z kilku źródeł i wypróbowaniu niektórych z nich, które nie działały, i wydaje się nieco dziwne, że serwujemy te pliki z zewnątrz wwwroot.

Każda rada zostanie bardzo doceniona.

Answer 1

publikując swój cały node_modules folderu jest wdrażana znacznie więcej plików niż faktycznie trzeba będzie w produkcji.

Zamiast tego należy użyć narzędzia do uruchamiania zadań jako części procesu kompilacji, aby spakować potrzebne pliki i wdrożyć je w folderze wwwroot. Umożliwi to również łączenie i minimalizowanie zasobów w tym samym czasie, zamiast konieczności obsługiwania każdej pojedynczej biblioteki osobno.

Możesz także całkowicie usunąć konfigurację FileServer i odpowiedzieć na UseStaticFiles zamiast tego.

Obecnie, gulp jest wybiegaczem zadań VS z wyboru. Dodaj numer gulpfile.js do katalogu głównego projektu i skonfiguruj go do przetwarzania plików statycznych podczas publikowania.

Na przykład, można dodać następującą sekcję scripts do project.json:

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

Który będzie działać z następującym gulpfile (domyślnie gdy rusztowanie z 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"]); 

Answer 2

Zamiast próbować obsługiwać folder modułów węzłów, możesz również użyć Gulp, aby skopiować to, co potrzebujesz do wwwroot.

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

To może pomóc zbyt

Visual Studio 2015 ASP.NET 5, Gulp task not copying files from node_modules

Answer 3

• Korzystanie npm zarządzania biblioteki po stronie klienta jest dobrym wyborem (w przeciwieństwie do Bower lub Nuget) myślisz we właściwym kierunku :)
• Podział po stronie serwera (ASP.NET Core) i po stronie klienta (np. Angular 2, Ember, React) projekty do oddzielnych folderów (w przeciwnym razie projekt ASP.NET może zawierać dużo szumu - testy jednostkowe dla kodu po stronie klienta, folderu node_modules, artefaktów kompilacji itp.). Przodujący programiści pracujący w tym samym zespole z wami dziękują za to :)
• Przywróć moduły npm na poziomie rozwiązania (podobnie jak przywracasz pakiety przez NuGet - nie w folderze projektu), w ten sposób możesz mieć jednostkę oraz testy integracyjne w osobnym folderze (w przeciwieństwie do testów JavaScript po stronie klienta w projekcie ASP.NET Core).
• Używanie może nie wymagać FileServer, po StaticFiles powinno wystarczyć do udostępniania plików statycznych (.js, obrazy itp.)
• Zastosowanie WebPACK na pakiet kodu po stronie klienta do jednego lub kilku fragmentów (zestawy)
• You might not need Gulp/Grunt jeśli używasz modułu Bundler takie jak Webpack
• pisanie skryptów automatyzacji budować w ES2015 + JavaScript (w przeciwieństwie do Bash lub PowerShell), będą pracować na różnych platformach i być bardziej dostępne dla wielu twórców stron (każdy mówi JavaScript w dzisiejszych czasach)
• Rename wwwroot do public, inaczej strukturę folderów w Azure Web Apps będą kłopotliwe (D:\Home\site\wwwroot\wwwroot vs D:\Home\site\wwwroot\public)
• Opublikuj o głównie skompilowane dane wyjściowe do aplikacji internetowych Azure (nie należy nigdy przenosić numeru node_modules na serwer WWW). Przykładem jest tools/deploy.js.

Odwiedź ASP.NET Core Starter Kit na GitHub (Zastrzeżenie: Jestem autora)

Answer 4

Jakie jest właściwe podejście do tego?

Istnieje wiele "właściwych" rozwiązań, po prostu zdecydowałeś, który najlepiej spełnia twoje potrzeby. Wydaje się, że jesteś niezrozumienia sposobu korzystania node_modules ...

Jeśli jesteś zaznajomiony z Nuget warto pomyśleć o KMP jak jego odpowiednik po stronie klienta. Gdzie katalog node_modules jest podobny do katalogu bin dla NuGet. Chodzi o to, że ten katalog jest tylko typową lokalizacją do przechowywania paczek, moim zdaniem lepiej jest zabrać ze sobą dependency na opakowaniach, których potrzebujesz, tak jak w przypadku package.json. Następnie użyj narzędzia do wykonywania zadań, na przykład Gulp, na przykład, aby skopiować potrzebne pliki do wybranej lokalizacji wwwroot.

Napisałem blog post o tym w styczniu, że szczegółowy opis KMP, Gulp i całą masę innych szczegółów, które są nadal aktualne. Dodatkowo ktoś zwrócił uwagę na moje pytanie SO, które zadałem i ostatecznie odpowiedziałem sobie: here, co jest prawdopodobnie pomocne.

Utworzono Gist, który pokazuje gulpfile.js jako przykład.

w twojej Startup.cs nadal ważne jest, aby korzystać z plików statycznych:

app.UseStaticFiles(); 

To zapewni, że aplikacja może uzyskać dostęp do tego, co potrzebuje.

Answer 5

Zainstalować Bundler and Minifier w Visual Studio Extensions

Następnie należy utworzyć bundleconfig.json i wprowadź następujące jak:

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

Więc Bundler i minifier (łyk based) ma dostęp do plików źródłowych (które powinny być wyłączone z Visual Studio, a także wyłączone z GIT) i umieszczane na stronie www, jak określono, tylko jeden efekt uboczny za każdym razem, gdy zapiszesz, uruchomi to (lub możesz go ustawić lub uruchomić ręcznie)

Answer 6

Shawn Wildermuth ma ładny instrukcji tutaj: https://wildermuth.com/2017/11/19/ASP-NET-Core-2-0-and-the-End-of-Bower

artykułu odnośniki do gulpfile na GitHub dokąd realizowanej strategii w artykule. można po prostu skopiować i wkleić większość zawartości gulpfile do Ciebie, ale należy dodać odpowiednie pakiety w package.json pod devDependencies: haustem łyk-zeszpecić haustem-concat rimraf seryjnej strumień