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

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

Предварительные требования

Для установки через npm необходима установленная среда Node.js. Проверка доступности выполняется командами:

node -v
npm -v

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

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

Если проект ещё не содержит файла package.json, его необходимо создать. Это делается с помощью команды:

npm init -y

Файл package.json служит центральной точкой управления зависимостями и скриптами проекта.

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

Добавление библиотеки осуществляется одной командой:

npm install driver.js

После выполнения команда автоматически:

скачивает библиотеку из npm-реестра
добавляет её в директорию node_modules
фиксирует зависимость в package.json (в разделе dependencies)

Пример записи в package.json:

{
  "dependencies": {
    "driver.js": "^1.0.0"
  }
}

Структура после установки

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

project/
│
├── node_modules/
│   └── driver.js/
│
├── package.json
└── package-lock.json

node_modules/driver.js — исходный код библиотеки
package-lock.json — фиксирует точные версии зависимостей

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

Driver.js поддерживает модульную систему ES Modules, поэтому импорт выполняется стандартным способом:

import Driver from "driver.js";
import "driver.js/dist/driver.css";

Здесь:

первый импорт подключает JavaScript-логику
второй — стили, необходимые для корректного отображения интерфейса

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

В проектах с использованием CommonJS (например, старые конфигурации Node.js) применяется синтаксис:

const Driver = require("driver.js");
require("driver.js/dist/driver.css");

Однако в современных фронтенд-сборках (Webpack, Vite, Parcel) предпочтение отдаётся ES Modules.

Подключение стилей

Driver.js требует обязательного подключения CSS. Возможны два подхода:

Через импорт в Jav * aScript:

import "driver.js/dist/driver.css";

Через CSS-файл проекта:

@import "driver.js/dist/driver.css";

Отсутствие стилей приводит к некорректному отображению подсказок и оверлея.

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

Минимальный пример инициализации:

import Driver from "driver.js";
import "driver.js/dist/driver.css";

const driver = new Driver();

driver.highlight({
  element: "#example",
  popover: {
    title: "Заголовок",
    description: "Описание элемента"
  }
});

Если при запуске:

отсутствуют ошибки импорта
отображается затемнение экрана
появляется всплывающее окно

— установка выполнена корректно.

Использование с системами сборки

Webpack

Дополнительной настройки обычно не требуется. Важно наличие загрузчика CSS:

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

Конфигурация:

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

Vite

Vite поддерживает импорт CSS «из коробки», поэтому достаточно стандартного подключения:

import "driver.js/dist/driver.css";

Parcel

Parcel также автоматически обрабатывает CSS, дополнительная конфигурация не требуется.

Обновление библиотеки

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

npm update driver.js

Или принудительное обновление до последней версии:

npm install driver.js@latest

Удаление библиотеки

Удаление зависимости:

npm uninstall driver.js

После этого:

запись удаляется из package.json
папка удаляется из node_modules

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

Иногда требуется фиксированная версия библиотеки:

npm install driver.js@1.0.0

Это особенно важно при:

поддержке старых проектов
избежании несовместимостей после обновлений

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

Driver.js предоставляет типы, но при необходимости можно установить их отдельно:

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

Пример использования:

import Driver from "driver.js";

const driver: Driver = new Driver();

Возможные ошибки и их устранение

Ошибка: module not found

Проверка наличия пакета в node_modules
Повторная установка: npm install

Отсутствие стилей

Проверка импорта CSS
Проверка работы CSS-loader

Конфликт версий

Удаление node_modules и package-lock.json
Повторная установка:

rm -rf node_modules package-lock.json
npm install