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

Popper.js — это мощная библиотека для управления позиционированием всплывающих элементов, таких как тултипы, выпадающие меню и модальные окна. Для начала работы необходимо правильно установить и подключить библиотеку к проекту. Popper.js поддерживает несколько способов установки: через CDN, npm/yarn и локальное подключение файлов.

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

Для быстрого прототипирования или небольших проектов можно использовать CDN. Достаточно добавить тег <script> в HTML-файл:

<script src="https://unpkg.com/@popperjs/core@2"></script>

После этого объект Popper доступен в глобальной области как Popper.

Преимущества CDN:

  • Быстрая интеграция без установки пакетов.
  • Автоматическая загрузка актуальной версии.
  • Удобно для тестирования и демонстраций.

Недостатки CDN:

  • Зависимость от внешнего сервера.
  • Ограниченные возможности контроля версии при долгосрочной разработке.

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

Для полноценного проекта с управлением зависимостями предпочтительнее использовать npm или yarn.

npm:

npm install @popperjs/core

yarn:

yarn add @popperjs/core

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

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

Это позволяет использовать современные возможности модульной структуры JavaScript и управлять версиями через package.json.

Локальное подключение файлов

Если проект не использует пакетные менеджеры, можно скачать библиотеку с официального репозитория и подключить её локально:

<script src="path/to/popper.min.js"></script>

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

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

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

console.log(typeof Popper); // через CDN или локальный скрипт

или

import { createPopper } from '@popperjs/core';
console.log(typeof createPopper); // через npm/yarn

Возврат значения function подтверждает успешное подключение.

Выбор способа подключения

  • CDN — быстрый старт и прототипирование.
  • npm/yarn — рекомендуемый вариант для современных фронтенд-проектов с использованием сборщиков (Webpack, Vite, Parcel).
  • Локальное подключение — для оффлайн или корпоративных решений.

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

Основные зависимости

Popper.js не требует внешних библиотек для работы, однако интеграция с фреймворками, такими как React или Vue, может потребовать соответствующих адаптеров (@popperjs/react, @popperjs/vue).

import { createPopper } from '@popperjs/core';
// или для React
import { Popper } from '@popperjs/react';

Настройка сборщиков

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

  • Webpack: поддерживает ES-модули, достаточно стандартного импорта import { createPopper } from '@popperjs/core';.
  • Vite / Rollup: полностью совместим с ESM, подключение идентично.

Для TypeScript можно дополнительно установить типы:

npm install --save-dev @types/popperjs__core

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

Таким образом, Popper.js легко интегрируется в любые проекты благодаря гибким способам установки и подключения, позволяя использовать всю мощь библиотеки независимо от стека разработки.

Оглавление