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

Featherlight — компактная библиотека для реализации lightbox-окон, написанная на JavaScript и зависящая от jQuery. Установка через npm предполагает, что в проекте уже настроена среда сборки: используется Node.js, инициализирован package.json, а зависимости управляются через npm или совместимый менеджер (yarn, pnpm).

Минимальные требования:

  • Node.js версии, поддерживаемой текущей LTS-веткой npm;
  • jQuery версии 1.7+ (рекомендуется 3.x);
  • Сборщик (Webpack, Vite, Parcel, Rollup) либо ручное подключение файлов.

Установка пакета Featherlight

Featherlight распространяется через npm под именем featherlight. Установка выполняется стандартным образом:

npm install featherlight

После установки в node_modules появится пакет со следующей структурой (упрощённо):

node_modules/
└── featherlight/
    ├── release/
    │   ├── featherlight.min.js
    │   ├── featherlight.min.css
    │   └── featherlight.gallery.min.js
    ├── src/
    ├── README.md
    └── package.json

Основной интерес для использования в браузере представляет каталог release, содержащий готовые минифицированные файлы JavaScript и CSS.

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

Featherlight не включает jQuery в свои зависимости, поэтому его необходимо установить отдельно:

npm install jquery

В package.json зависимости будут выглядеть примерно так:

{
  "dependencies": {
    "jquery": "^3.7.1",
    "featherlight": "^1.7.14"
  }
}

Порядок подключения критичен: jQuery должен быть загружен до Featherlight.

Подключение Featherlight через сборщик

Импорт в JavaScript-модуле

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

import $ from 'jquery';
import 'featherlight';
import 'featherlight/release/featherlight.min.css';

После импорта библиотека регистрирует себя как jQuery-плагин и становится доступной через $.featherlight и jQuery-методы.

Важно учитывать, что Featherlight ожидает глобальный объект jQuery. В некоторых сборщиках может потребоваться явное связывание:

import $ from 'jquery';
window.$ = window.jQuery = $;

Только после этого следует импортировать Featherlight.

Использование галереи

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

import 'featherlight/release/featherlight.gallery.min.js';

CSS для галереи входит в основной файл стилей и не требует отдельного импорта.

Подключение без сборщика (через node_modules)

В проектах без полноценной сборки файлы Featherlight могут подключаться напрямую из node_modules, например, через <script> и <link>:

<link rel="stylesheet" href="node_modules/featherlight/release/featherlight.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/featherlight/release/featherlight.min.js"></script>

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

Проверка корректности установки

После подключения Featherlight доступен как jQuery-плагин. Базовый признак корректной установки — наличие функции:

typeof $.featherlight === 'function'

При успешной загрузке CSS стили lightbox применяются автоматически, без дополнительной инициализации.

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

Featherlight использует семантическое версионирование. Обновление пакета выполняется стандартной командой:

npm update featherlight

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

  • возможные изменения в CSS-классах;
  • совместимость с текущей версией jQuery;
  • наличие кастомных модификаций стилей.

Для фиксации конкретной версии рекомендуется явно указывать её в package.json.

Типичные проблемы при установке

Отсутствие jQuery в глобальной области видимости Featherlight не работает, если jQuery не доступен глобально. Решается явным присваиванием window.jQuery.

CSS не применяется Причина — не подключён или не обработан файл featherlight.min.css. В сборщиках необходимо убедиться, что загрузка CSS поддерживается конфигурацией.

Конфликт версий jQuery Одновременное использование нескольких копий jQuery может привести к отсутствию плагина в ожидаемом экземпляре $.

Особенности npm-установки в учебных проектах

Установка через npm удобна для:

  • контроля версий;
  • повторяемости окружения;
  • интеграции с современными сборщиками;
  • изоляции зависимостей.

Featherlight, несмотря на небольшой размер и простоту, корректно вписывается в npm-экосистему и может использоваться как в минимальных проектах, так и в составе сложных frontend-приложений.

Оглавление