Шаблоны проектов ASP.NET Core 2.2 по умолчанию включают четыре библиотеки JavaScript / CSS, включая Bootstrap, jQuery, jQuery Validation и jQuery Unobtrusive Validation. Они быстро устареют, и в какой-то момент вам нужно будет обновить их, как минимум, чтобы получить какие-либо исправления безопасности. Мы используем их для обновления через NuGet, но те времена остались позади.

Размещенные файлы - самый простой вариант

Безусловно, самый простой вариант - использовать их размещенные версии. Если вы посмотрите на _Layout.cshtml и _ValidationScriptsPartial.cshtml, вы найдете ссылки на размещенные версии включенных библиотек по умолчанию в тегах среды. Теги среды, перечисленные как include = "Development", используются во время разработки, а версии exclude = "Development" используются при развертывании вашего веб-сайта. Более подробную информацию о тегах окружения можно найти здесь.

Если вы всегда хотите использовать размещенные файлы, вы можете упростить этот код следующим образом:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
          crossorigin="anonymous"
          integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
</environment>

к этому:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
          crossorigin="anonymous"
          integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>

Обновление вашей библиотеки в будущем - это двухэтапный процесс:

  1. Измените номер версии.
  2. Обновите это ужасное значение целостности, скопировав новый href в поле поиска на srihash.org.

Если srihash ничего не возвращает, вероятно, ваш href плохой.

У этого подхода есть свои недостатки.

  1. Приходится искать новые версии библиотеки вручную.
  2. Вы можете легко развиваться без подключения к Интернету.
  3. Если размещенные файлы JavaScript не работают по какой-либо причине, ваш сайт не работает. Вот почему эти теги среды имеют эти резервные значения.

LibMan - простой вариант

Довольно новый способ поддерживать ваши файлы JavaScript в актуальном состоянии - LibMan. Если вы когда-либо использовали пакеты NuGet, вы почувствуете себя как дома. Давайте рассмотрим это, обновив Bootstrap с помощью Visual Studio 2017.

  1. Щелкните правой кнопкой мыши имя проекта и выберите Добавить ›Библиотека на стороне клиента.
  2. Измените значение Provider на unpkg.
  3. Введите [email protected] в поле «Библиотека». (или какая бы там ни была последняя версия)
  4. Выберите Выбрать конкретные файлы:
  5. Выберите все файлы в папке dist.
  6. Оставьте целевое местоположение как wwwroot / lib / bootstrap /
  7. Выберите Установить.
  8. Обновите свои HTML-ссылки (_Layout.cshtml и _ValidationScriptsPartial.cshtml). См. Выше, как это сделать.

В ваш проект будет добавлен файл libman.json, а файлы wwwroot / lib / bootstrap будут обновлены.

Давайте рассмотрим каждый из этих вариантов.

Провайдер

Поставщиком по умолчанию является cdnjs, который является чрезвычайно популярной службой хостинга для тысяч библиотек JavaScript. LibMan не размещает никаких файлов, он указывает только на поставщиков услуг. cdnjs не включает исходные файлы для проектов. Из-за этого я выбрал unpkg, который содержит полную копию исходных файлов каждого проекта.

Библиотека

При вводе имени библиотеки поставщик найдет совпадение. Если вы используете unpkg, имена библиотек совпадают с их именами npm. Подробнее о NPM в разделе гнезд.

Включить все файлы библиотеки или Выбрать определенные файлы

Необязательно включать все файлы из библиотеки. Вы можете выбирать.

В этом примере я выбрал только файлы в папке dist, потому что это файлы, на которые вы будете ссылаться из своего приложения в большинстве сценариев.

Я столкнулся с одним распространенным сценарием, для которого требуется исходный код проекта. Вам понадобятся исходные файлы, чтобы сделать что-то вроде настройки внешнего вида Bootstrap.

Цель

Целевым расположением вашего файла по умолчанию будет имя библиотеки в папке wwwroot \ lib.

Держим вещи в курсе

  • В любой момент вы можете щелкнуть файл libman.json и выбрать «Восстановить клиентские библиотеки».
  • Вы можете редактировать имя библиотеки прямо в файле libman.json и получать предложения по новой версии. Просто удалите номер версии после символа @, чтобы увидеть список.

  • Вы можете заставить свой проект загружать недостающие клиентские библиотеки при каждой сборке, щелкнув правой кнопкой мыши файл libman.json и выбрав «Включить восстановление клиентских библиотек при сборке».

Visual Studio для Mac и код Visual Studio

В настоящее время LibMan не включен в Visual Studio для Mac, и нет расширения для Visual Studio Code. Однако существует кроссплатформенный интерфейс командной строки.

NPM - почти такой же простой вариант

NPM означает диспетчер пакетов узлов и, безусловно, самый популярный способ обновления библиотек JavaScript. Это NuGet мира JavaScript.

Давайте рассмотрим тот же сценарий для обновления Bootstrap, но с использованием NPM.

  1. Щелкните правой кнопкой мыши имя проекта и выберите Добавить ›Новый элемент.
  2. Найдите npm в правом верхнем углу нового окна.
  3. Выберите файл конфигурации npm и оставьте имя package.json.
  4. В devDependencies начните новую строку.
  5. Добавьте двойные кавычки и начните вводить бутстрап.
  6. Выберите номер вашей версии.
  7. Сохраните файл.
  8. Скопируйте файлы из node_modules в папку lib. Увидеть ниже.
  9. Обновите свои HTML-ссылки (_Layout.cshtml и _ValidationScriptsPartial.cshtml). См. Выше, как это сделать.

Visual Studio автоматически загрузит пакеты в папку node_module. Но вы не сможете его увидеть, потому что он не включен в ваш проект. Не добавляйте эту папку в свой проект! Она будет включать весь исходный код, и вам не нужны все эти файлы. Вместо этого нажмите кнопку «Показать все файлы» в окне обозревателя решений.

Итак, на данный момент он очень похож на LibMan, но есть одна небольшая проблема. Вам необходимо перенести нужные файлы из папки node_modules в папку lib в вашей папке wwwroot. Не ссылайтесь на файлы из папки node_modules непосредственно в своем HTML! Вы можете просто копировать их вручную каждый раз при обновлении файла NPM или снова использовать LibMan.

Когда вы добавляете библиотеку на стороне клиента через LibMan, одним из вариантов вашего поставщика является файловая система. Просто выберите его и перейдите в папку node_modules, чтобы Bootstrap получил его оттуда. Вам нужно будет сделать это один раз для каждой папки, потому что LibMan в настоящее время не копирует файлы из подпапок.

Так, например, для Bootstrap вам придется сделать это дважды. Один раз для файлов CSS в папке node_modules / bootstrap / dist / css / и один раз для файлов JavaScript в папке node_modules / bootstrap / dist / js /.

Visual Studio для Mac и код Visual Studio

Угадай, что? Снова командная строка. В сети есть множество вводных статей о NPM, например, эта здесь.

WebPack - сложный вариант

Не делайте этого для проекта MVC. Только, пожалуйста, не идите по этому пути, пока не поймете, что такое WebPack, для чего он предназначен, а для чего не предназначен. Это выходит за рамки этой статьи для начинающих.

Обновление библиотек JavaScript сложнее, чем раньше. NuGet больше не является предпочтительным вариантом, размещенные файлы быстрее обрабатываются, а значения целостности обеспечивают доставку правильного и полного JavaScript вашему пользователю.

Но недавние инструменты с LibMan и NPM сделали это намного проще.