jQuery UI: Сборка из исходников
Введение
Недавно понадобилось поставить только виджет datepicker из набора jQuery UI. Ранее для этого требовалось зайти на официальный сайт, выбрать галочками нужное и скачать итоговый пакет. Сейчас же сайт отдаёт ошибку 502:
Я даже подумал, что проект забросили и больше не поддерживают библиотеку. Но выход нашёлся. Если внимательно посмотреть сайт, то можно найти ссылку на репозиторий github. Там есть недавние коммиты - значит проект жив.
Сборка из исходников
Клонируем себе проект:
git clone https://github.com/jquery/jquery-ui.gitДалее перерыл сайт для разработчиков, искал в интернете, на их же github - как можно собрать из исходников именно то, что нужно (как это делается на сайте в Download Builder), а не весь гигантский набор виджетов и эффектов jQuery UI. Нигде ничего не нашёл, кроме указания верного пути в Stack Owerflow.
Переходим в каталог исходников и устанавливаем зависимости для сборки:
cd jquery-ui/
npm install
sudo apt install node-grunt-cliМеняем файл сборки Gruntfile.js, чтобы собирался только виджет календаря и ничего больше. Блок requirejs меняем с
requirejs: {
js: {
options: {
baseUrl: "./",
paths: {
jquery: "./external/jquery/jquery",
external: "./external/"
},
preserveLicenseComments: false,
optimize: "none",
findNestedDependencies: true,
skipModuleInsertion: true,
exclude: [ "jquery" ],
include: expandFiles( [ "ui/**/*.js", "!ui/core.js", "!ui/i18n/*" ] ),
out: "dist/jquery-ui.js",
wrap: {
start: createBanner( uiFiles )
}
}
> }
},на
requirejs: {
js: {
options: {
baseUrl: "./",
paths: {
jquery: "./external/jquery/jquery",
external: "./external/"
},
preserveLicenseComments: false,
optimize: "none",
findNestedDependencies: true,
skipModuleInsertion: true,
exclude: [ "jquery" ],
include: expandFiles( [ "ui/keycode.js", "ui/widgets/datepicker.js", "ui/i18n/datepicker-ru.js" ] ),
out: "dist/jquery-datepicker-custom.js",
wrap: {
start: createBanner( uiFiles )
}
}
> }
},Тут я выбрал keycode.js - т.к. его предлагает сборщик пакета на сайте Download Builder. Также указал нужный мне русский язык для календаря. Все возможные варианты, которые можно выбрать находятся в каталоге исходного кода проекта - смотрим названия пакетов, ищем нужное и через запятую указываем в списке. Я указал название файла, который в итоге будет собран - jquery-datepicker-custom.js. Можно указать любое название.
Когда всё подготовлено - запускаем сборку:
grunt defaultВ каталоге dist получаем желаемый файл JS.
Копируем себе в проект и пользуемся календарём jQuery UI. Кроме JS файла, мне понадобились также стили:
jquery-ui/themes/base/datepicker.css
jquery-ui/themes/base/theme.css
В результате на сайте появится возможность загружать только виджет календаря (21 Kb - CSS; 83 Kb - JS) из большого набора JQuery UI. Файлы JS и CSS можно (и даже желательно) далее обработать (например с помощью terser и uglifycss) - так файлы получатся ещё компактнее.
Комментарии
Отправить комментарий