Использование LibMan с ASP.NET Core в Visual Studio
- Статья
Автор: Скотт Адди (Scott Addie)
В Visual Studio имеется встроенная поддержка LibMan в проектах ASP.NET Core, которая включает в себя:
- поддержку настройки и выполнения операций восстановления LibMan при сборке;
- пункты меню для запуска операций восстановления и очистки LibMan;
- диалоговое окно для поиска библиотек и добавления файлов в проект;
- поддержку редактирования
libman.json
— файла манифеста LibMan.
Просмотрите или скачайте пример кода (описание процедуры скачивания)
Предварительные требования
- Visual Studio 2019 с рабочей нагрузкой
Добавление файлов библиотеки
Файлы библиотек можно добавлять в проект ASP.NET Core двумя разными способами:
- Используйте диалоговое окно «Добавьте клиентские библиотеки».
- Настройте записи в файле манифеста LibMan вручную.
Использование диалогового окна «Добавьте клиентские библиотеки»
Чтобы установить клиентскую библиотеку, выполните указанные ниже действия.
В обозревателе решений щелкните правой кнопкой мыши папку проекта, в которую нужно добавить файлы. Выберите пункты Добавить>Клиентская библиотека. Появится диалоговое окно Добавьте клиентские библиотеки.
В раскрывающемся списке
Поставщик выберите поставщика библиотеки. CDNJS является поставщиком по умолчанию.В текстовом поле Библиотека введите имя библиотеки, которую нужно получить. IntelliSense предлагает список библиотек, имена которых начинаются с введенного текста.
Выберите библиотеку в списке IntelliSense. Обратите внимание, что после имени библиотеки стоит символ
@
и номер последней стабильной версии, известной выбранному поставщику.Решите, какие файлы следует включить.
- Установите переключатель в положение
- Установите переключатель в положение Выбрать определенные файлы, чтобы включить часть файлов библиотеки. После этого станет доступно дерево выбора файлов. Установите флажки слева от имен файлов, которые нужно скачать.
- Установите переключатель в положение
В текстовом поле Целевое расположение укажите папку проекта, в которой необходимо сохранить файлы. Каждую библиотеку рекомендуется хранить в отдельной папке.
Предлагаемое целевое расположение зависит от того, откуда было запущено диалоговое окно.
- При запуске из корневого каталога проекта:
- используется папка wwwroot/lib, если wwwroot существует;
- используется папка lib, если wwwroot не существует.
- При запуске из папки проекта используется соответствующее имя папки.
После папки указывается имя библиотеки. В приведенной ниже таблице показаны папки, предлагаемые при установке jQuery в проекте Razor Pages.
Место запуска Предлагаемая папка корневой каталог проекта (если wwwroot существует) корневой каталог проекта (если wwwroot не существует) lib/jquery/ Папка Pages проекта Pages/jquery/ - При запуске из корневого каталога проекта:
Нажмите кнопку Установить, чтобы скачать файлы в соответствии с конфигурацией в файле
libman.json
.Ознакомьтесь со сведениями об установке в канале Диспетчер библиотек окна Выходные данные. Пример:
Restore operation started... Restoring libraries for project LibManSample Restoring library jquery@3.
Настройка записей в файле манифеста LibMan вручную
Все операции LibMan в Visual Studio основаны на содержимом манифеста LibMan в корневом каталоге проекта (libman.json
). Вы можете вручную изменить файл libman.json
, чтобы настроить файлы библиотек для проекта. Visual Studio восстанавливает все файлы библиотек после сохранения файла libman.json
.
Открыть файл libman.json
для изменения можно указанными ниже способами.
- Дважды щелкните файл
libman.json
в обозревателе решений. - В обозревателе решений щелкните проект правой кнопкой мыши и выберите пункт Управление клиентскими библиотеками. †
- В меню Проект в Visual Studio выберите пункт Управление клиентскими библиотеками. †
† Если файла libman.json
еще нет в корневом каталоге проекта, он будет создан с содержимым по умолчанию.
В Visual Studio предлагаются широкие возможности для редактирования JSON, в том числе раскраска, форматирование, IntelliSense и проверка схемы. Схему манифеста LibMan в формате JSON можно найти на странице https://json.schemastore.org/libman.
При использовании приведенного ниже файла манифеста LibMan извлекает файлы в соответствии с конфигурацией, определенной в свойстве libraries
. Далее приводится описание объектных литералов, определенных в libraries
.
- От поставщика CDNJS принимается подмножество файлов jQuery версии 3.3.1. Это подмножество определено в свойстве
files
—jquery.min.js
,jquery.js
и jquery. - Все файлы Bootstrap версии 4.1.3 получаются и помещаются в папку wwwroot/lib/bootstrap. Свойство
provider
объектного литерала переопределяет значение свойстваdefaultProvider
. LibMan получает файлы Bootstrap от поставщика unpkg. - Подмножество файлов Lodash утверждается руководством организации. Файлы
lodash.js
иlodash.min.js
получаются из папки C:\temp\lodash\ локальной файловой системы. Они копируются в папку wwwroot/lib/lodash проекта.
{ "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "[email protected]", "files": [ "jquery.min.js", "jquery.js", "jquery.min.map" ], "destination": "wwwroot/lib/jquery/" }, { "provider": "unpkg", "library": "[email protected]", "destination": "wwwroot/lib/bootstrap/" }, { "provider": "filesystem", "library": "C:\\temp\\lodash\\", "files": [ "lodash. js", "lodash.min.js" ], "destination": "wwwroot/lib/lodash/" } ] }
Примечание
LibMan поддерживает только одну версию каждой библиотеки от каждого поставщика. Файл
не пройдет проверку схемы, если он содержит две библиотеки с одним и тем же именем для данного поставщика.
Восстановление файлов библиотек
Для восстановления файлов библиотек из Visual Studio в корневом каталоге проекта должен быть правильный файл libman.json
. Восстановленные файлы помещаются в проект в расположение, указанное для каждой библиотеки.
Файлы библиотек можно восстановить в проекте ASP.NET Core двумя способами:
- Восстановление файлов во время сборки
- Восстановление файлов вручную
Восстановление файлов во время сборки
LibMan может восстанавливать определенные файлы библиотек в процессе сборки. По умолчанию
Чтобы включить и протестировать восстановление при сборке, выполните указанные ниже действия.
В обозревателе решений щелкните файл
libman.json
правой кнопкой мыши и выберите в контекстном меню пункт Включить восстановление клиентских библиотек при сборке.При появлении запроса на установку пакета NuGet нажмите кнопку Да. Пакет NuGet Microsoft.Web.LibraryManager.Build добавится в проект:
<PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="1.0.113" />
Выполните сборку проекта, чтобы убедиться в том, что диспетчер LibMan восстановил файлы. Пакет
Microsoft.Web.LibraryManager.Build
внедряет целевой объект MSBuild, который запускает LibMan во время операции сборки проекта.В канале Сборка окна Выходные данные просмотрите журнал действий LibMan:
1>------ Build started: Project: LibManSample, Configuration: Debug Any CPU ------ 1> 1>Restore operation started. .. 1>Restoring library [email protected]... 1>Restoring library [email protected]... 1> 1>2 libraries restored in 10.66 seconds 1>LibManSample -> C:\LibManSample\bin\Debug\netcoreapp2.1\LibManSample.dll ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
После включения восстановления при сборке в контекстном меню файла libman.json
появляется пункт Отключить восстановление клиентских библиотек при сборке. При его выборе ссылка на пакет Microsoft.Web.LibraryManager.Build
удаляется из файла проекта. В результате клиентские библиотеки больше не будут восстанавливаться при каждой сборке.
Независимо от того, включено ли восстановление при сборке, вы можете в любой момент выполнить восстановление вручную из контекстного меню файла libman.json
. Дополнительные сведения см. в разделе Восстановление файлов вручную.
Восстановление файлов вручную
Чтобы вручную восстановить файлы библиотек, выполните указанные ниже действия.
- Для всех проектов в решении:
- В обозревателе решений щелкните правой кнопкой мыши имя решения.
- Выберите пункт Восстановить клиентские библиотеки.
- Для определенного проекта:
- В обозревателе решений щелкните правой кнопкой мыши файл
libman.json
. - Выберите пункт Восстановить клиентские библиотеки.
- В обозревателе решений щелкните правой кнопкой мыши файл
Во время операции восстановления происходит следующее:
В строке состояния Visual Studio будет анимироваться значок Центра состояния задач (TSC) с сообщением Операция восстановления начата. Если щелкнуть значок, откроется подсказка со списком известных фоновых задач.
В строку состояния и канал Диспетчер библиотек окна Выходные данные будут передаваться сообщения. Пример:
Restore operation started... Restoring libraries for project LibManSample Restoring library jquery@3. 3.1... (LibManSample) wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample) wwwroot/lib/jquery/jquery.js written to destination (LibManSample) wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample) Restore operation completed 1 libraries restored in 2.32 seconds
Удаление файлов библиотек
Чтобы произвести операцию очистки, которая удаляет файлы библиотек, восстановленные ранее в Visual Studio, выполните указанные ниже действия.
- В обозревателе решений щелкните правой кнопкой мыши файл
libman.json
. - Выберите пункт Очистить клиентские библиотеки.
Во избежание непреднамеренного удаления файлов, не относящихся к библиотекам, операция очистки не удаляет каталоги полностью. Она удаляет только те файлы, которые были включены в предыдущую операцию восстановления.
Во время операции очистки происходит следующее:
- В строке состояния Visual Studio будет анимироваться значок Центра состояния задач с сообщением Начата операция с клиентскими библиотеками. Если щелкнуть значок, откроется подсказка со списком известных фоновых задач.
- В строку состояния и канал Диспетчер библиотек окна Выходные данные передаются сообщения. Пример:
Clean libraries operation started... Clean libraries operation completed 2 libraries were successfully deleted in 1.91 secs
Операция очистки удаляет файлы только из проекта. При этом файлы библиотек остаются в кэше для более быстрого извлечения при последующих операциях восстановления. Для управления файлами библиотек, хранящимися в кэше локального компьютера, используйте интерфейс командной строки LibMan.
Удаление файлов библиотек
Чтобы удалить файлы библиотек, выполните указанные ниже действия.
Откройте
libman.json
.Поместите курсор внутри соответствующего объектного литерала
libraries
.Щелкните значок лампочки, появившийся в левом поле, а затем выберите пункт Удалить <имя_библиотеки>@<версия_библиотеки>.
Кроме того, вы можете вручную изменить и сохранить манифест LibMan (libman.json
). Операция восстановления выполняется при сохранении файла. Файлы библиотеки, которые больше не определены в файле libman.json
, удаляются из проекта.
Обновление версии библиотеки
Чтобы проверить наличие новой версии библиотеки, выполните указанные ниже действия.
- Откройте
libman.json
. - Поместите курсор внутри соответствующего объектного литерала
libraries
. - Щелкните значок лампочки, появившийся в левом поле. Наведите указатель на пункт Проверить обновления.
LibMan проверит наличие версии библиотеки, более поздней, чем установленная. Возможен один из следующих результатов:
Если установлена последняя версия, появится сообщение Обновления не найдены.
Будет показана последняя стабильная версия, если она еще не установлена.
Если имеется предварительный выпуск, более поздний, чем установленная версия, он будет показан.
Чтобы перейти на более старую версию библиотеки, вручную измените файл libman.json
. При сохранении этого файла операция восстановления LibMan выполняет следующие действия:
- удаляет лишние файлы из предыдущей версии;
- добавляет новые и обновленные файлы из новой версии.
Дополнительные ресурсы
- Использование интерфейса командной строки LibMan с ASP.NET Core
- Репозиторий LibMan на GitHub
jQuery Mobile — Настройка — CoderLessons.com
В этой главе мы обсудим, как установить и настроить jQuery Mobile.
Скачать jQuery Mobile
Когда вы откроете ссылку jquerymobile.com/ , вы увидите, что есть две возможности скачать мобильную библиотеку jQuery.
Custom Download – Нажмите эту кнопку, чтобы загрузить настроенную версию библиотеки.
Последняя стабильная версия – нажмите эту кнопку, чтобы получить стабильную и последнюю версию мобильной библиотеки jQuery.
Custom Download – Нажмите эту кнопку, чтобы загрузить настроенную версию библиотеки.
Последняя стабильная версия – нажмите эту кнопку, чтобы получить стабильную и последнюю версию мобильной библиотеки jQuery.
Пользовательская загрузка с Download Builder
Используя Download Builder, вы можете создать собственную сборку, включающую только те части библиотеки, которые вам нужны. Когда вы загрузите новую настроенную версию jQuery Mobile, вы увидите следующий экран.
Вы можете выбрать библиотеки в соответствии с вашими потребностями и нажать кнопку « Создать мою загрузку».
Стабильная загрузка
Нажмите кнопку « Стабильный» , которая приведет непосредственно к ZIP-файлу, содержащему файлы CSS и JQuery, для последней версии мобильной библиотеки jQuery. Извлеките содержимое файла ZIP в мобильный каталог jQuery.
Эта версия содержит все файлы, включая все зависимости, большую коллекцию демонстраций и даже набор модульных тестов библиотеки. Эта версия полезна для начала работы.
Скачать библиотеку jQuery с CDN
CDN (Content Delivery Network) – это сеть серверов, предназначенная для обслуживания файлов пользователям. Если вы используете ссылку CDN на своей веб-странице, она переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию jQuery mobile с того же CDN, ее не нужно будет повторно загружать. Вы можете включить следующие файлы CDN в документ HTML.
//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme) <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> //The jQuery core JavaScript file <script src = "https://code. jquery.com/jquery-1.11.3.min.js"></script> //The jQuery Mobile core JavaScript file <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
В этом руководстве мы используем версии библиотеки CDN. Мы используем AMPPS (AMPPS – это стек WAMP, MAMP и LAMP сервера Apache, MySQL, MongoDB, PHP, Perl & Python) для выполнения всех наших примеров.
В этом руководстве мы используем версии библиотеки CDN. Мы используем AMPPS (AMPPS – это стек WAMP, MAMP и LAMP сервера Apache, MySQL, MongoDB, PHP, Perl & Python) для выполнения всех наших примеров.
пример
Ниже приведен простой пример jQuery Mobile.
Live Demo
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code. jquery.com/jquery-1.11.3.min.js"></script> <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role = "page" id = "pageone"> <div data-role = "header"> <h2>Header Text</h2> </div> <div data-role = "main" class = "ui-content"> <h3>Welcome to TutorialsPoint</h3> </div> <div data-role = "footer"> <h2>Footer Text</h2> </div> </div> </body> </html>
Подробности приведенного выше кода –
Этот код указан внутри элемента head.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
Окно просмотра используется для указания (браузером) отображения уровня и размера масштабирования страницы.
content = “width = device-width” используется для установки ширины в пикселях страницы или экранного устройства.
initial-scale = 1 устанавливает начальный уровень масштабирования, когда страница загружается в первый раз.
Включить следующие CDN
Окно просмотра используется для указания (браузером) отображения уровня и размера масштабирования страницы.
content = “width = device-width” используется для установки ширины в пикселях страницы или экранного устройства.
initial-scale = 1 устанавливает начальный уровень масштабирования, когда страница загружается в первый раз.
Включить следующие CDN
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Содержимое внутри тега <body> – это страница, отображаемая в браузере.
<div data-role = "page"> . .. </div>
data-role = “header” создает верхний колонтитул в верхней части страницы.
data-role = “main” используется для определения содержимого страницы.
data-role = “footer” создает нижний колонтитул внизу страницы.
class = “ui-content” включает отступы и поля внутри содержимого страницы.
data-role = “header” создает верхний колонтитул в верхней части страницы.
data-role = “main” используется для определения содержимого страницы.
data-role = “footer” создает нижний колонтитул внизу страницы.
class = “ui-content” включает отступы и поля внутри содержимого страницы.
Выход
Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код –
Сохраните приведенный выше HTML-код как файл simple_example.html в корневой папке вашего сервера.
Откройте этот HTML-файл как http: //localhost/simple_example. html, и будет показан следующий вывод.
Последняя версия jQuery в CDN Google
ОБНОВЛЕНИЕ 03.07.2014: На данный момент jquery-latest.js
больше не обновляется.
Из блога jQuery:
Мы знаем, что http://code.jquery.com/jquery-latest.js используется не по назначению. из-за статистики CDN показывает, что это самый популярный файл. Это было бы не так, если бы использовался только разработчиками для создания локальной копии.
Мы решили остановиться обновление этого файла, а также уменьшенной копии с сохранением обоих файлов в версии 1.11.1 навсегда.
Команда Google CDN присоединилась к нам, чтобы предотвратить непреднамеренный разрыв сети и больше не обновляет файл в http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js. Этот файл останется заблокированным и в версии 1.11.1.
Следующий, ныне спорный ответ сохранен здесь по историческим причинам.
Не делай этого. Серьезно, не надо.
Связывание с основными версиями jQuery работает, но это плохая идея — с каждым десятичным обновлением добавляются и устаревают целые новые функции. Если вы обновляете jQuery автоматически, не тестируя свой код ПОЛНОСТЬЮ , вы рискуете получить неожиданный сюрприз, если изменится API для какого-то критического метода.
Вот что вам следует сделать: написать свой код, используя последнюю версию jQuery. Протестируйте его, отладьте, опубликуйте, когда он будет готов к работе.
Затем, когда выйдет новая версия jQuery, спросите себя: Нужна ли мне эта новая версия в моем коде? Например, существует ли какая-то важная совместимость с браузерами, которой раньше не было, или это ускорит мой код в большинстве браузеров?
Если ответ «нет», не утруждайте себя обновлением кода до последней версии jQuery. Это может даже добавить НОВЫЕ ошибки в ваш код, которых раньше не было. Ни один ответственный разработчик не стал бы автоматически включать новый код с другого сайта, не проверив его тщательно.
Просто нет веской причины ВСЕГДА использовать последнюю версию jQuery. Старые версии все еще доступны на CDN, и если они работают для ваших целей, то зачем их заменять?
Второстепенной, но, возможно, более важной проблемой является кэширование. Многие люди ссылаются на jQuery в CDN, потому что это делают многие другие сайты, и у ваших пользователей есть хорошие шансы получить эту версию уже в кэше.
Проблема в том, что кэширование работает, только если вы указываете полный номер версии. Если вы укажете неполный номер версии, кэширования в далеком будущем не произойдет, потому что, если бы это было так, некоторые пользователи получили бы разные младшие версии jQuery с одного и того же URL-адреса. (Скажем, ссылка на 1.7 указывает на 1.7.1 в один день и на 1.7.2 на следующий день. Как браузер удостоверится, что он получает последнюю версию сегодня? Ответ: без кэширования.)
На самом деле вот разбивка нескольких опционов и сроков их действия. настройки…
http://code.jquery.com/jquery-latest.min.js (без кеша)
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js (1 час)
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js (1 час)
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js (1 год)
Таким образом, связываясь с jQuery, вы на самом деле устраняет одну из основных причин использования CDN.
http://code.jquery.com/jquery-latest.min.js также не всегда может дать вам ожидаемую версию. На момент написания этой статьи он ссылается на последнюю версию jQuery 1.x, хотя jQuery 2.x также была выпущена. Это связано с тем, что jQuery 1.x совместим со старыми браузерами, включая IE 6/7/8, а jQuery 2.x — нет. Если вам нужна последняя версия jQuery 2.x, то (на данный момент) вам нужно указать это явно.
Две версии имеют одинаковый API, поэтому для совместимых браузеров разницы в восприятии нет. Однако jQuery 1.x загружается больше, чем 2.x.
javascript — Ссылка на последнюю версию jQuery
спросил
Изменено 9 лет, 2 месяца назад
Просмотрено 2к раз
Я ожидаю, что эти две ссылки будут указывать на последнюю версию jQuery, версию 1.11.0.
- http://code.jquery.com/jquery-latest.min.js
- http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
Ссылка code.jquery.com указывает на 1.10.2, а ссылка Google указывает на 1.9.1.
Может ли кто-нибудь объяснить, почему, или указать что-то, что я могу делать неправильно? Я пытался очистить кеш браузера и даже пробовал ссылки на других машинах.
- javascript
- jquery
- cdn
- google-cdn
Используйте это для последней версии от Google (, хотя я лично не рекомендую вам использовать последнюю версию ):