Jak inni już wspominali, menedżer pakietów Bower , który był zwykle używany do takich zależności w aplikacji, która nie opiera się na skomplikowanych skryptach po stronie klienta, jest na wyjściu i aktywnie zaleca przejście na inne rozwiązania:
..psst! Chociaż Bower jest utrzymywany, zalecamy przędzę i pakiet sieciowy do nowych projektów front-end!
Więc chociaż nadal możesz go teraz używać, Bootstrap również ogłosił, że porzuci wsparcie dla niego . W rezultacie wbudowane szablony ASP.NET Core są powoli edytowane, aby również od nich odejść.
Niestety nie ma jasnej drogi naprzód. Wynika to głównie z faktu, że aplikacje internetowe nieustannie przechodzą w stronę klienta, wymagając złożonych systemów kompilacji po stronie klienta i wielu zależności. Więc jeśli tworzysz coś takiego, być może już wiesz, jak to rozwiązać, i możesz rozszerzyć istniejący proces budowania, aby po prostu uwzględnić tam również Bootstrap i jQuery.
Ale nadal istnieje wiele aplikacji internetowych, które nie są tak ciężkie po stronie klienta, w których aplikacja nadal działa głównie na serwerze, a serwer wyświetla statyczne widoki. Bower wcześniej wypełnił to, ułatwiając po prostu publikowanie zależności po stronie klienta bez tak dużego procesu.
W świecie .NET mamy również NuGet, a przy poprzednich wersjach ASP.NET możemy również użyć NuGet do dodania zależności do niektórych zależności po stronie klienta, ponieważ NuGet po prostu umieściłby zawartość w naszym projekcie poprawnie. Niestety w nowym .csprojformacie i nowym NuGet zainstalowane pakiety znajdują się poza naszym projektem, więc nie możemy po prostu odwoływać się do nich.
Pozostaje nam kilka opcji dodawania naszych zależności:
Instalacja jednorazowa
To właśnie robią obecnie szablony ASP.NET Core, które nie są aplikacjami jednostronicowymi. Kiedy używasz ich do tworzenia nowej aplikacji, wwwrootfolder zawiera po prostu folder libzawierający zależności:
Jeśli przyjrzysz się uważnie obecnym plikom, zobaczysz, że zostały pierwotnie umieszczone tam przez Bower w celu utworzenia szablonu, ale prawdopodobnie wkrótce się to zmieni. Podstawową ideą jest to, że pliki są kopiowane raz do wwwrootfolderu, więc możesz na nich polegać.
Aby to zrobić, możemy po prostu postępować zgodnie z wprowadzeniem Bootstrap i bezpośrednio pobrać skompilowane pliki . Jak wspomniano na stronie pobierania, nie obejmuje to jQuery , więc musimy pobrać ją również osobno; to nie zawiera Popper.js choć jeśli zdecydujemy się skorzystać z bootstrap.bundlepliku później, które będziemy robić. W przypadku jQuery możemy po prostu pobrać pojedynczy „skompresowany plik produkcyjny” z witryny pobierania (kliknij prawym przyciskiem myszy łącze i wybierz z menu opcję „Zapisz łącze jako ...”).
Pozostaje nam kilka plików, które po prostu rozpakują i skopiują do wwwrootfolderu. Możemy również utworzyć libfolder, aby było jaśniejsze, że są to zależności zewnętrzne:
To wszystko, czego potrzebujemy, więc teraz musimy tylko dostosować nasz _Layout.cshtmlplik, aby zawierał te zależności. W tym celu dodajemy następujący blok do <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>
I kolejny blok na samym końcu <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>
Możesz także po prostu dołączyć zminimalizowane wersje i pominąć <environment>pomocników tagów, aby było to nieco prostsze. Ale to wszystko, co musisz zrobić, aby zacząć.
Zależności od NPM
Bardziej nowoczesnym sposobem, również jeśli chcesz aktualizować swoje zależności, byłoby pobranie zależności z repozytorium pakietów NPM. Możesz do tego użyć NPM lub Yarn; w moim przykładzie użyję NPM.
Na początek musimy utworzyć package.jsonplik dla naszego projektu, abyśmy mogli określić nasze zależności. Aby to zrobić, po prostu robimy to w oknie dialogowym „Dodaj nowy element”:
Kiedy już to zrobimy, musimy go edytować, aby uwzględnić nasze zależności. Powinno to wyglądać tak:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Zapisując, Visual Studio będzie już uruchamiać NPM, aby zainstalować za nas zależności. Zostaną zainstalowane w node_modulesfolderze. Pozostaje więc tylko pobrać pliki stamtąd do naszego wwwrootfolderu. Możesz to zrobić na kilka sposobów:
bundleconfig.json do tworzenia pakietów i minifikacji
Możemy użyć jednego z różnych sposobów bundleconfig.jsonużywania a do tworzenia pakietów i minifikacji, jak wyjaśniono w dokumentacji . Bardzo prostym sposobem jest po prostu użycie pakietu BuildBundlerMinifier NuGet, który automatycznie konfiguruje w tym celu zadanie kompilacji.
Po zainstalowaniu tego pakietu musimy utworzyć bundleconfig.jsonw katalogu głównym projektu następującą zawartość:
[
{
"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 }
}
]
To zasadniczo konfiguruje, które pliki mają być połączone w jakie. Kiedy budujemy, widzimy, że pliki vendor.min.cssi vendor.js.csssą tworzone poprawnie. Więc wszystko, co musimy zrobić, to _Layouts.htmlponownie dostosować nasze, aby uwzględnić te pliki:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Korzystanie z menedżera zadań, takiego jak Gulp
Jeśli chcemy nieco bardziej zająć się programowaniem po stronie klienta, możemy również zacząć używać narzędzi, których byśmy tam używali. Na przykład Webpack, który jest bardzo często używanym narzędziem do tworzenia naprawdę wszystkiego. Ale możemy również zacząć od prostszego menedżera zadań, takiego jak Gulp, i samodzielnie wykonać kilka niezbędnych kroków.
W tym celu dodajemy gulpfile.jsdo naszego katalogu głównego projektu, z następującą zawartością:
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'));
Teraz musimy również dostosować nasze, package.jsonaby mieć zależności od gulpi 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"
}
}
Na koniec edytujemy nasze, .csprojaby dodać następujące zadanie, które zapewnia, że nasze zadanie Gulp zostanie uruchomione podczas budowania projektu:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Teraz, kiedy budujemy, defaulturuchamiane jest zadanie Gulp, które uruchamia build-vendorzadania, które następnie budują nasze vendor.min.cssi vendor.min.jstak jak wcześniej. Więc po dostosowaniu naszych _Layout.cshtmltak jak powyżej, możemy skorzystać z jQuery i Bootstrap.
Chociaż początkowa konfiguracja Gulpa jest nieco bardziej skomplikowana niż bundleconfig.jsonpowyższa, weszliśmy teraz do świata węzłów i możemy zacząć korzystać ze wszystkich innych fajnych narzędzi. Warto więc zacząć od tego.
Wniosek
Chociaż nagle stało się to o wiele bardziej skomplikowane niż w przypadku samego używania Bower, zyskujemy również dużą kontrolę dzięki tym nowym opcjom. Na przykład możemy teraz zdecydować, które pliki są faktycznie zawarte w wwwrootfolderze i jak dokładnie wyglądają. Możemy również wykorzystać to, aby wykonać pierwsze kroki w świecie programowania po stronie klienta za pomocą Node, co powinno przynajmniej trochę pomóc w krzywej uczenia się.
