Управление клиентскими пакетами с помощью Bower¶
Bower - это “менеджер пакетов для веб приложений.” Bower позволяет вам устанавливать и восстанавливать клиентские пакеты, включая библиотеки JavaScript и CSS. Например, с помощью Bower вы можете устанавливать CSS файлы, шрифты, клиентские фреймворки и JavaScript библиотеки из внешних ресурсов. Bower разрешает зависимости и автоматически скачивает и устанавливает нужные вам пакеты. Например, если вы настраиваете Bower для загрузки пакета Bootstrap, автоматически скачивается и необходимый пакет jQuery. Для .NET библиотек вам будет нужен NuGet Package Manager.
Примечание
Разработчики, работающие с Visual Studio, уже знакомы с NuGet, так почему не использовать NuGet вместо Bower? В основном, потому что в Bower уже есть больше 34.000 пакетов, а также он хорошо интегрируется с Gulp и Grunt.
Начинаем работать с Bower¶
Шаблоны проекта ASP.NET Core настраивают для вас начальный процесс сборки на клиентской стороне. Устанавливаются часто встречающиеся пакеты jQuery и Bootstrap, а также здесь есть место для NPM, Gulp и Bower. Далее в Solution Explorer показан начальный проект. Важно включить опцию “Show All Files”, поскольку файл bower.json по умолчанию скрыт.

Клиентские пакеты представлены в файле bower.json. Шаблоны проекта ASP.NET Core изначально настраивают bower.json с помощью jQuery, jQuery validation и Bootstrap.
Давайте добавим поддержку для фото альбомов, установив jQuery плагин Fotorama. Пакеты Bower могут быть установлены либо через Manage Bower Packages UI или вручную в файле bower.json.
Установка через Manage Bower Packages UI¶
Кликните правой клавишей мышки по имени проекта в Solution Explorer и выберите опцию “Manage Bower Packages”.
В появившемся окне нажмите на вкладку “Browse” и отфильтруйте пакеты, прописав “fotorama” в окне поиска:
Поставьте галочку на “Save changes to bower.json”, выберите нужную версию из выпадающего списка и нажмите кнопку Install.
Затем вы увидите сообщение Installing “fotorama” complete.
Установка вручную¶
В конце раздела
dependencies
в bower.json добавьте запятую и пропишите “fotorama”. Когда вы набираете это, появляется IntelliSense со списком доступных пакетов. Выберите из списка “fotorama”.Добавьте двоеточие, а затем выберите из выпадающего меню последнюю стабильную версию пакета. Двойные кавычки добавятся автоматически.
Сохраните файл bower.json.
Примечание
Visual Studio смотрит, есть ли в bower.json изменения. При сохранении выполняется команда bower install. В “Bower/npm” вы можете увидеть, какая конкретно команда была выполнена.
После установки откройте дерево в левой части bower.json и найдите файл .bowerrc. Откройте его, и вы увидите, что свойство directory
установлено на “wwwroot/lib”. Так показывается местоположение, куда Bower будет устанавливать пакеты.
{ "directory": "wwwroot/lib" }
В Solution Explorer раскройте wwwroot. Директория lib теперь должна содержать все пакеты, включая fotorama.
Далее, давайте добавим в проект HTML страницу. В Solution Explorer кликните правой клавишей мышки по wwwroot и выберите Add > New Item > HTML Page. Назовите страницу Index.html. Замените контекст этого файла следующим:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bower and Fotorama</title>
<link href="lib/fotorama/fotorama.css" rel="stylesheet" />
</head>
<body>
<div class="fotorama" data-nav="thumbs">
<img src="images/asp-net-banners-01.png" />
<img src="images/asp-net-banners-02.png" />
<img src="images/banner-01-azure.png" />
<img src="images/banner-02-vs.png" />
</div>
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/fotorama/fotorama.js"></script>
</body>
</html>
В этом примере используются изображения, доступные на данный момент в wwwroot/images, но вы можете добавить и другие изображения.
Нажмите Ctrl+Shift+W
, чтобы страница отобразилась в браузере. Здесь представлены изображения, и вы можете перемещаться по ним. Этот небольшой тест показывает, что Bower установил корректные пакеты и зависимости.

Изучение клиентского процесса сборки¶
Большинство шаблонов ASP.NET Core уже настроены так, чтобы использовать Bower. Мы начинаем работу с пустым проектом ASP.NET Core и добавляем вручную каждый нужный кусок, так что вы поймете, как Bower используется в проекте. Вы увидите, что случится со структурой проекта и рантаймом при каждом внесенном в конфигурацию изменении, сделанном в проект.
Общие шаги процесса клиентской сборки с помощью Bower:
- Определить или скачать пакеты, используемые в проекте.
- Сделать ссылки на пакеты из веб страниц.
Определение пакетов¶
Сперва нужно определить пакеты, которые нужны вашему приложению, и скачать их. В этом примере Bower используется для загрузки в необходимое место jQuery и Bootstrap.
В Visual Studio создайте новое ASP.NET веб приложение.
В диалоговом окне New ASP.NET Project выберите шаблон ASP.NET Core Empty и нажмите OK.
В Solution Explorer директория src включает в себя файл project.json, а также узлы wwwroot и Dependencies. Директория проекта выглядит вот так.
В Solution Explorer кликните правой клавишей мышки по проекту и добавьте следующее:
- Bower Configuration File – bower.json
Примечание
Шаблон Bower Configuration File также добавляет файл .bowerrc.
Откройте bower.json и добавьте jquery и bootstrap в раздел
dependencies
. Как вариант, вы можете использовать для этого “Manage Bower Packages” UI. Результирующий файл bower.json выглядит так. Со временем версии изменятся, так что используйте последнюю стабильную версию из выпадающего меню.{ "name": "ASP.NET", "private": true, "dependencies": { "jquery": "2.1.4", "bootstrap": "3.3.5" } }
Сохраните файл bower.json.
Теперь проект включает в себя директории bootstrap и jQuery в двух локациях: Dependencies/Bower и wwwroot/lib. Файл .bowerrc говорит Bower установить активы внутри wwwroot/lib.

Ссылочные пакеты¶
После того как Bower скопировал пакеты, необходимые приложению, вы можете проверить, что HTML использует развернутый функционал jQuery и Bootstrap.
- Кликните правой клавишей мышки по wwwroot и выберите Add > New Item > HTML Page. Назовите страницу Index.html.
- Добавьте CSS и JavaScript ссылки.
- В Solution Explorer откройте wwwroot/lib/bootstrap и найдите bootstrap.css. Переместите этот файл в элемент
head
HTML страницы. - Переместите jquery.js и bootstrap.js в конец элемента
body
.
- В Solution Explorer откройте wwwroot/lib/bootstrap и найдите bootstrap.css. Переместите этот файл в элемент
Убедитесь, что bootstrap.js следует за jquery.js, таким образом jQuery загружается первым.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bower Example</title>
<link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Использование установленных пакетов¶
Добавьте на страницу компоненты jQuery и Bootstrap, чтобы проверить, что веб приложение настроено правильно.
Внутри тэга
body
над ссылкамиscript
добавьте элементdiv
с Bootstrap классом jumbotron и якорным тэгом.<div class="jumbotron"> <h1>Using the jumbotron style</h1> <p><a class="btn btn-primary btn-lg" role="button"> Stateful button</a></p> </div>
Добавьте следующий код после jQuery и Bootstrap ссылок
script
.<script> $(".btn").click(function() { $(this).text('loading') .delay(1000) .queue(function () { $(this).text('reset'); $(this).dequeue(); }); }); </script>
Внутри метода
Configure
файла Startup.cs добавьте вызов к методу расширенияUseStaticFiles
. Это связующее ПО добавляет файлы, найденные внутри корневой директории проекта, к потоку запросов. Эта строка кода выглядит вот так:app.UseStaticFiles();
Примечание
У вас должен быть установлен NuGet пакет
Microsoft.AspNet.StaticFiles
. Без него метод расширенияUseStaticFiles
не будет работать.Когда файл Index.html открыт, нажмите
Ctrl+Shift+W
, чтобы просмотреть страницу в браузере. Применяется стиль jumbotron, код jQuery отвечает на нажатие кнопки, а кнопка Bootstrap меняет состояние.