Многие приложения построены на классическом стеке ASP.NET, в котором используется встроенный сборщик ASP.NET. В этой статье я покажу вам, как использовать libman для управления пакетами на стороне клиента.
Начните с нового веб-приложения ASP.NET 4.7, используя шаблон MVC. Затем Visual Studio настроит ваш проект и создаст структуру папок по умолчанию. Затем я очистил некоторые файлы и папки для ясности и упрощения, а затем добавил файл libman.json для управления клиентскими пакетами. После того, как все настроено и очищено, структура папок вашего проекта должна напоминать мою, как показано на рисунке 1.1. В этой демонстрации файлы, с которыми мы будем работать, — это файл libman.json, файл BundleConfig.cs и файл _Layout.cshtml.
Откройте файл libman.json и добавьте в проект некоторые клиентские зависимости. В моем примере я добавлю jquery и bootstrap. Выберите папку для размещения этих зависимостей, чтобы сборщик мог легко управлять ими. В моем приложении я решил позволить LibMan создать папку «Клиент» в корневом каталоге моего проекта и вставить каждую зависимость в свою собственную папку. После восстановления клиентских библиотек структура папок должна напоминать структуру папок, показанную на рисунке 1.3.
LibMan теперь управляет нашими зависимостями на стороне клиента. Теперь нам нужно настроить связывание, чтобы мы могли использовать наши клиентские библиотеки в нашем веб-приложении. Откройте файл BundleConfig.cs и сообщите нашему приложению, какие клиентские пакеты мы хотели бы объединить. Удалите любой код по умолчанию, который находится в методе RegisterBundles. Затем вам понадобятся два пакета create 2: один для файлов javascript и один пакет для таблиц стилей. См. рисунок 1.5. Обратите внимание: я добавил директивы препроцессора, чтобы клиентский код, который мне может понадобиться для отладки, не был связан с клиентом. Теперь мы можем открыть наш файл ~/Views/Shared/_Layout.cshtml и добавить наши пакеты в наше приложение.
Чтобы все проверить, откройте файл ~/Views/Home/Index.cshtml, установите макет для использования файла ~/Views/Shared/_Layout.cshtml и добавьте определенный HTML-код для начальной загрузки. Давайте запустим наше приложение и все проверим.
Похоже, наши клиентские скрипты и стили загружены. вы можете убедиться в этом, открыв инструменты разработчика в своем браузере и увидев файлы, включенные на вашей странице. См. рисунок 1.8.
