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

Библиотека timeago.js поддерживает подключение напрямую из CDN без установки через npm или пакетных менеджеров. Такой способ особенно удобен для:

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

CDN-подключение позволяет использовать библиотеку сразу после загрузки страницы, не настраивая сборщики вроде Webpack, Vite или Parcel.

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

Один из самых популярных CDN для JavaScript-библиотек — unpkg.

Подключение выполняется через тег <script>:

<script src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js"></script>

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

Пример полной HTML-страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>timeago.js CDN</title>
</head>
<body>

<p id="time"></p>

<script src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js"></script>

<script>
    const date = '2025-05-20 10:00:00';

    const formatted = timeago.format(date);

    document.getElementById('time').innerText = formatted;
</script>

</body>
</html>

Результат:

6 days ago

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

Альтернативный вариант — CDN-сервис jsDelivr.

Подключение выглядит так:

<script src="https://cdn.jsdelivr.net/npm/timeago.js@4.0.2/dist/timeago.min.js"></script>

Пример использования полностью идентичен предыдущему варианту.

Использование глобального объекта timeago

После CDN-подключения библиотека работает через глобальный объект:

timeago

Основные методы:

Метод Назначение
timeago.format() Форматирование даты
timeago.render() Автоматическое обновление DOM
timeago.cancel() Остановка таймеров обновления
timeago.register() Регистрация локализации

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

Базовый пример

<script>
    const result = timeago.format('2025-05-20');

    console.log(result);
</script>

Результат:

6 days ago

Форматирование объекта Date

const date = new Date();

const result = timeago.format(date);

console.log(result);

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

const timestamp = Date.now() - 1000 * 60 * 5;

console.log(
    timeago.format(timestamp)
);

Результат:

5 minutes ago

Автоматическое обновление времени

Одно из ключевых преимуществ timeago.js — автоматическое обновление текста без ручного пересчёта.

HTML-разметка

<time class="timeago" datetime="2025-05-26T12:00:00"></time>

Javascript

<script>
    timeago.render(
        document.querySelectorAll('.timeago')
    );
</script>

Библиотека автоматически:

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

Работа с несколькими элементами

<ul>
    <li>
        <time class="timeago" datetime="2025-05-26T10:00:00"></time>
    </li>

    <li>
        <time class="timeago" datetime="2025-05-25T08:30:00"></time>
    </li>

    <li>
        <time class="timeago" datetime="2025-05-20T21:15:00"></time>
    </li>
</ul>

<script>
    const nodes = document.querySelectorAll('.timeago');

    timeago.render(nodes);
</script>

Использование русского языка

По умолчанию библиотека использует английскую локализацию.

Для русского языка необходимо подключить locale-файл.

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

<script src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js"></script>

<script src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.locales.min.js"></script>

После этого становится доступна локаль ru.

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

timeago.format(
    new Date(),
    'ru'
);

Автоматическое обновление с локалью

<time class="timeago" datetime="2025-05-26T12:00:00"></time>

<script>
    timeago.render(
        document.querySelectorAll('.timeago'),
        'ru'
    );
</script>

Результат:

только что

или:

5 минут назад

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

Фиксация версии — важная практика для стабильности проекта.

Правильный вариант:

<script src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js"></script>

Нежелательный вариант:

<script src="https://unpkg.com/timeago.js/dist/timeago.min.js"></script>

Без указания версии обновление библиотеки может неожиданно изменить поведение приложения.

Минифицированная и обычная версии

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

Минифицированный

timeago.min.js

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

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

Неминифицированный

timeago.js

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

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

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

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

<script>
    console.log(timeago);
</script>

Если библиотека подключена корректно, в консоли появится объект API.

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

Ошибка порядка подключения

Неправильно:

<script>
    timeago.format(new Date());
</script>

<script src="timeago.min.js"></script>

В этом случае браузер ещё не загрузил библиотеку.

Правильно:

<script src="timeago.min.js"></script>

<script>
    timeago.format(new Date());
</script>

Ошибка локализации

timeago.format(new Date(), 'ru');

без подключения locale-файла приведёт к отсутствию русских переводов.

Необходимо подключить:

<script src="timeago.locales.min.js"></script>

Ошибка селектора

timeago.render(
    document.querySelector('.missing')
);

Если элемент не найден, метод не сможет выполнить обновление.

Рекомендуется проверять существование элемента:

const node = document.querySelector('.timeago');

if (node) {
    timeago.render(node);
}

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

Для оптимизации загрузки рекомендуется использовать атрибут defer.

<script
    defer
    src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js">
</script>

Преимущества:

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

Подключение локалей с defer

<script
    defer
    src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js">
</script>

<script
    defer
    src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.locales.min.js">
</script>

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

Для повышения безопасности CDN-подключения можно использовать Subresource Integrity.

Пример:

<script
    src="https://cdn.jsdelivr.net/npm/timeago.js@4.0.2/dist/timeago.min.js"
    integrity="HASH"
    crossorigin="anonymous">
</script>

Механизм SRI позволяет браузеру проверять целостность файла.

Динамическое подключение библиотеки

Иногда библиотеку загружают программно.

const script = document.createElement('script');

script.src =
    'https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js';

document.head.appendChild(script);

script.onl oad = () => {
    console.log(
        timeago.format(new Date())
    );
};

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

CDN-подключение особенно удобно в:

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

Пример для статического HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">

    <script
        src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.min.js">
    </script>

    <script
        src="https://unpkg.com/timeago.js@4.0.2/dist/timeago.locales.min.js">
    </script>
</head>
<body>

<p>
    Последнее обновление:
    <time
        class="timeago"
        datetime="2025-05-26T11:00:00">
    </time>
</p>

<script>
    timeago.render(
        document.querySelectorAll('.timeago'),
        'ru'
    );
</script>

</body>
</html>

Остановка автоматического обновления

Метод render() создаёт внутренние таймеры.

Для освобождения ресурсов используется:

timeago.cancel();

Пример:

const nodes = document.querySelectorAll('.timeago');

timeago.render(nodes);

// позже
timeago.cancel();

Остановка обновления конкретного элемента

const node =
    document.querySelector('.timeago');

timeago.render(node);

// остановка только этого элемента
timeago.cancel(node);

Сравнение CDN и npm-подключения

CDN npm
Не требует сборки Требует Node.js
Быстрое подключение Гибкая настройка
Подходит для HTML Подходит для SPA
Простое использование Интеграция с bundlers
Хорошо для прототипов Хорошо для крупных приложений

Когда CDN-подключение особенно эффективно

CDN-подход наиболее удобен в следующих сценариях:

  • учебные примеры;
  • быстрые демонстрации;
  • небольшие сайты;
  • страницы без сборщика;
  • интеграция в CMS;
  • вставка в существующий HTML;
  • разработка виджетов;
  • тестирование библиотеки перед npm-установкой.
Оглавление