Бандлинг с Rollup

Popper.js — это мощная библиотека для позиционирования всплывающих элементов, таких как тултипы, модальные окна и выпадающие списки. При работе с современными сборщиками модулей, такими как Rollup, важно понимать, как правильно настроить сборку и бандлинг, чтобы обеспечить корректное подключение Popper.js в проекте.

Установка Popper.js и Rollup

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

npm install @popperjs/core
npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs --save-dev
  • @popperjs/core — ядро библиотеки Popper.js.
  • rollup — сам сборщик.
  • rollup-plugin-node-resolve — позволяет Rollup находить пакеты в node_modules.
  • rollup-plugin-commonjs — преобразует CommonJS модули в формат, совместимый с Rollup.

Конфигурация Rollup для Popper.js

Файл rollup.config.js должен включать разрешение модулей и преобразование CommonJS, так как Popper.js использует современный модульный подход:

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // Подходит для браузера
    name: 'App'
  },
  plugins: [
    resolve(),   // Находит модули в node_modules
    commonjs()   // Преобразует CommonJS в ES-модули
  ]
};

Ключевой момент: использование resolve() гарантирует, что Rollup сможет корректно импортировать Popper.js из node_modules, а commonjs() обеспечивает поддержку модулей, которые не имеют ES6-экспорта.

Импорт Popper.js в проект

В ES-модульной структуре достаточно использовать стандартный синтаксис импорта:

import { createPopper } from '@popperjs/core';

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

createPopper(button, tooltip, {
  placement: 'top',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8],
      },
    },
  ],
});

Особенности:

  • placement задаёт позицию всплывающего элемента относительно целевого.
  • modifiers позволяют гибко настраивать поведение: смещение, сдвиг, смягчение выхода за границы окна.

Работа с плагинами Rollup для оптимизации

Для уменьшения размера бандла рекомендуется подключать следующие плагины:

  • rollup-plugin-terser для минификации:
import { terser } from 'rollup-plugin-terser';

plugins: [
  resolve(),
  commonjs(),
  terser()
]
  • rollup-plugin-alias для создания коротких путей к библиотекам:
import alias from '@rollup/plugin-alias';

plugins: [
  alias({
    entries: [
      { find: '@popper', replacement: 'node_modules/@popperjs/core/dist/esm' }
    ]
  }),
  resolve(),
  commonjs()
]

Преимущество: упрощается импорт модулей Popper.js и уменьшается вероятность ошибок при перемещении файлов.

Динамический импорт Popper.js

Для больших проектов имеет смысл использовать ленивую загрузку Popper.js через динамический импорт:

document.querySelector('#button').addEventListener('mouseenter', async () => {
  const { createPopper } = await import('@popperjs/core');
  const button = document.querySelector('#button');
  const tooltip = document.querySelector('#tooltip');

  createPopper(button, tooltip, { placement: 'right' });
});

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

Сборка бандла для продакшн

Рекомендуется разделять бандлы:

  1. Вендорский бандл: содержит библиотеки, такие как Popper.js, React, Vue и т.п.
  2. Приложенческий бандл: содержит собственный код проекта.

Пример Rollup конфигурации для вендорского бандла:

export default {
  input: 'src/vendor.js',
  output: {
    file: 'dist/vendor.js',
    format: 'iife',
    name: 'Vendor'
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

В src/vendor.js можно импортировать все сторонние библиотеки:

import '@popperjs/core';
import 'lodash';

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

Особенности Popper.js при бандлинге

  • Popper.js полностью поддерживает ES6-модули, что облегчает интеграцию с Rollup.
  • При использовании CommonJS-версии библиотеки обязательно подключать commonjs() плагин.
  • Для сложных интерфейсов рекомендуется комбинировать модификаторы Popper.js с динамическим импортом, чтобы оптимизировать производительность.
Оглавление