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

Для начала работы с библиотекой Shepherd.js необходимо установить её в проект через npm. Это позволяет управлять зависимостями и интегрировать библиотеку в современный процесс сборки приложений на JavaScript.

1. Инициализация проекта

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

npm init -y

Она создаёт файл package.json с базовыми настройками проекта, необходимыми для работы npm.

2. Установка Shepherd.js

Самый простой способ добавить Shepherd.js в проект — это выполнить команду:

npm install shepherd.js

Эта команда скачивает последнюю стабильную версию библиотеки и добавляет её в package.json в разделе dependencies.

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

После установки можно убедиться, что библиотека доступна в проекте, посмотрев на структуру node_modules. Папка shepherd.js должна находиться внутри node_modules, а запись о ней — в package.json.

4. Подключение в коде

Для использования Shepherd.js в проекте, собранном с помощью современных модульных систем (ES Modules или CommonJS), подключение происходит следующим образом:

ES Modules:

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

CommonJS:

const Shepherd = require('shepherd.js');
require('shepherd.js/dist/css/shepherd.css');

Важно подключать CSS-библиотеку, так как без неё элементы туров не будут корректно отображаться на странице.

5. Настройка сборщика

Если проект использует сборщик модулей (Webpack, Vite, Parcel), необходимо убедиться, что CSS-файлы из node_modules корректно обрабатываются. Для Webpack это может выглядеть так:

module: {
  rules: [
    {
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
    },
  ],
}

Это позволяет импортировать CSS прямо в JavaScript, что упрощает настройку Shepherd.js.

6. Использование с TypeScript

Shepherd.js имеет типы для TypeScript, которые можно установить отдельно, чтобы обеспечить поддержку автокомплита и проверки типов:

npm install @types/shepherd.js --save-dev

После этого импорт и использование библиотеки в TypeScript остаются аналогичными ES Modules:

import Shepherd from 'shepherd.js';

7. Обновление Shepherd.js

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

npm update shepherd.js

Она заменяет установленную версию на актуальную, при этом сохраняются зависимости проекта.

8. Альтернативная установка через Yarn

Если проект использует Yarn, вместо npm используется:

yarn add shepherd.js

Схема подключения и настройки идентична npm, включая импорт JS и CSS файлов.

9. Проверка работоспособности

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

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: true
  }
});

tour.addStep({
  text: 'Привет! Это первый шаг.',
  attachTo: { element: '.my-element', on: 'bottom' }
});

tour.start();

Если шаг появляется на странице и стрелка корректно указывает на элемент, установка выполнена успешно.

10. Советы по поддержке

  • Регулярно проверять версию Shepherd.js в package.json.
  • Использовать lock-файлы (package-lock.json или yarn.lock) для стабильности зависимостей.
  • При возникновении конфликтов версий проверять зависимости библиотек, использующих Shepherd.js.

Такой подход через npm обеспечивает удобное управление библиотекой и её зависимостями в современных проектах на JavaScript.

Оглавление