Настройка Rollup

Работа с Vivus в современных проектах часто требует сборки через модульный бандлер, поскольку библиотека ориентирована на использование в браузере и опирается на DOM API для анимации SVG. При разработке модульных приложений основная задача — корректно интегрировать её в пайплайн сборки без потери функциональности и с сохранением оптимизации итогового бандла.

В качестве инструмента сборки используется Rollup, поскольку он обеспечивает эффективную работу с ES-модулями, минимальный оверхед и качественное tree-shaking, что особенно важно для клиентских библиотек.

Установка базового набора зависимостей:

npm install rollup --save-dev
npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev
npm install @rollup/plugin-terser --save-dev

Саму библиотеку анимации SVG:

npm install vivus

После установки формируется структура проекта:

project/
 ├── src/
 │    └── index.js
 ├── dist/
 ├── rollup.config.js
 ├── package.json

Базовая конфигурация Rollup

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

Минимальная конфигурация:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.esm.js',
      format: 'esm'
    },
    {
      file: 'dist/bundle.umd.js',
      format: 'umd',
      name: 'VivusApp'
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

Такой подход позволяет формировать два основных формата:

  • ESM — для современных сборщиков и фреймворков
  • UMD — для прямого подключения в браузере через <script>

Подключение Vivus в модульной архитектуре

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

import Vivus from 'vivus';

const animation = new Vivus('my-svg', {
  type: 'delayed',
  duration: 200,
  start: 'autostart'
});

SVG элемент должен присутствовать в DOM:

<svg id="my-svg" viewBox="0 0 100 100">
  <path d="M10 10 H 90 V 90 H 10 Z" />
</svg>

При сборке через Rollup важно учитывать, что библиотека не всегда предназначена для серверного выполнения, поэтому требуется изоляция от SSR-окружения.

Настройка внешних зависимостей

При создании библиотеки или крупного приложения важно исключить Vivus из итогового бандла, если она подключается отдельно через CDN или npm на стороне потребителя.

В конфигурации Rollup это реализуется через external:

export default {
  input: 'src/index.js',
  external: ['vivus'],
  output: {
    file: 'dist/bundle.esm.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

Такой подход предотвращает дублирование кода и снижает размер итогового пакета.

Работа с CommonJS и ESM

Некоторые версии Vivus могут экспортироваться в формате CommonJS, что требует корректной обработки через плагин:

import commonjs from '@rollup/plugin-commonjs';

Без него возможны ошибки вида:

  • Default export is not defined
  • require is not defined

Rollup преобразует CommonJS в ESM на этапе сборки, обеспечивая совместимость модулей.

Оптимизация итогового бандла

Минификация играет ключевую роль при использовании SVG-анимаций в продакшене. Плагин terser позволяет сократить размер кода:

import terser from '@rollup/plugin-terser';

Дополнительно применяются следующие техники:

Исключение неиспользуемого кода

Rollup автоматически выполняет tree-shaking при условии использования ESM:

export function initAnimation() {
  return new Vivus('svg-id');
}

Если функция не используется — она исключается из финального бандла.

Разделение конфигураций для development и production

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

const isProd = process.env.NODE_ENV === 'production';

export default {
  input: 'src/index.js',
  output: {
    file: isProd ? 'dist/bundle.min.js' : 'dist/bundle.js',
    format: 'esm',
    sourcemap: !isProd
  },
  plugins: [
    resolve(),
    commonjs(),
    isProd && terser()
  ]
};

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

Подключение SVG-логики в сборке

SVG-анимация требует корректной загрузки DOM-элементов, поэтому структура кода обычно разделяется:

import Vivus from 'vivus';

export function mountAnimation(selector) {
  return new Vivus(selector, {
    type: 'sync',
    duration: 150
  });
}

Rollup объединяет этот код в единый модуль, обеспечивая сохранение зависимости от DOM только на клиентской стороне.

Использование IIFE для встраивания в HTML

Иногда требуется собрать файл для прямого подключения через <script>:

output: {
  file: 'dist/bundle.iife.js',
  format: 'iife',
  name: 'VivusModule'
}

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

<script src="bundle.iife.js"></script>
<script>
  new VivusModule('svg-id');
</script>

Source maps и отладка

При разработке важно включать source maps:

output: {
  file: 'dist/bundle.esm.js',
  format: 'esm',
  sourcemap: true
}

Это позволяет отлаживать код Vivus напрямую в браузере, сохраняя связь с исходными файлами.

Модульная архитектура проекта

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

src/
 ├── animations/
 │    └── vivus-init.js
 ├── components/
 │    └── svg-view.js
 ├── index.js

Пример разделения логики:

// vivus-init.js
import Vivus from 'vivus';

export const createAnimation = (id) =>
  new Vivus(id, { type: 'delayed', duration: 180 });
// index.js
import { createAnimation } from './animations/vivus-init';

createAnimation('logo');

Подключение внешних SVG-ассетов

SVG-файлы могут импортироваться через дополнительные плагины Rollup:

npm install @rollup/plugin-url --save-dev

Конфигурация:

import url from '@rollup/plugin-url';

plugins: [
  resolve(),
  commonjs(),
  url()
]

Это позволяет использовать SVG как строки или URL для дальнейшей анимации Vivus.

Производственная сборка и деплой

Финальный этап сборки через Rollup обычно включает:

  • минификацию
  • исключение dev-кода
  • генерацию sourcemap (по необходимости)
  • разделение форматов (ESM/UMD/IIFE)

Пример команды:

NODE_ENV=production rollup -c

Результатом становится оптимизированный бандл, готовый к использованию в продакшене с анимациями SVG, управляемыми Vivus.

Оглавление