Установка и подключение

Наиболее распространённый способ интеграции Moment.js в проект — установка через npm-подобные менеджеры пакетов. Библиотека распространяется как обычный JavaScript-модуль и может быть использована как в Node.js, так и в современных фронтенд-сборках.

npm

npm install moment

После установки пакет становится доступным в node_modules, а его подключение осуществляется стандартными средствами модульной системы.

yarn

yarn add moment

pnpm

pnpm add moment

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

Подключение в Node.js (CommonJS)

Moment.js изначально создавался в эпоху CommonJS, поэтому нативная интеграция в Node.js остаётся одной из самых стабильных форм подключения.

const moment = require('moment');

const now = moment();
console.log(now.format('YYYY-MM-DD HH:mm:ss'));

Экспорт представляет собой функцию-фабрику, возвращающую объект с методами работы с датами.

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

В современных проектах с поддержкой ES Modules используется синтаксис import.

import moment from 'moment';

const today = moment();
console.log(today.toISOString());

Некоторые сборщики автоматически адаптируют CommonJS-пакеты под ES-синтаксис, поэтому импорт обычно работает без дополнительных настроек.

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

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

<script src="https://cdn.jsdelivr.net/npm/moment@2.30.1/moment.min.js"></script>
<script>
  const now = moment();
  console.log(now.format('DD.MM.YYYY'));
</script>

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

Глобальный объект в браузере

При подключении через <script> Moment.js регистрируется в глобальной области видимости:

  • window.moment — основной объект библиотеки
  • доступен без импортов и сборки
const date = moment().add(1, 'day');
console.log(date.format('LLLL'));

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

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

В современных сборочных системах Moment.js подключается как обычная зависимость.

Webpack

import moment from 'moment';

Webpack обрабатывает библиотеку как CommonJS-модуль, включая её в итоговый бандл.

Vite

import moment from 'moment';

Vite использует ESBuild для предварительной обработки зависимостей, что ускоряет старт сервера разработки.

Rollup

import moment from 'moment';

При использовании Rollup важно учитывать, что Moment.js не является tree-shakable библиотекой в полной мере, поэтому весь код попадает в бандл.

Работа с локалями

Moment.js поддерживает множество локализаций, но они не включаются в сборку автоматически.

Импорт всех локалей

import moment from 'moment';
import 'moment/min/locales';

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

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

import moment from 'moment';
import 'moment/locale/ru';

moment.locale('ru');

Такой подход предпочтительнее с точки зрения оптимизации.

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

<script src="https://cdn.jsdelivr.net/npm/moment/min/moment-with-locales.min.js"></script>
<script>
  moment.locale('ru');
  console.log(moment().format('LLLL'));
</script>

Версия with-locales включает полный набор переводов, что увеличивает размер загружаемого файла.

Moment Timezone

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

npm install moment-timezone

Подключение:

import moment from 'moment-timezone';

const moscow = moment().tz('Europe/Moscow');
console.log(moscow.format());

Библиотека расширяет базовый функционал, добавляя поддержку IANA time zone database.

Подключение в TypeScript-проектах

Moment.js предоставляет встроенные типы, поэтому дополнительная установка @types обычно не требуется.

import moment from 'moment';

const date: moment.Moment = moment();
const formatted: string = date.format('YYYY-MM-DD');

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

Особенности интеграции в модульные системы

Moment.js экспортируется как единый объект, что накладывает особенности:

  • отсутствует полноценный tree-shaking
  • импорт всей библиотеки происходит даже при использовании одного метода
  • локали и плагины увеличивают итоговый размер
import moment from 'moment';
import { format } from 'moment'; // не применяется напрямую

Корректной считается только работа через основной объект.

Часто используемые формы подключения

Универсальный вариант для фронтенда

import moment from 'moment';

Быстрое подключение в HTML

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

Node.js окружение

const moment = require('moment');

Особенности загрузки и инициализации

Moment.js инициализируется синхронно при первом импорте. Все последующие вызовы используют уже загруженный экземпляр модуля. Повторная инициализация не выполняется.

import moment from 'moment';

const a = moment();
const b = moment();

console.log(a === b); // false, но модуль один и тот же

Каждый вызов moment() создаёт новый объект даты, но сам модуль остаётся единым.

Подключение в legacy-проектах

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

<script src="/libs/moment.min.js"></script>
<script>
  var d = moment().format('YYYY');
</script>

Такая схема характерна для приложений без сборки и до внедрения ES Modules.

Оглавление