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

Библиотека mo.js распространяется как JavaScript-пакет и может быть подключена несколькими способами в зависимости от архитектуры проекта.

Установка через npm

Наиболее распространённый способ — использование менеджера пакетов npm. Установка выполняется командой:

npm install @mojs/core

После установки библиотека становится доступной в node_modules и может быть импортирована в код.

Установка через yarn

Альтернативный способ — использование yarn:

yarn add @mojs/core

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

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

Использование с ES-модулями

При работе с современными сборщиками (например, Webpack, Vite, Parcel) используется синтаксис ES-модулей:

import mojs from '@mojs/core';

После этого доступ ко всем возможностям библиотеки осуществляется через объект mojs.

Пример:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: 50,
  fill: 'red',
});

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

В средах, где используется CommonJS (например, старые версии Node.js):

const mojs = require('@mojs/core');

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

Если проект не использует сборщики, библиотеку можно подключить напрямую через CDN.

<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>

После подключения глобальная переменная mojs становится доступной в браузере:

const burst = new mojs.Burst({
  left: 0,
  top: 0,
});

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

После установки важно убедиться, что библиотека работает корректно.

Минимальный тест:

const shape = new mojs.Shape({
  shape: 'circle',
  fill: 'blue',
  radius: 25,
  duration: 1000,
});

shape.play();

Если при запуске появляется анимация — подключение выполнено успешно.

Структура пакета

Основной пакет @mojs/core включает:

  • базовые анимационные классы (Shape, Burst, Timeline)
  • систему таймингов
  • инструменты для создания сложных анимаций

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

Интеграция со сборщиками

Webpack

Минимальная конфигурация не требует специальных настроек. Однако для оптимизации рекомендуется:

  • включить tree-shaking
  • использовать production-сборку

Пример импорта:

import mojs from '@mojs/core';

Vite

Vite автоматически обрабатывает ES-модули, дополнительная настройка не требуется:

import mojs from '@mojs/core';

Подключение в HTML-проекте

Пример минимального HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>mo.js example</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
<script>
  const circle = new mojs.Shape({
    shape: 'circle',
    fill: 'green',
    radius: { 0: 50 },
    duration: 1000
  });

  circle.play();
</script>

</body>
</html>

Особенности подключения

  • Библиотека не требует зависимостей
  • Работает полностью на чистом JavaScript
  • Поддерживает современные браузеры
  • Не зависит от фреймворков (React, Vue, Angular)

Работа в модульных системах

mo.js корректно функционирует в:

  • SPA-приложениях
  • серверном рендеринге (SSR) — с ограничениями (анимации только на клиенте)
  • микрофронтенд-архитектурах

При SSR необходимо проверять наличие window:

if (typeof window !== 'undefined') {
  const mojs = require('@mojs/core');
}

Оптимизация загрузки

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

  • использовать минимизированную версию (CDN автоматически это делает)
  • загружать библиотеку асинхронно:
<script async src="https://cdn.jsdelivr.net/npm/@mojs/core"></script>
  • подключать только в тех частях приложения, где требуется анимация

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

1. Неправильный импорт

import { mojs } from '@mojs/core'; // ошибка

Правильно:

import mojs from '@mojs/core';

2. Отсутствие сборки

При использовании ES-модулей без сборщика в старых браузерах возможны ошибки.

3. Конфликт с другими библиотеками

Редко, но возможно при использовании глобальных переменных через CDN.

Версионирование

Установка конкретной версии:

npm install @mojs/core@0.288.2

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

Обновление библиотеки

npm update @mojs/core

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

Удаление библиотеки

npm uninstall @mojs/core

или

yarn remove @mojs/core

Организация проекта

Рекомендуемая структура:

project/
├── src/
│   ├── animations/
│   │   └── effects.js
│   ├── main.js
├── package.json

Вынесение анимаций в отдельные модули упрощает поддержку и масштабирование.

Подключение типов (TypeScript)

mo.js не всегда содержит встроенные типы, поэтому может потребоваться:

npm install --save-dev @types/mo-js

Если типы отсутствуют, используется объявление:

declare module '@mojs/core';

Минимальный рабочий пример

import mojs from '@mojs/core';

const burst = new mojs.Burst({
  left: 0,
  top: 0,
  radius: { 0: 100 },
  count: 10,
  children: {
    shape: 'circle',
    radius: 20,
    fill: 'orange',
    duration: 1500
  }
});

burst.play();

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

Оглавление