Управление клиентскими пакетами с помощью Bower

Noel Rice, Scott Addie

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 по умолчанию скрыт.

../_images/mvc-project.png

Клиентские пакеты представлены в файле bower.json. Шаблоны проекта ASP.NET Core изначально настраивают bower.json с помощью jQuery, jQuery validation и Bootstrap.

Давайте добавим поддержку для фото альбомов, установив jQuery плагин Fotorama. Пакеты Bower могут быть установлены либо через Manage Bower Packages UI или вручную в файле bower.json.

Установка через Manage Bower Packages UI

  1. Кликните правой клавишей мышки по имени проекта в Solution Explorer и выберите опцию “Manage Bower Packages”.

  2. В появившемся окне нажмите на вкладку “Browse” и отфильтруйте пакеты, прописав “fotorama” в окне поиска:

    ../_images/manage-bower-packages.png

  3. Поставьте галочку на “Save changes to bower.json”, выберите нужную версию из выпадающего списка и нажмите кнопку Install.

  4. Затем вы увидите сообщение Installing “fotorama” complete.

Установка вручную

  1. В конце раздела dependencies в bower.json добавьте запятую и пропишите “fotorama”. Когда вы набираете это, появляется IntelliSense со списком доступных пакетов. Выберите из списка “fotorama”.

    ../_images/add-package.png

  2. Добавьте двоеточие, а затем выберите из выпадающего меню последнюю стабильную версию пакета. Двойные кавычки добавятся автоматически.

    ../_images/version-intellisense.png

  3. Сохраните файл 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.

../_images/package-lib.png

Далее, давайте добавим в проект 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 установил корректные пакеты и зависимости.

../_images/photo-gallery.png

Изучение клиентского процесса сборки

Большинство шаблонов ASP.NET Core уже настроены так, чтобы использовать Bower. Мы начинаем работу с пустым проектом ASP.NET Core и добавляем вручную каждый нужный кусок, так что вы поймете, как Bower используется в проекте. Вы увидите, что случится со структурой проекта и рантаймом при каждом внесенном в конфигурацию изменении, сделанном в проект.

Общие шаги процесса клиентской сборки с помощью Bower:

  • Определить или скачать пакеты, используемые в проекте.
  • Сделать ссылки на пакеты из веб страниц.

Определение пакетов

Сперва нужно определить пакеты, которые нужны вашему приложению, и скачать их. В этом примере Bower используется для загрузки в необходимое место jQuery и Bootstrap.

  1. В Visual Studio создайте новое ASP.NET веб приложение.

  2. В диалоговом окне New ASP.NET Project выберите шаблон ASP.NET Core Empty и нажмите OK.

  3. В Solution Explorer директория src включает в себя файл project.json, а также узлы wwwroot и Dependencies. Директория проекта выглядит вот так.

    ../_images/empty-project.png

  4. В Solution Explorer кликните правой клавишей мышки по проекту и добавьте следующее:

    • Bower Configuration File – bower.json

    Примечание

    Шаблон Bower Configuration File также добавляет файл .bowerrc.

  5. Откройте 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"
        }
}

  6. Сохраните файл bower.json.

Теперь проект включает в себя директории bootstrap и jQuery в двух локациях: Dependencies/Bower и wwwroot/lib. Файл .bowerrc говорит Bower установить активы внутри wwwroot/lib.

../_images/bower-dependencies.png

Ссылочные пакеты

После того как Bower скопировал пакеты, необходимые приложению, вы можете проверить, что HTML использует развернутый функционал jQuery и Bootstrap.

  1. Кликните правой клавишей мышки по wwwroot и выберите Add > New Item > HTML Page. Назовите страницу Index.html.
  2. Добавьте CSS и JavaScript ссылки.
    • В Solution Explorer откройте wwwroot/lib/bootstrap и найдите bootstrap.css. Переместите этот файл в элемент head HTML страницы.
    • Переместите jquery.js и bootstrap.js в конец элемента body.

Убедитесь, что 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, чтобы проверить, что веб приложение настроено правильно.

  1. Внутри тэга 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>

  2. Добавьте следующий код после jQuery и Bootstrap ссылок script.

    <script>
        $(".btn").click(function() {
                $(this).text('loading')
                        .delay(1000)
                        .queue(function () {
                                $(this).text('reset');
                                $(this).dequeue();
                        });
        });
</script>

  3. Внутри метода Configure файла Startup.cs добавьте вызов к методу расширения UseStaticFiles. Это связующее ПО добавляет файлы, найденные внутри корневой директории проекта, к потоку запросов. Эта строка кода выглядит вот так:

    app.UseStaticFiles();

    Примечание

    У вас должен быть установлен NuGet пакет Microsoft.AspNet.StaticFiles. Без него метод расширения UseStaticFiles не будет работать.

  4. Когда файл Index.html открыт, нажмите Ctrl+Shift+W, чтобы просмотреть страницу в браузере. Применяется стиль jumbotron, код jQuery отвечает на нажатие кнопки, а кнопка Bootstrap меняет состояние.

    ../_images/jumbotron1.png
Поделись хорошей новостью с друзьями!
Следи за новостями!