Сборка с Rollup

Для работы с Umbrella JS в современных проектах часто используют Rollup как сборщик модулей. Он позволяет создавать оптимизированные бандлы с минимальным размером, поддерживает Tree Shaking и легко интегрируется с ES-модулями.

Первым шагом является инициализация проекта и установка необходимых зависимостей:

npm init -y
npm install rollup rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev
npm install umbrella-js

rollup — основной сборщик.
@rollup/plugin-node-resolve — позволяет Rollup находить зависимости в node_modules.
@rollup/plugin-commonjs — конвертирует CommonJS-модули в формат ES6.
rollup-plugin-terser — минимизация итогового кода.

Далее создаётся структура проекта:

project/
│
├─ src/
│  └─ index.js
├─ dist/
├─ rollup.config.js
└─ package.json

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

Файл rollup.config.js содержит правила сборки и подключение плагинов. Пример минимальной конфигурации для Umbrella JS:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',       // входной файл
  output: {
    file: 'dist/bundle.js',    // итоговый бандл
    format: 'iife',            // формат для браузера
    name: 'App',               // глобальное имя объекта
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()                   // минификация
  ]
};

input — основной файл приложения.
output.file — путь к сгенерированному файлу.
format: iife используется для браузерного окружения, esm для модульной системы.
sourcemap: true позволяет дебажить исходный код в браузере.

Интеграция Umbrella JS

Umbrella JS распространяется как модуль ES6, поэтому его можно подключать напрямую через import. В src/index.js:

import u from 'umbrella-js';

const buttons = u('button');
buttons.on('click', function() {
    console.log('Нажата кнопка:', this.textContent);
});

u('селектор') — основной способ выбора элементов.
on('событие', callback) — привязка обработчика.
Umbrella поддерживает цепочку методов, аналогично jQuery:

u('.list-item')
  .addClass('active')
  .css('color', 'red');

Использование ES-модулей и Tree Shaking

Rollup автоматически оптимизирует импорт Umbrella JS, исключая неиспользуемые методы. Например:

import u from 'umbrella-js';

u('p').addClass('highlight');

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

Работа с плагинами Rollup

resolve() — находит Umbrella JS в node_modules.
commonjs() — преобразует модули CommonJS в ES6, если какая-то библиотека использует старый формат.
terser() — минимизирует код, убирая пробелы, комментарии и сокращая имена переменных.

Дополнительно можно использовать плагин rollup-plugin-serve для локального сервера и rollup-plugin-livereload для автоматической перезагрузки при изменении кода.

Сборка проекта

Добавление скриптов в package.json упрощает сборку:

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w"
}

npm run build — статическая сборка.
npm run dev — запуск в режиме наблюдения, пересборка при изменении файлов.

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

После сборки файл dist/bundle.js подключается стандартным тегом <script>:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Umbrella JS + Rollup</title>
</head>
<body>
    <button>Нажми меня</button>
    <script src="dist/bundle.js"></script>
</body>
</html>

iife-формат гарантирует, что объект App будет доступен глобально, а все зависимости будут встроены в бандл.