Я хочу обновить Bootstrap в ядре ASP.NET с помощью NuGet. Я использовал это:
Install-Package bootstrap -Version 4.0.0
Он добавил зависимости, но как добавить его в мой проект сейчас? Каков путь для локальных зависимостей NuGet?
Я хочу обновить Bootstrap в ядре ASP.NET с помощью NuGet. Я использовал это:
Install-Package bootstrap -Version 4.0.0
Он добавил зависимости, но как добавить его в мой проект сейчас? Каков путь для локальных зависимостей NuGet?
Как уже упоминалось, менеджер пакетов 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 или 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>
Если мы хотим продвинуться немного дальше в разработке на стороне клиента, мы также можем начать использовать инструменты, которые мы использовали бы там. Например, 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, который, по крайней мере, должен немного помочь с кривой обучения.
Если посмотреть на это, кажется, что подход LibMan лучше всего подходит для моих нужд с добавлением Bootstrap. Мне это нравится, потому что он теперь встроен в Visual Studio 2017 (15.8 или более позднюю версию) и имеет свои собственные диалоговые окна.
Метод по умолчанию, который VS добавляет в проекты, использует Bower, но похоже, что он находится на выходе. В заголовке страницы беседы Microsoft пишут:
Следующие две ссылки ведут к использованию LibMan с ASP.NET Core в Visual Studio, где показано, как можно добавлять библиотеки с помощью встроенного диалога:
В обозревателе решений щелкните правой кнопкой мыши папку проекта, в которую следует добавить файлы. Выберите "Добавить"> "Клиентская библиотека". Откроется диалоговое окно "Добавить библиотеку на стороне клиента": [источник: Скотт Адди 2018 ]
Затем для начальной загрузки просто (1) выберите unpkg, (2) введите "bootstrap @.." (3) Install. После этого вы просто захотите проверить правильность всех включений в _Layout.cshtml или других местах. Это должно быть что-то вроде href= "~/lib/bootstrap/dist/js/bootstrap...")
Попробуйте Libman, это так же просто, как Bower, и вы можете указать wwwroot/lib/в качестве папки для загрузки.
К сожалению, вам будет сложно использовать NuGet для установки Bootstrap (или большинства других фреймворков JavaScript/CSS) в проекте.NET Core. Если вы посмотрите на установку NuGet, она сообщит вам, что она несовместима:
если вы должны знать, где находятся локальные пакеты, они теперь находятся в вашем локальном каталоге профиля. т.е. %userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts
.
Тем не менее, я предлагаю переключиться на npm, или bower - как в ответе Saineshwar.
Мы используем bootstrap 4 в ядре asp.net, но ссылаемся на библиотеки с "npm" с помощью расширения "Installer Package" и обнаруживаем, что это лучше, чем Nuget для Javascript/CSS-библиотек.
Затем мы используем расширение "Bundler & Minifier" для копирования соответствующих файлов для распространения (из папки npm node_modules, которая находится за пределами проекта) в wwwroot, как нам нравится для разработки/развертывания.
Сейчас кажется, что Microsoft предпочитает Libman. Он интегрирован в Visual Studio 2017 (15.8).
В этой статье описывается, как его использовать и даже как настроить восстановление, выполняемое процессом сборки.
Документация по Bootstrap сообщает, какие файлы вам нужны в вашем проекте.
Следующий пример должен работать как конфигурация для libman.json.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "[email protected]",
"destination": "wwwroot/lib/bootstrap",
"files": [
"js/bootstrap.bundle.js",
"css/bootstrap.min.css"
]
},
{
"library": "[email protected]",
"destination": "wwwroot/lib/jquery",
"files": [
"jquery.min.js"
]
}
]
}
BS4 теперь доступен на .NET Core 2.2. На установщик SDK 2.2.105 x64 точно. Я использую Visual Studio 2017 с ним. Пока все хорошо для новых проектов веб-приложений.
Что делает трюк для меня:
1) Щелкните правой кнопкой мыши на wwwroot> Добавить> Клиентская библиотека
2) Набрать "bootstrap" в поле поиска
3) Выберите "Выбрать конкретные файлы"
4) Прокрутите вниз и выберите папку. В моем случае я выбрал "twitter-bootstrap"
5) Проверьте "css" и "js"
6) Нажмите "Установить".
Через несколько секунд у меня есть все они в папке wwwroot. Сделайте то же самое для всех клиентских пакетов, которые вы хотите добавить.
Вы также должны знать, что после обновления до Bootstrap 4 ваша панель навигации и карусель будут выглядеть странно. Вам необходимо обновить классы и элементы панели навигации в _Layout.cshtml в соответствии с новым способом Bootstrap 4.
Используйте файл конфигурации nmp (добавьте его в свой веб-проект), затем добавьте необходимые пакеты так же, как мы использовали bower.json и сохранили. Visual studio загрузит и установит его. Вы найдете пакет под узлом nmp вашего проекта.
Почему бы просто не использовать CDN? Если вам не нужно редактировать код BS, вам просто нужно ссылаться на коды в CDN.
Смотрите BS 4 CDN здесь:
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
Внизу страницы.
В этой статье вы получите пошаговое объяснение того, как добавить bootstrap 4 в основное приложение asp.net.
Ссылка статьи: - asp-net-core-with-bootstrap-4
Добавление бутстрапа
Добавление бутстрапа в макет