Бандлинг с Webpack

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

Webpack позволяет управлять зависимостями и бандлингом модулей, а Popper.js поддерживает разные варианты импорта: через ES Modules, CommonJS, а также через глобальный объект при подключении через <script>.

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

Для работы с Webpack используется npm-пакет. Выполняется установка командой:

npm install @popperjs/core --save

Эта команда добавляет библиотеку в node_modules и сохраняет её в package.json. Использование @popperjs/core гарантирует получение актуальной версии с поддержкой модульной системы.

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

После установки доступны несколько способов импорта:

ES Modules:

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

CommonJS:

const { createPopper } = require('@popperjs/core');

ES Modules предпочтительнее при использовании Webpack, так как позволяют Tree Shaking, уменьшая размер итогового бандла.

Настройка Webpack для корректного бандлинга

При работе с Popper.js важно учитывать:

  1. Transpiling для старых браузеров Popper.js использует современный синтаксис ES6+. Если проект нацеливается на старые браузеры, необходимо настроить Babel:
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

  1. Оптимизация бандла Webpack умеет автоматически оптимизировать код, но Popper.js поддерживает Tree Shaking. Импорт только createPopper позволяет исключить ненужные утилиты из итогового бандла.

  2. Поддержка CSS/стилей для тултипов Если используются кастомные стили для всплывающих элементов, их можно импортировать прямо в Jav * aScript:

import './tooltip.css';

Webpack обработает этот импорт через соответствующие лоадеры (css-loader, style-loader) и включит стили в бандл.

Пример использования Popper.js с Webpack

Стандартная структура проекта:

src/
  index.js
  tooltip.js
  tooltip.css
webpack.config.js
package.json

В tooltip.js создаём Popper-инстанс:

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

export function initTooltip(referenceElement, tooltipElement) {
  return createPopper(referenceElement, tooltipElement, {
    placement: 'top',
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 8],
        },
      },
      {
        name: 'preventOverflow',
        options: {
          padding: 5,
        },
      },
    ],
  });
}

В index.js импортируем и инициализируем:

import { initTooltip } from './tooltip';
import './tooltip.css';

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

initTooltip(button, tooltip);

Webpack соберёт JS и CSS в единый бандл, готовый для включения на страницу.

Динамическая подгрузка Popper.js

Для крупных проектов целесообразно использовать код-сплиттинг. Webpack позволяет загружать Popper.js только при необходимости:

document.querySelector('#myButton').addEventListener('mouseenter', async () => {
  const { createPopper } = await import('@popperjs/core');
  const tooltip = document.querySelector('#myTooltip');
  createPopper(event.target, tooltip, { placement: 'right' });
});

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

Особенности интеграции с фреймворками

  • React: Popper.js совместим с React через пакеты @popperjs/core и react-popper. Webpack корректно обрабатывает оба варианта через ES Modules.
  • Vue: Для Vue 2 и Vue 3 рекомендуется импортировать Popper.js через модули и использовать его в директивах или компонентах.
  • Angular: Подключение через Angular CLI/webpack-окружение возможно через import { createPopper } from '@popperjs/core'.

Модификаторы и оптимизация

Модификаторы позволяют тонко настраивать поведение всплывающих элементов. Для Webpack важно:

  • Импортировать только необходимые модификаторы (Tree Shaking).
  • Использовать offset, preventOverflow, flip для предотвращения выхода тултипа за границы окна.
  • Настраивать strategy (absolute или fixed) в зависимости от структуры DOM.

Пример настройки:

const popperInstance = createPopper(reference, popper, {
  placement: 'bottom-start',
  strategy: 'fixed',
  modifiers: [
    { name: 'offset', options: { offset: [10, 20] } },
    { name: 'flip', options: { fallbackPlacements: ['top', 'right'] } }
  ],
});

Интеграция с DevTools и Sourcemaps

Webpack позволяет включить devtool: 'source-map' для отладки. Это упрощает отслеживание ошибок Popper.js в исходном коде и помогает выявлять некорректное позиционирование элементов.

Вывод

Popper.js и Webpack вместе обеспечивают современный подход к динамическому позиционированию элементов с минимальным размером бандла, поддержкой модульной структуры и возможностью оптимизации под разные браузеры и фреймворки. Использование ES Modules, код-сплиттинга, Tree Shaking и правильных модификаторов позволяет создавать гибкие и производительные интерфейсы.

Оглавление