Импорт в различных окружениях

Импорт Day.js в разных средах выполнения зависит от системы модулей, используемой в проекте, а также от инструментов сборки и типа окружения — браузер, Node.js или гибридные приложения. Библиотека поддерживает CommonJS, ESM и классическое подключение через CDN, что делает её совместимой с широким спектром архитектур JavaScript-приложений.

В проектах, использующих CommonJS (традиционный формат Node.js), Day.js подключается через require:

const dayjs = require('dayjs');

После импорта функция dayjs становится доступной как основной объект для работы с датами. Важно учитывать, что CommonJS-импорт не поддерживает статическую оптимизацию на уровне компиляции, поэтому дерево зависимостей анализируется иначе, чем в ESM.

Пример базового использования:

const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD'));

При необходимости подключения плагинов в CommonJS они также импортируются через require:

const dayjs = require('dayjs');
const utc = require('dayjs/plugin/utc');

dayjs.extend(utc);

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

Node.js (ES Modules)

Современный формат ES Modules (ESM) используется в Node.js при наличии "type": "module" в package.json или при использовании расширения .mjs.

Импорт Day.js в ESM выглядит следующим образом:

import dayjs from 'dayjs';

Статический импорт позволяет использовать преимущества tree-shaking в сборщиках и более предсказуемую структуру зависимостей.

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

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc.js';

dayjs.extend(utc);

В ESM-окружении важно учитывать расширение .js у плагинов при работе в Node.js, поскольку строгий режим модулей требует явного указания пути.

Браузерное окружение через CDN

Для подключения Day.js напрямую в браузере без сборщиков используется CDN-версия библиотеки. Она подключается через <script> и предоставляет глобальный объект dayjs.

<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script>
  const now = dayjs();
  console.log(now.format('YYYY-MM-DD'));
</script>

В этом режиме библиотека доступна как глобальная переменная, а импорт через import или require невозможен.

Подключение плагинов через CDN выполняется отдельными скриптами:

<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/utc.js"></script>
<script>
  dayjs.extend(dayjs_plugin_utc);

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

Особенность CDN-версии заключается в том, что плагины регистрируются как глобальные переменные с префиксом dayjs_plugin_*.

Использование в сборщиках (Webpack, Vite, Rollup)

В современных сборочных системах предпочтительным является ESM-импорт, так как он позволяет оптимизировать итоговый бандл.

import dayjs from 'dayjs';

Сборщики автоматически обрабатывают зависимости и могут исключать неиспользуемые части кода при корректной настройке.

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

import dayjs from 'dayjs';
import isLeapYear from 'dayjs/plugin/isLeapYear.js';

dayjs.extend(isLeapYear);

При использовании Vite и аналогичных инструментов Day.js обычно не требует дополнительной конфигурации, поскольку библиотека уже оптимизирована под ESM.

В Webpack возможны случаи, когда требуется проверка совместимости модулей, особенно при смешении CommonJS и ESM. В таких сценариях важно избегать двойного подключения Day.js, чтобы не создавать дублирующийся экземпляр.

Условный импорт и ленивое подключение

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

async function loadDate() {
  const { default: dayjs } = await import('dayjs');

  return dayjs().format('YYYY-MM-DD');
}

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

Плагины также могут быть загружены динамически:

async function loadUTC() {
  const dayjsModule = await import('dayjs');
  const utc = await import('dayjs/plugin/utc.js');

  const dayjs = dayjsModule.default;
  dayjs.extend(utc.default);

  return dayjs().utc();
}

Этот подход применяется в крупных приложениях с разделением кода по маршрутам или функциональным модулям.

Особенности совместимости модулей

Day.js поддерживает одновременную работу с CommonJS и ESM, но при смешанном использовании важно учитывать следующие моменты:

  • ESM-импорт создаёт единый экземпляр библиотеки, тогда как некорректное смешение с CommonJS может привести к дублированию контекста.
  • Плагины должны подключаться к тому же экземпляру dayjs, который используется в приложении.
  • При использовании сборщиков необходимо избегать разных путей импорта одной и той же сущности.

Типичная ошибка:

const dayjs = require('dayjs');
import utc from 'dayjs/plugin/utc.js';

dayjs.extend(utc); // может работать с другим экземпляром в сборке

Корректный подход — придерживаться одного стандарта модулей в рамках проекта.

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

TypeScript поддерживает Day.js без дополнительных настроек. Импорт осуществляется так же, как в ESM:

import dayjs from 'dayjs';

Типизация уже встроена в пакет, поэтому отдельные декларации обычно не требуются.

Работа с плагинами:

import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc.js';

dayjs.extend(utc);

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

Использование в старых браузерах

В средах без поддержки ES Modules и современных возможностей JavaScript применяется CDN-подключение с UMD-сборкой:

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

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

Импорт Day.js в различных окружениях сводится к выбору одного из трёх основных подходов: CommonJS, ES Modules или CDN, при этом дальнейшая архитектура проекта определяется способом подключения плагинов и системой сборки.

Оглавление