Як вже згадували інші, менеджер пакунків Bower , який зазвичай використовувався для таких залежностей у додатку, які не покладаються на важкі сценарії на стороні клієнта, виходить і активно рекомендує перейти до інших рішень:
..psst! Поки Bower підтримується, ми рекомендуємо пряжу та веб- упаковку для нових передових проектів!
Тож хоча ви все ще можете ним скористатися зараз, Bootstrap також оголосив про припинення підтримки . Як результат, вбудовані шаблони ASP.NET Core поступово редагуються, щоб також віддалятися від нього.
На жаль, немає чіткого шляху вперед. В основному це пов'язано з тим, що веб-додатки постійно просуваються далі на сторону клієнта, вимагаючи складних систем побудови на клієнті та багатьох залежностей. Отже, якщо ви будуєте щось подібне, ви, можливо, вже знаєте, як це вирішити, і ви можете розширити свій існуючий процес збирання, щоб просто також включити Bootstrap і jQuery туди.
Але все ще є багато веб-додатків, які не такі важкі на стороні клієнта, де програма все ще працює в основному на сервері і в результаті сервер подає статичні подання. Раніше Bower заповнив це, полегшивши просто публікувати залежність на стороні клієнта без особливих процесів.
У світі .NET у нас також є NuGet, і з попередніми версіями ASP.NET ми могли б також використовувати NuGet, щоб додати залежності до деяких залежностей на стороні клієнта, оскільки NuGet просто розмістить вміст у нашому проекті правильно. На жаль, з новим.csproj форматі та новому NuGet встановлені пакети знаходяться поза нашим проектом, тому ми не можемо просто посилатися на них.
Це залишає нам кілька варіантів, як додати наші залежності:
Одноразова установка
Це те, що зараз роблять шаблони ASP.NET Core, які не є односторінковими програмами. Коли ви використовуєте їх для створення нової програми, ця wwwrootпапка просто містить папку, libяка містить залежності:
Якщо ви уважно подивитесь на файли в даний час, ви можете побачити, що вони спочатку були розміщені там із Bower для створення шаблону, але це, швидше за все, зміниться незабаром. Основна ідея полягає в тому, що файли копіюються один раз уwwwroot папку, щоб ви могли залежати від них.
Для цього ми можемо просто прослідкувати вступ Bootstrap та завантажити завантажені файли безпосередньо. Як було сказано на сайті завантаження, це не включає jQuery , тому нам також потрібно завантажити його окремо; він містить Popper.js, хоча якщо ми вирішимо використовувати bootstrap.bundleфайл пізніше, що ми зробимо. Для jQuery ми можемо просто отримати один файл "стиснення, виготовлення" з сайту завантаження (клацніть правою кнопкою миші на посилання та виберіть у меню пункт "Зберегти посилання як ...").
Це залишає нам кілька файлів, які просто витягнуть і скопіюють у wwwrootпапку. Ми також можемо зробити libпапку, щоб зрозуміти, що це зовнішні залежності:
Це все, що нам потрібно, тому тепер нам просто потрібно налаштувати наш _Layout.cshtmlфайл, щоб він включав ці залежності. Для цього ми додаємо наступний блок до <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>
І наступний блок в самому кінці <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>
Ви також можете просто включити мінімізовані версії та пропустити <environment>сюди помічників тегів, щоб зробити це трохи простіше. Але це все, що потрібно зробити, щоб не почати.
Залежності від НПМ
Більш сучасним способом, якщо ви хочете оновлювати свої залежності, було б отримати залежності з сховища пакетів NPM. Для цього можна використовувати або NPM, або пряжу; у своєму прикладі я буду використовувати NPM.
Для початку нам потрібно створити package.jsonфайл для нашого проекту, щоб ми могли вказати наші залежності. Для цього ми просто робимо це у діалоговому вікні "Додати новий елемент":
Після того, як ми це маємо, нам потрібно відредагувати його, щоб включити наші залежності. Це має виглядати приблизно так:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
Заощадивши, Visual Studio вже запустить NPM для встановлення залежностей для нас. Вони будуть встановлені в node_modulesпапку. Отже, що залишилося зробити - це занести файли звідти в нашу wwwrootпапку. Для цього є кілька варіантів:
bundleconfig.json для з’єднання та мінімізації
Ми можемо використовувати один із різних способів споживання форми bundleconfig.jsonдля згуртування та мінімізації, як це пояснено в документації . Дуже простий спосіб - просто використовувати пакет BuildBundlerMinifier NuGet, який автоматично встановлює для цього завдання збірки.
Після встановлення цього пакету нам потрібно створити bundleconfig.jsonкорінь проекту з наступним вмістом:
[
{
"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 }
}
]
Це в основному налаштовує, які файли об’єднувати в які. І коли ми будуємо, ми можемо бачити, що vendor.min.cssі vendor.js.cssстворені правильно. Тому все, що нам потрібно зробити, - це знову налаштувати наші _Layouts.htmlфайли:
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
Використання диспетчера завдань на зразок Gulp
Якщо ми хочемо трохи більше перейти до розвитку клієнтів, ми також можемо почати використовувати інструменти, які ми б там використовували. Наприклад, Webpack, який є дуже часто використовуваним інструментом збирання для всього. Але ми можемо також почати з більш простого менеджера завдань, як-то Gulp, і зробити кілька необхідних кроків самостійно.
Для цього ми додаємо gulpfile.jsу свій корінь проекту із таким змістом:
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'));
Тепер, ми також повинні скорегувати наші package.jsonмати залежності від gulpі 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"
}
}
Нарешті, ми редагуємо наше .csprojдодавання наступного завдання, яке гарантує, що наше завдання Gulp працює під час створення проекту:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
Тепер, коли ми будуємо, defaultвиконується завдання Gulp, яке виконує build-vendorзавдання, яке потім будує наше vendor.min.cssі так vendor.min.jsсамо, як ми робили раніше. Отже, відкоригувавши так _Layout.cshtmlсамо, як вище, ми можемо скористатися jQuery та Bootstrap.
Незважаючи на те, що початкова настройка Gulp трохи складніша, ніж bundleconfig.jsonописана вище, ми тепер увійшли до Світового вузла і можемо почати використовувати всі інші цікаві інструменти там. Тож, можливо, варто було б почати з цього.
Висновок
Хоча це раптом стає набагато складніше, ніж просто використання Bower, ми також отримуємо багато контролю над цими новими параметрами. Наприклад, тепер ми можемо вирішити, які файли фактично включені в wwwrootпапку і як саме вони виглядають. І ми також можемо використовувати це для того, щоб зробити перші кроки у світ розвитку на стороні клієнта за допомогою Node, який, принаймні, повинен трохи допомогти кривій навчання.
