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