Инициализация библиотеки

Под инициализацией в контексте timeago.js понимается подготовка библиотеки к работе: правильный импорт, настройка локалей, привязка к DOM-элементам или встраивание в компонентную структуру приложения. В отличие от многих библиотек, timeago.js не требует глобальной инициализации через конструктор или фабрику — её функции можно использовать напрямую после импорта.

Импорт в ESM-проекте

import { format, render, cancel, register } from 'timeago.js';

Функции доступны сразу. Никаких вызовов init() или new Timeago() не требуется.

Импорт в CommonJS-проекте

const { format, render, cancel, register } = require('timeago.js');

Импорт всего модуля

import * as timeago from 'timeago.js';

timeago.format(Date.now() - 60000);

Этот вариант удобен, когда требуется явное указание пространства имён в коде.

Инициализация с локалью

Если приложение работает с определённым языком, рекомендуется зарегистрировать нужную локаль при старте приложения — до первого использования функции format.

Регистрация встроенной локали:

import { register } from 'timeago.js';
import ru from 'timeago.js/esm/lang/ru';

register('ru', ru);

После этого 'ru' доступна во всём приложении.

Инициализация при загрузке страницы в браузере

<script type="module">
  import { render } from './node_modules/timeago.js/esm/index.js';

  document.addEventListener('DOMContentLoaded', () => {
    const nodes = document.querySelectorAll('[data-timeago]');
    render(nodes, 'ru');
  });
</script>

Ключевой момент — дожидаться события DOMContentLoaded, иначе элементы могут быть ещё не доступны в момент вызова render.

Инициализация в точке входа приложения

Для SPA-приложений (React, Vue, Angular) локали и глобальные настройки выносят в отдельный файл инициализации.

src/lib/timeago.ts:

import { register } from 'timeago.js';
import ru from 'timeago.js/esm/lang/ru';

register('ru', ru);

export const DEFAULT_LOCALE = 'ru';

src/main.ts:

import './lib/timeago';

Такой подход гарантирует однократную регистрацию и централизованное управление локалями.

Отложенная инициализация

В некоторых случаях удобно инициализировать библиотеку только при первом использовании:

let initialized = false;

function ensureTimeagoReady() {
  if (!initialized) {
    register('ru', ruLocale);
    initialized = true;
  }
}

function formatDate(date) {
  ensureTimeagoReady();
  return format(date, 'ru');
}

Инициализация в React-приложении

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { register } from 'timeago.js';
import ru from 'timeago.js/esm/lang/ru';
import App from './App';

register('ru', ru);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Регистрация локали выполняется один раз при старте приложения, до монтирования компонентов.

Инициализация в Vue 3

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { register } from 'timeago.js';
import ru from 'timeago.js/esm/lang/ru';

register('ru', ru);

createApp(App).mount('#app');

Инициализация в Angular

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { register } from 'timeago.js';
import ru from 'timeago.js/esm/lang/ru';

register('ru', ru);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Порядок инициализации имеет значение

Если format вызывается раньше register, локаль не будет применена:

// Неправильно
format(Date.now() - 60000, 'ru'); // вернёт английский текст или ошибку

register('ru', ru); // слишком поздно
// Правильно
register('ru', ru);

format(Date.now() - 60000, 'ru'); // корректно вернёт русский текст

Глобальная инициализация через CDN

При подключении через <script> глобальный объект timeago становится доступен сразу:

<script src="https://unpkg.com/timeago.js"></script>
<script>
  // библиотека доступна через window.timeago
  console.log(timeago.format(new Date()));
</script>

Никакой инициализации не требуется — библиотека автоматически регистрирует себя в глобальном пространстве имён.

Что происходит при инициализации

При первом импорте timeago.js:

  1. Загружаются экспортируемые функции: format, render, cancel, register.
  2. Инициализируется внутреннее хранилище локалей (по умолчанию содержит 'en_US').
  3. Внутренний реестр таймеров находится в пустом состоянии.
  4. Никаких DOM-операций не выполняется до явного вызова render.

Это делает подключение безопасным и предсказуемым — библиотека не производит побочных эффектов при загрузке.

Оглавление