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

Подключение библиотеки в современном JavaScript-проекте

В большинстве современных веб-проектов управление зависимостями осуществляется через пакетные менеджеры. Наиболее распространёнными инструментами являются npm и Yarn. Оба менеджера позволяют устанавливать сторонние библиотеки из репозитория npm Registry, автоматически управлять версиями зависимостей и интегрировать их в систему сборки проекта.

Библиотека Interact.js распространяется как npm-пакет и может быть установлена напрямую в проект. После установки библиотека становится частью локальных зависимостей и может импортироваться в JavaScript-коде.

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

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

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

Если файл ещё не создан, выполняется команда:

npm init -y

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

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

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

npm install interactjs

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

  • пакет interactjs скачивается из npm Registry
  • библиотека помещается в каталог node_modules
  • запись о зависимости добавляется в package.json

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

{
  "dependencies": {
    "interactjs": "^1.10.17"
  }
}

Символ ^ означает, что пакетный менеджер может автоматически обновлять минорные версии, сохраняя совместимость API.

Установка как dev-зависимости

Иногда библиотека используется только на этапе разработки. В таких случаях зависимость помещается в раздел devDependencies.

Команда установки:

npm install interactjs --save-dev

В package.json появляется запись:

{
  "devDependencies": {
    "interactjs": "^1.10.17"
  }
}

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

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

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

project/
│
├── node_modules/
│   └── interactjs/
│
├── src/
│   └── index.js
│
├── package.json
└── package-lock.json

Файл package-lock.json фиксирует точные версии установленных пакетов и обеспечивает воспроизводимость установки зависимостей.

Импорт библиотеки в код

После установки Interact.js можно импортировать в JavaScript-модуль.

Импорт через ES Modules

import interact from 'interactjs';

Этот способ используется в большинстве современных проектов, особенно при работе с сборщиками:

  • Webpack
  • Vite
  • Rollup
  • Parcel

Импорт через CommonJS

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

const interact = require('interactjs');

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

Минимальный пример использования после установки:

import interact from 'interactjs';

interact('.draggable').draggable({
  listeners: {
    move(event) {
      const target = event.target;
      const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
      const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

      target.style.transform = `translate(${x}px, ${y}px)`;

      target.setAttribute('data-x', x);
      target.setAttribute('data-y', y);
    }
  }
});

Этот код подключает библиотеку и добавляет возможность перетаскивания элементам с классом .draggable.

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

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

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

yarn init -y

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

Основная команда установки:

yarn add interactjs

После установки Yarn:

  • скачивает пакет
  • добавляет его в node_modules
  • записывает зависимость в package.json
  • создаёт или обновляет файл yarn.lock

Пример записи:

{
  "dependencies": {
    "interactjs": "^1.10.17"
  }
}

Установка как dev-зависимости

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

yarn add interactjs --dev

Зависимость будет добавлена в раздел devDependencies.

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

project/
│
├── node_modules/
│   └── interactjs/
│
├── src/
│   └── app.js
│
├── package.json
└── yarn.lock

Файл yarn.lock фиксирует точные версии всех зависимостей и гарантирует одинаковую установку пакетов на разных машинах.

Различия между npm и Yarn при установке

Характеристика npm Yarn
Команда установки npm install interactjs yarn add interactjs
Файл блокировки package-lock.json yarn.lock
Скорость установки стандартная часто быстрее благодаря кешированию
Работа с зависимостями последовательная более эффективная параллельная установка

Несмотря на различия, обе системы устанавливают один и тот же пакет из одного репозитория.

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

Иногда требуется зафиксировать определённую версию Interact.js.

npm

npm install interactjs@1.10.17

Yarn

yarn add interactjs@1.10.17

После установки версия будет зафиксирована в package.json:

{
  "dependencies": {
    "interactjs": "1.10.17"
  }
}

Отсутствие символов ^ или ~ означает строгую привязку к указанной версии.

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

npm

npm list interactjs

Yarn

yarn list interactjs

Результат показывает установленную версию библиотеки и её положение в дереве зависимостей проекта.

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

npm

npm update interactjs

Yarn

yarn upgrade interactjs

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

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

Иногда требуется удалить библиотеку из проекта.

npm

npm uninstall interactjs

Yarn

yarn remove interactjs

После удаления:

  • пакет удаляется из node_modules
  • запись удаляется из package.json
  • обновляется файл блокировки зависимостей

Использование Interact.js в проектах со сборщиками

После установки библиотека может быть интегрирована в систему сборки.

Наиболее распространённые инструменты:

  • Webpack
  • Vite
  • Rollup
  • Parcel

В таких проектах Interact.js импортируется в основной модуль приложения:

import interact from 'interactjs';

Сборщик автоматически включит библиотеку в итоговый bundle.

Tree-shaking и оптимизация сборки

Interact.js распространяется как модуль, поддерживающий современные системы сборки. Это позволяет сборщикам применять tree-shaking — удаление неиспользуемого кода.

Однако Interact.js чаще используется как единый модуль, поэтому эффект tree-shaking может быть ограничен. Оптимизация обычно выполняется на уровне:

  • минификации кода
  • сжатия gzip или Brotli
  • разделения бандлов

Проверка корректной интеграции

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

Пример команды:

npm run dev

или

yarn dev

Если Interact.js установлен и импортирован корректно, библиотека будет доступна в коде и готова к использованию для реализации:

  • drag-and-drop интерфейсов
  • изменения размеров элементов
  • жестов и взаимодействий
  • динамических UI-компонентов.
Оглавление