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

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

Подготовка проекта

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

yarn init -y

Эта команда создаст файл package.json с базовыми настройками проекта, который будет управлять всеми зависимостями, включая Shepherd.js.

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

Для установки Shepherd.js через Yarn используется команда:

yarn add shepherd.js

После выполнения этой команды библиотека появится в разделе dependencies файла package.json:

"dependencies": {
  "shepherd.js": "^9.1.0"
}

Версия может отличаться в зависимости от актуального релиза. Yarn автоматически загрузит пакет и создаст соответствующую структуру в каталоге node_modules.

Установка с CSS

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

yarn add shepherd.js@latest

И в коде приложения подключить CSS:

import 'shepherd.js/dist/css/shepherd.css';

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

Использование с модульной системой

Shepherd.js полностью поддерживает ES Modules и CommonJS. После установки можно импортировать библиотеку:

import Shepherd from 'shepherd.js';

Или, при использовании CommonJS:

const Shepherd = require('shepherd.js');

После этого создаются экземпляры туров и конфигурируются шаги.

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

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  id: 'intro',
  text: 'Добро пожаловать в тур!',
  attachTo: {
    element: '.start-button',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

tour.start();

Если при запуске проекта отображается шаг с подсказкой, значит установка выполнена успешно.

Обновление Shepherd.js через Yarn

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

yarn upgrade shepherd.js

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

Установка конкретной версии

В случае необходимости зафиксировать определённую версию:

yarn add shepherd.js@9.1.0

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

Взаимодействие с другими пакетами

Shepherd.js часто используется вместе с библиотеками для UI, такими как Vue, React или Angular. Установка через Yarn обеспечивает простое управление зависимостями, позволяя легко интегрировать библиотеку в любой современный стек фронтенд-разработки.

Вывод

Использование Yarn для установки Shepherd.js обеспечивает удобное управление версионированием, автоматическое подключение всех необходимых зависимостей и лёгкую интеграцию в модульные системы. Правильное подключение стилей и модулей гарантирует корректную работу интерактивных туров в проекте.

Оглавление