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

Для использования Intro.js в современных проектах на JavaScript предпочтительным способом является установка через npm. Это позволяет интегрировать библиотеку в сборочные системы, такие как Webpack, Rollup или Vite, обеспечивая удобное управление зависимостями и возможность автоматического обновления.

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

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

npm init -y

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

Установка Intro.js

Установка выполняется через стандартную команду npm:

npm install intro.js --save
  • Параметр --save добавляет библиотеку в секцию dependencies файла package.json.
  • После установки библиотека становится доступной в проекте через import или require.

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

npm list intro.js

Она выведет версию установленного пакета и его путь в проекте.

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

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

С использованием ES6 модулей:

import introJs from 'intro.js';
import 'intro.js/introjs.css';
  • introJs — основной объект библиотеки, предоставляющий методы для создания интерактивных туров.
  • Подключение CSS обязательно для корректного отображения подсказок, стрелок и элементов интерфейса.

С использованием CommonJS (Node.js):

const introJs = require('intro.js').introJs;
require('intro.js/introjs.css');

Такое подключение актуально для проектов с конфигурацией Node.js и старых сборщиков, поддерживающих CommonJS.

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

При использовании Webpack или Vite необходимо убедиться, что конфигурация поддерживает обработку CSS. Для Webpack потребуется css-loader и style-loader:

npm install css-loader style-loader --save-dev

В webpack.config.js добавляется правило:

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

После этого import 'intro.js/introjs.css' корректно обрабатывается сборщиком, и стили применяются в приложении.

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

Установка через npm позволяет легко управлять версиями:

  • Установка конкретной версии:
npm install intro.js@5.1.0 --save
  • Обновление до последней версии:
npm update intro.js

С помощью команды npm outdated можно проверить наличие новых версий библиотеки.

Преимущества установки через npm

  • Автоматическое управление зависимостями.
  • Лёгкая интеграция с современными сборщиками и фреймворками.
  • Возможность обновления до последних версий без изменения ссылок на внешние скрипты.
  • Полная поддержка модульного импорта и Tree Shaking, что уменьшает размер итогового бандла.

Пример использования после установки

import introJs from 'intro.js';
import 'intro.js/introjs.css';

const intro = introJs();
intro.setOptions({
  steps: [
    {
      element: '#step1',
      intro: 'Это первый шаг тура.'
    },
    {
      element: '#step2',
      intro: 'Это второй шаг.'
    }
  ],
  showBullets: true,
  exitOnOverlayClick: false
});

intro.start();

В этом примере создаётся тур с двумя шагами, с указанием элементов страницы и текста подсказок. Параметры, такие как showBullets и exitOnOverlayClick, задаются глобально через setOptions.

Использование npm для установки Intro.js обеспечивает современный подход к интеграции библиотеки, упрощает обновления и поддерживает модульную структуру проекта, делая код более управляемым и предсказуемым.

Оглавление