Używam npm do zarządzania bibliotekami klienta jQuery, Bootstrap, Font Awesome i podobnymi potrzebnymi dla mojej aplikacji ASP.NET Core.

Podejście, które zadziałało, zaczęło się od dodania do projektu pliku package.json, który wygląda następująco:

{
    "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 do folderu node_modules, który jest na tym samym poziomie co wwwroot w katalogu projektu:

Ponieważ ASP.NET Core obsługuje pliki statyczne z folderu wwwroot, a node_modules tam nie ma, musiałem wprowadzić kilka zmian, aby to zadziałało, pierwsza: dodanie app.UseFileServer tuż przed app.UseStaticFiles w moim Startup. plik 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 publicationOptions w pliku project.json:

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

Działa to w moim środowisku programistycznym i działa również po wdrożeniu go w moim wystąpieniu Azure App Service, pliki statyczne 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 wielu fragmentów informacji z kilku źródeł i wypróbowaniu niektórych, które nie zadziałały, i wydaje się nieco dziwne, że trzeba je obsługiwać spoza wwwroot.

Wszelkie porady będą bardzo mile widziane.

Publikując cały node_modulesfolder, wdrażasz znacznie więcej plików, niż faktycznie będziesz potrzebować w środowisku produkcyjnym.

Zamiast tego użyj modułu uruchamiającego zadania jako części procesu kompilacji, aby spakować wymagane pliki i wdrożyć je w swoim wwwrootfolderze. Pozwoli to również na jednoczesne łączenie i minifikowanie zasobów, zamiast obsługiwać osobno każdą bibliotekę.

Możesz wtedy całkowicie usunąć FileServerkonfigurację i polegać na niej UseStaticFiles.

Obecnie gulp jest preferowanym narzędziem do uruchamiania zadań VS. Dodaj gulpfile.jsdo katalogu głównego projektu i skonfiguruj go do przetwarzania plików statycznych podczas publikowania.

Na przykład możesz dodać następującą scriptssekcję do swojego project.json:

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

Który działałby z następującym plikiem gulpfile (domyślnym w przypadku tworzenia szkieletów 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"]);

• Używanie npmdo zarządzania bibliotekami po stronie klienta jest dobrym wyborem (w przeciwieństwie do Bower czy NuGet), myślisz we właściwym kierunku :)
• Podziel projekty po stronie serwera (ASP.NET Core) i po stronie klienta (np. Angular 2, Ember, React) na osobne foldery (w przeciwnym razie twój projekt ASP.NET może mieć dużo szumu - testy jednostkowe dla kodu po stronie klienta, node_modules folder, artefakty kompilacji itp.). Deweloperzy front-end pracujący z Tobą w tym samym zespole będą Ci za to wdzięczni :)
• Przywróć moduły npm na poziomie rozwiązania (podobnie jak przywracasz pakiety przez NuGet - a nie do folderu projektu), w ten sposób możesz mieć również testy jednostkowe i integracyjne w osobnym folderze (w przeciwieństwie do testów JavaScript po stronie klienta wewnątrz Projekt ASP.NET Core).
• Użycie może nie być potrzebne FileServer, posiadanie StaticFilespowinno wystarczyć do obsługi plików statycznych (.js, obrazy itp.)
• Użyj Webpack, aby połączyć kod po stronie klienta w jedną lub więcej części (pakiety)
• Możesz nie potrzebować Gulp / Grunt, jeśli używasz pakietu modułów, takiego jak Webpack
• Pisz skrypty automatyzacji kompilacji w ES2015 + JavaScript (w przeciwieństwie do Bash lub PowerShell), będą działać na wielu platformach i będą bardziej dostępne dla różnych twórców stron internetowych (obecnie wszyscy mówią JavaScript)
• Zmień nazwę wwwrootna public, w przeciwnym razie struktura folderów w Azure Web Apps będzie myląca (w D:\Home\site\wwwroot\wwwrootporównaniu z D:\Home\site\wwwroot\public)
• Publikuj tylko skompilowane dane wyjściowe w Azure Web Apps (nigdy nie należy wypychać node_modulesna serwer hostingu sieci Web). Zobacz tools/deploy.jsjako przykład.

Odwiedź ASP.NET Core Starter Kit w serwisie GitHub (zastrzeżenie: jestem autorem)

Zainstaluj pakiet Bundler i Minifier w rozszerzeniach programu Visual Studio

Następnie tworzysz bundleconfig.jsoni wpisujesz:

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

Tak więc bundler i minifier (oparte na gulp) mają dostęp do plików źródłowych (które powinny być wykluczone z Visual Studio, a także z GIT) i umieszcza je w wwwroot, jak określono

tylko efekt uboczny za każdym razem, gdy zapiszesz, uruchomi to (ale możesz ustawić, aby uruchamiał go ręcznie)

Dam dwie odpowiedzi. npm w połączeniu z innymi narzędziami jest potężny, ale wymaga trochę pracy przy konfiguracji. Jeśli chcesz tylko pobrać niektóre biblioteki, możesz zamiast tego użyć Menedżera bibliotek (wydanego w programie Visual Studio 15.8).

NPM (zaawansowane)

Najpierw dodaj package.json do katalogu głównego projektu. Dodaj następującą zawartość:

{
  "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"
  }
}

Spowoduje to, że NPM pobierze biblioteki Bootstrap, JQuery i inne biblioteki używane w nowym podstawowym projekcie asp.net do folderu o nazwie node_modules. Kolejnym krokiem jest skopiowanie plików w odpowiednie miejsce. Aby to zrobić, użyjemy gulpa, który również został pobrany przez NPM. Następnie dodaj nowy plik w katalogu głównym projektu o nazwie gulpfile.js . Dodaj następującą zawartość:

/// <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"));
});

Ten plik zawiera kod JavaScript, który jest wykonywany podczas tworzenia i czyszczenia projektu. Skopiuje wszystkie potrzebne pliki do lib2 ( nie lib - możesz to łatwo zmienić ). Użyłem tej samej struktury, co w nowym projekcie, ale łatwo jest zmienić pliki w inne miejsce. Jeśli przeniesiesz pliki, upewnij się, że zaktualizowałeś również plik _Layout.cshtml . Zauważ, że wszystkie pliki w katalogu lib2 zostaną usunięte po wyczyszczeniu projektu.

Jeśli klikniesz prawym przyciskiem myszy plik gulpfile.js , możesz wybrać opcję Task Runner Explorer . Stąd możesz ręcznie uruchomić gulp, aby skopiować lub wyczyścić pliki.

Gulp może być również przydatny do innych zadań, takich jak minifikacja plików JavaScript i CSS:

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

Menedżer bibliotek (prosty)

Kliknij prawym przyciskiem myszy projekt i wybierz Zarządzaj bibliotekami po stronie klienta . Plik libman.json jest teraz otwarty. W tym pliku określasz, która biblioteka i pliki mają być używane i gdzie powinny być przechowywane lokalnie. Naprawdę proste! Poniższy plik kopiuje domyślne biblioteki używane podczas tworzenia nowego projektu ASP.NET Core 2.1:

{
  "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"
    }
  ]
}

Jeśli przeniesiesz pliki, upewnij się, że zaktualizowałeś również plik _Layout.cshtml .

Zamiast próbować obsługiwać folder modułów węzłów, możesz również użyć Gulp do skopiowania tego, czego potrzebujesz, do wwwroot.

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

To też może pomóc

Visual Studio 2015 ASP.NET 5, zadanie Gulp nie kopiuje plików z node_modules

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

Istnieje wiele „właściwych” podejść, po prostu musisz zdecydować, które z nich najlepiej odpowiada Twoim potrzebom. Wygląda na to, że nie rozumiesz, jak używać node_modules...

Jeśli znasz NuGet , powinieneś pomyśleć o npm jako jego odpowiedniku po stronie klienta. Gdzie node_moduleskatalog jest podobny do binkatalogu dla NuGet . Chodzi o to, że ten katalog jest po prostu wspólną lokalizacją do przechowywania pakietów, moim zdaniem lepiej jest wziąć dependencyna pakiety, których potrzebujesz, tak jak zrobiłeś to w package.json. Następnie użyj programu do uruchamiania zadań, takiego jak Gulpna przykład, aby skopiować potrzebne pliki do wybranej wwwrootlokalizacji.

Napisałem o tym post na blogu w styczniu, który zawiera szczegóły npm , 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 sobie tutaj odpowiedziałem , co prawdopodobnie jest pomocne.

Stworzyłem, Gistktóry pokazuje gulpfile.jsjako przykład.

W twoim Startup.csnadal ważne jest, aby używać plików statycznych:

app.UseStaticFiles();

Zapewni to, że aplikacja będzie miała dostęp do tego, czego potrzebuje.

Dużo prostszym podejściem jest użycie pakietu OdeToCode.UseNodeModules Nuget. Właśnie przetestowałem to z .Net Core 3.0. Wszystko, co musisz zrobić, to dodać pakiet do rozwiązania i odwołać się do niego w metodzie Configure klasy Startup:

app.UseNodeModules();

Dowiedziałem się o tym z doskonałego kursu Building a Web App with ASP.NET Core, MVC, Entity Framework Core, Bootstrap i Angular Pluralsight autorstwa Shawna Wildermutha.

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

Artykuł prowadzi do pliku gulpfile na GitHubie, w którym zaimplementował strategię w artykule. Możesz po prostu skopiować i wkleić większość zawartości pliku gulpfile do swojego, ale pamiętaj, aby dodać odpowiednie pakiety w pliku package.json w sekcji devDependencies: gulp gulp-uglify gulp-concat rimraf merge-stream

Znalazłem lepszy sposób zarządzania pakietami JS w moim projekcie za pomocą programów uruchamiających zadania NPM Gulp / Grunt. Nie podoba mi się pomysł posiadania NPM z kolejną warstwą biblioteki javascript do obsługi "automatyzacji", a moim najważniejszym wymaganiem jest proste uruchomienie aktualizacji npm bez żadnych innych obaw o to, czy będę musiał uruchamiać gulp, jeśli pomyślnie skopiował wszystko i odwrotnie.

Sposób NPM:

• Minifier JS jest już dołączony do rdzenia ASP.net, poszukaj bundleconfig.json, więc nie jest to dla mnie problem (nie kompiluję czegoś niestandardowego)
• Dobrą rzeczą w NPM jest to, że ma dobrą strukturę plików, więc zawsze mogę znaleźć wstępnie skompilowane / zminimalizowane wersje zależności w node_modules / module / dist
• Używam skryptu NPM node_modules / .hooks / {eventname}, który obsługuje kopiowanie / aktualizację / usuwanie plików projektu / wwwroot / lib / module / dist / .js, dokumentację można znaleźć tutaj https: // docs.npmjs.com/misc/scripts (zaktualizuję skrypt, którego używam do gita, gdy będzie bardziej dopracowany) Nie potrzebuję dodatkowych narzędzi do uruchamiania zadań ( narzędzia .js, których nie lubię) dzięki czemu mój projekt jest czysty i prosty.

Sposób Pythona:

https://pypi.python.org/pyp ... ale w tym przypadku musisz ręcznie zarządzać źródłami

Proszę wybaczyć długość tego posta.

To jest działający przykład przy użyciu ASP.NET Core w wersji 2.5.

Warto zauważyć, że plik project.json jest przestarzały ( patrz tutaj ) na rzecz .csproj . Problem z .csproj . plik to duża liczba funkcji i fakt, że nie ma centralnej lokalizacji dla jego dokumentacji ( patrz tutaj ).

Jeszcze jedno, ten przykład uruchamia ASP.NET core w kontenerze Docker Linux (alpine 3.9); więc ścieżki będą to odzwierciedlać. Używa również łyka ^ 4.0. Jednak z pewnymi modyfikacjami powinien działać ze starszymi wersjami ASP.NET Core, Gulp, NodeJS, a także bez Dockera.

Ale oto odpowiedź:

gulpfile.js zobacz tutaj prawdziwy przykład roboczy

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

Dodaj cel w pliku .csproj . Zauważ, że dodaliśmy również zegarek do obejrzenia i wykluczenia, jeśli skorzystamydotnet run watch polecenia.

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>

Teraz po dotnet run builduruchomieniu zainstaluje i zbuduje moduły węzłów.