Подключение через CDN

Использование CDN позволяет подключать библиотеку напрямую в браузере без сборщиков, установки npm-пакетов и конфигурации модулей. Такой способ удобен для прототипирования, небольших проектов, учебных задач и ситуаций, когда необходимо быстро подключить функциональность работы с датами.

CDN (Content Delivery Network) представляет собой распределённую сеть серверов, через которую доставляются статические ресурсы: JavaScript-библиотеки, стили, изображения. При подключении через CDN браузер загружает файл библиотеки по URL и делает её доступной в глобальной области видимости.

Базовое подключение через CDN

Наиболее простой способ использования Day.js в браузере — подключение через тег <script>.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

После загрузки скрипта становится доступен глобальный объект dayjs.

<script>
  const now = dayjs();
  console.log(now.format());
</script>

Основной момент: библиотека работает без импортов, напрямую через глобальную переменную.

Подключение через разные CDN

Существует несколько популярных CDN-провайдеров, каждый из которых предоставляет доступ к библиотеке.

jsDelivr

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Особенности:

  • высокая скорость загрузки за счёт глобального кеширования;
  • поддержка версионирования;
  • возможность загрузки модулей и плагинов.

unpkg

<script src="https://unpkg.com/dayjs@1/dayjs.min.js"></script>

Особенности:

  • прямое отражение структуры npm-пакета;
  • удобен для быстрого доступа к любым файлам библиотеки;
  • поддерживает указание точной версии.

cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.10/dayjs.min.js"></script>

Особенности:

  • стабильность и долгосрочное хранение версий;
  • часто используется в корпоративных проектах;
  • ручная модерация пакетов.

Работа с глобальным объектом

После подключения через CDN библиотека доступна через dayjs.

<script>
  const date = dayjs('2026-05-22');
  console.log(date.format('YYYY-MM-DD'));
</script>

Создание объекта даты происходит через вызов функции dayjs(). В отличие от нативного Date, результат всегда является объектом библиотеки с методами форматирования и преобразования.

Форматирование дат

Одной из ключевых возможностей является форматирование.

<script>
  const date = dayjs();

  console.log(date.format('YYYY-MM-DD'));
  console.log(date.format('DD.MM.YYYY'));
  console.log(date.format('HH:mm:ss'));
</script>

Шаблоны форматирования:

  • YYYY — год;
  • MM — месяц;
  • DD — день;
  • HH — часы;
  • mm — минуты;
  • ss — секунды.

Работа с относительным временем

Для отображения относительных дат требуется подключение дополнительного плагина.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>

Инициализация плагина:

<script>
  dayjs.extend(dayjs_plugin_relativeTime);

  const date = dayjs().subtract(3, 'day');
  console.log(date.fromNow());
</script>

После подключения становится доступна работа с выражениями вида:

  • «3 дня назад»
  • «через 2 часа»

Подключение локалей через CDN

Day.js поддерживает локализацию, но по умолчанию используется английская локаль. Для изменения языка подключается дополнительный файл.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ru.js"></script>

Активация локали:

<script>
  dayjs.locale('ru');

  console.log(dayjs().format('DD MMMM YYYY'));
</script>

После этого месяцы и форматы отображаются на русском языке.

Подключение расширенных плагинов

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

UTC

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>

Использование:

<script>
  dayjs.extend(dayjs_plugin_utc);

  const utcDate = dayjs().utc();
  console.log(utcDate.format());
</script>

Timezone

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script>

Использование:

<script>
  dayjs.extend(dayjs_plugin_utc);
  dayjs.extend(dayjs_plugin_timezone);

  const ny = dayjs().tz('America/New_York');
  console.log(ny.format());
</script>

Порядок подключения скриптов

При использовании CDN важно соблюдать порядок загрузки:

  1. основная библиотека;
  2. плагины;
  3. локали;
  4. инициализация кода.

Пример корректной структуры:

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ru.js"></script>

<script>
  dayjs.extend(dayjs_plugin_utc);
  dayjs.extend(dayjs_plugin_relativeTime);
  dayjs.locale('ru');

  console.log(dayjs().utc().fromNow());
</script>

Версионирование при подключении

CDN позволяет фиксировать версию библиотеки для предотвращения неожиданных изменений.

<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>

Использование конкретной версии обеспечивает:

  • предсказуемость поведения;
  • стабильность в продакшене;
  • отсутствие внезапных breaking changes.

Минифицированная и неминифицированная версии

Обычно CDN предоставляет два варианта файла:

  • dayjs.min.js — сжатый вариант;
  • dayjs.js — читаемый исходный вариант.

Пример:

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.js"></script>

В продакшене предпочтительна минифицированная версия:

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Особенности глобальной интеграции

При использовании CDN библиотека работает в глобальном контексте, что влияет на архитектуру:

  • отсутствует система импортов ES Modules;
  • плагины подключаются вручную;
  • порядок загрузки критичен;
  • конфликты переменных возможны при неправильной интеграции.

При этом сохраняется полная функциональность, аналогичная модульному использованию.

Совместимость с различными браузерами

CDN-версия Day.js поддерживает все современные браузеры:

  • Chrome;
  • Firefox;
  • Safari;
  • Edge.

Для старых браузеров может потребоваться транспиляция окружения, но сама библиотека ориентирована на современный JavaScript и не требует сложных полифилов.

Использование в HTML-страницах без сборки

CDN-подключение особенно эффективно в проектах без сборщика:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

<script>
  document.body.innerText = dayjs().format('YYYY-MM-DD HH:mm');
</script>

</body>
</html>

Такой подход позволяет внедрять функциональность работы с датами без дополнительных инструментов.

Типичные ошибки при подключении

Часто встречаются следующие проблемы:

1. Использование плагина до его загрузки

<script>
  dayjs.extend(dayjs_plugin_relativeTime); // ошибка, если скрипт не подключён
</script>

2. Нарушение порядка подключения Плагины должны идти после основной библиотеки.

3. Отсутствие extend() Плагин подключён, но не активирован.

dayjs.extend(dayjs_plugin_utc);

Итоговая структура подключения

Оптимальная схема CDN-подключения включает:

  • фиксированную версию библиотеки;
  • подключение необходимых плагинов;
  • загрузку локалей;
  • инициализацию в конце документа.
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ru.js"></script>

<script>
  dayjs.extend(dayjs_plugin_utc);
  dayjs.extend(dayjs_plugin_timezone);
  dayjs.locale('ru');

  console.log(dayjs().tz('Europe/Moscow').format('DD MMMM YYYY'));
</script>
Оглавление