Ответ 1
Как уже упоминалось, менеджер пакетов Bower, который обычно использовался для подобных зависимостей в приложении, не использующем тяжелые сценарии на стороне клиента, находится в процессе выхода и активно рекомендует перейти к другим решениям:
..psst! Пока поддерживается Bower, мы рекомендуем использовать пряжу и веб-пакет для новых фронт- эндовых проектов!
Так что, хотя вы все еще можете использовать его прямо сейчас, Bootstrap также объявил о прекращении его поддержки. В результате встроенные шаблоны ASP.NET Core медленно редактируются, чтобы отойти от него.
К сожалению, нет четкого пути вперед. Это происходит главным образом из-за того, что веб-приложения постоянно перемещаются в сторону клиента, что требует сложных систем сборки на стороне клиента и множества зависимостей. Так что, если вы собираете что-то подобное, вы, возможно, уже знаете, как решить эту проблему, и вы можете расширить существующий процесс сборки, просто добавив туда Bootstrap и jQuery.
Но есть все еще много веб-приложений, которые не настолько тяжелы на стороне клиента, где приложение все еще работает в основном на сервере, и в результате сервер обслуживает статические представления. Бауэр ранее заполнил это, упрощая публикацию зависимостей на стороне клиента без особого труда.
В мире .NET у нас также есть NuGet, а с предыдущими версиями ASP.NET мы могли бы также использовать NuGet для добавления зависимостей к некоторым зависимостям на стороне клиента, поскольку NuGet просто поместит контент в наш проект правильно. К сожалению, с новым форматом .csproj и новым NuGet установленные пакеты находятся вне нашего проекта, поэтому мы не можем просто ссылаться на них.
Это оставляет нам несколько вариантов, как добавить наши зависимости:
Единовременная установка
Это то, что в настоящее время делают шаблоны ASP.NET Core, которые не являются одностраничными приложениями. Когда вы используете их для создания нового приложения, папка wwwroot просто содержит папку lib которая содержит зависимости:
Если вы внимательно посмотрите на файлы в настоящее время, то увидите, что они изначально были размещены там с Bower для создания шаблона, но это, скорее всего, скоро изменится. Основная идея заключается в том, что файлы копируются один раз в папку wwwroot поэтому вы можете зависеть от них.
Для этого мы можем просто следовать введению Bootstraps и напрямую загружать скомпилированные файлы. Как упомянуто на сайте загрузки, это не включает 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 или Yarn; в моем примере я буду использовать 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 файлы оттуда в нашу папку wwwroot. Есть несколько вариантов сделать это:
bundleconfig.json для объединения и минификации
Мы можем использовать один из различных способов использования bundleconfig.json для объединения и минимизации, как описано в документации. Очень простой способ - просто использовать пакет BuildBundlerMinifier NuGet, который автоматически устанавливает для этого задачу сборки.
После установки этого пакета нам нужно создать в bundleconfig.json проекта 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>
Теперь, когда мы собираем, запускается задание Gulp по default, которое запускает задачи build-vendor, которые затем vendor.min.css наши vendor.min.css и vendor.min.js как мы это делали ранее. Поэтому после настройки нашего _Layout.cshtml как и выше, мы можем использовать jQuery и Bootstrap.
Хотя первоначальная настройка Gulp немного сложнее, чем bundleconfig.json выше bundleconfig.json, мы теперь вошли в мир Node и можем начать использовать все другие классные инструменты. Так что стоит начать с этого.
Заключение
Хотя это внезапно стало намного сложнее, чем при использовании Bower, мы также получили большой контроль над этими новыми опциями. Например, теперь мы можем решить, какие файлы на самом деле включены в папку wwwroot и как они выглядят. И мы также можем использовать это, чтобы сделать первые шаги в мир разработки на стороне клиента с Node, который, по крайней мере, должен немного помочь с кривой обучения.
