Настройка webpack и других сборщиков

Interact.js — это мощная библиотека для работы с интерактивными элементами на странице, поддерживающая drag-and-drop, масштабирование, поворот и другие взаимодействия. Для современного фронтенд-разработчика рекомендуется подключать библиотеку через пакетный менеджер, а не через <script> в HTML, чтобы использовать возможности сборщиков вроде Webpack или Vite.

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

npm install interactjs

или через Yarn:

yarn add interactjs

После установки библиотеку можно импортировать в проект:

import interact from 'interactjs';

Для проектов с CommonJS:

const interact = require('interactjs');

Конфигурация Webpack для Interact.js

Interact.js написан с поддержкой модулей ES6, поэтому при использовании Webpack важно убедиться, что сборщик корректно обрабатывает модули node_modules.

Правильная настройка Babel

Если проект использует Babel, необходимо добавить правило для трансформации ES6 в ES5:

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules\/(?!(interactjs)\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

Объяснение ключевых моментов:

  • exclude обычно исключает node_modules для ускорения сборки. Добавление interactjs в исключение с отрицанием (?!(interactjs)/) гарантирует, что библиотека будет транспилироваться, если она содержит ES6 код.
  • babel-loader обеспечивает совместимость с устаревшими браузерами.

Оптимизация сборки

Interact.js весит относительно немного, но при больших проектах имеет смысл использовать tree-shaking и минимизацию:

optimization: {
  usedExports: true,
  minimize: true,
},

Tree-shaking автоматически удаляет неиспользуемый код, что снижает размер итогового бандла.

Настройка Vite или других сборщиков

Для Vite достаточно стандартного импорта, поскольку Vite поддерживает ES-модули и автоматически оптимизирует node_modules.

import interact from 'interactjs';

При использовании Rollup также можно включить плагин @rollup/plugin-node-resolve для корректного разрешения модулей:

import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [resolve()],
};

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

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

npm install --save-dev @types/interactjs

и убедиться, что tsconfig настроен на поддержку ES6 модулей:

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es6",
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

Импорт в TypeScript будет идентичен Jav * aScript:

import interact from 'interactjs';

Работа с стилями и ассетами

Interact.js не требует собственных CSS, но при масштабировании и drag-and-drop часто используется динамическое управление стилями через JavaScript. Для Webpack можно настроить style-loader и css-loader, если проект применяет SCSS или CSS модули.

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

Советы по интеграции

  • Lazy loading: для больших страниц можно загружать Interact.js динамически через import(), чтобы уменьшить время первой загрузки.
  • Event delegation: если на странице много интерактивных элементов, рекомендуется использовать делегирование событий через interact(selector).on(...) вместо индивидуальной инициализации каждого элемента.
  • Совместимость с фреймворками: Vue, React и Svelte требуют аккуратной работы с жизненным циклом компонентов, чтобы правильно инициализировать и удалять обработчики Interact.js.

Примеры импорта и настройки

// Инициализация drag-and-drop
interact('.draggable')
  .draggable({
    inertia: true,
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true
      })
    ],
    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);
      }
    }
  });

Этот пример демонстрирует, как Webpack или любой сборщик корректно обрабатывает Interact.js, а также позволяет применять модификаторы и слушатели событий, что является базой для всех интерактивных функций библиотеки.

Оглавление