Учебник Rollup

Введение в Rollup
- Что такое Rollup и зачем он нужен
- Место Rollup среди других сборщиков: Webpack, Parcel, esbuild, Vite
- Философия tree-shaking и ES-модулей
- Когда выбирать Rollup, а когда нет
- Установка и первый запуск
Основы работы с Rollup
- Структура проекта и точка входа
- Базовая конфигурация через командную строку
- Конфигурационный файл rollup.config.js
- Поля input и output: минимальный рабочий пример
- Форматы вывода: esm, cjs, umd, iife, amd, system
- Работа с несколькими точками входа
- Понятие чанков и их автоматическое создание
- Исходные карты (source maps): inline, external, hidden
Формат вывода и совместимость
- ES-модули как целевой формат
- CommonJS: особенности и ограничения при сборке
- UMD и IIFE: сборка для браузера без модульной системы
- Именование глобальных переменных в UMD/IIFE
- Поле globals и внешние зависимости
- Одновременный вывод в несколько форматов
- Поле exports в package.json и связь со стратегией вывода
- Поля main, module, browser в package.json
Конфигурация в деталях
- Структура объекта конфигурации
- Множественные конфигурации в одном файле
- Асинхронная конфигурация
- Передача переменных окружения в конфиг
- Поле watch и режим наблюдения
- Поле output.entryFileNames, chunkFileNames, assetFileNames
- Поле output.dir и output.file: когда что использовать
- Поле output.preserveModules
- Поле output.inlineDynamicImports
- Поле output.generatedCode
- Поле output.freeze и output.esModule
- Поле output.interop
- Поле treeshake: тонкая настройка
- Поле external: функция и массив
- Поле resolve и поле context
- Поле onwarn: фильтрация предупреждений
Tree-shaking
- Принцип работы: статический анализ графа модулей
- Почему tree-shaking требует ES-модулей
- Побочные эффекты (side effects) и их влияние на встряску
- Поле sideEffects в package.json
- Аннотация /*#__PURE__*/
- Чистые функции и инлайнинг
- Проблемы с CommonJS и динамическими импортами
- Отладка: что попало в бандл и почему
- Настройки treeshake.moduleSideEffects
- Настройки treeshake.propertyReadSideEffects
- Настройки treeshake.unknownGlobalSideEffects
- Настройки treeshake.tryCatchDeoptimization
Плагины
- Архитектура плагинной системы Rollup
- Порядок вызова хуков и их типы
- Синхронные, асинхронные, параллельные и последовательные хуки
- Хук options
- Хук buildStart и buildEnd
- Хук resolveId
- Хук load
- Хук transform
- Хук moduleParsed
- Хук resolveDynamicImport
- Хук generateBundle
- Хук writeBundle и closeBundle
- Хук renderStart и renderChunk
- Хук banner, footer, intro, outro
- Хук augmentChunkHash
- Хук watchChange и closeWatcher
- Контекст плагина: this.parse, this.resolve, this.load
- this.emitFile и работа с ассетами
- this.getModuleInfo и this.getModuleIds
- this.warn и this.error
- Передача мета-информации между плагинами
Написание собственных плагинов
- Скелет плагина: функция, возвращающая объект
- Резолвинг модулей вручную
- Виртуальные модули
- Трансформация кода в хуке transform
- Инъекция кода через banner и footer
- Генерация дополнительных файлов через emitFile
- Работа с ассетами: эмиссия, референсы, финализация
- Взаимодействие между плагинами через meta
- Тестирование плагинов
- Публикация плагина в npm
Официальные плагины @rollup/plugin-*
- @rollup/plugin-node-resolve
- @rollup/plugin-commonjs
- @rollup/plugin-json
- @rollup/plugin-typescript
- @rollup/plugin-babel
- @rollup/plugin-terser
- @rollup/plugin-replace
- @rollup/plugin-alias
- @rollup/plugin-url
- @rollup/plugin-image
- @rollup/plugin-wasm
- @rollup/plugin-virtual
- @rollup/plugin-inject
- @rollup/plugin-strip
- @rollup/plugin-dynamic-import-vars
- @rollup/plugin-multi-entry
Сборка библиотек
- Отличие сборки библиотеки от сборки приложения
- Стратегия вывода: dual package (ESM + CJS)
- Поле exports в package.json: условные экспорты
- Поле types и декларации TypeScript
- Вынесение зависимостей в external
- Поле peerDependencies и его связь с external
- Bundling vs unbundling: когда оставлять модули раздельными
- output.preserveModules для публикации исходной структуры
- Встраивание полифилов
- Минификация в библиотечном контексте
- Генерация деклараций типов совместно со сборкой
TypeScript
- Интеграция через @rollup/plugin-typescript
- Настройка tsconfig.json для Rollup
- Генерация .d.ts файлов
- Поддержка path aliases
- Совместная работа с Babel
- Декораторы и экспериментальные фичи
- Проверка типов в процессе сборки и вне неё
Работа с CSS и статическими ресурсами
- Подключение CSS через плагины
- rollup-plugin-postcss: конфигурация и возможности
- Инжекция стилей в DOM
- Извлечение CSS в отдельный файл
- Обработка изображений и шрифтов
- Встраивание ресурсов в base64
- Хеширование имён файлов ресурсов
Динамические импорты и code splitting
- Синтаксис import() и его поддержка в Rollup
- Автоматический code splitting при наличии нескольких точек входа
- Явный code splitting через manualChunks
- manualChunks как функция
- Оптимизация общих зависимостей
- Именование динамических чанков
- Проблема циклических зависимостей при сплиттинге
- Ленивая загрузка в браузере
- Связь code splitting с форматом вывода
Обработка зависимостей
- Резолвинг модулей: алгоритм поиска
- node_modules и плагин node-resolve
- Bundled vs external зависимости
- Circular dependencies: обнаружение и разрешение
- Дедупликация модулей
- Работа с монорепозиторием и локальными пакетами
- Разрешение путей с алиасами
- Shimming глобальных переменных (process, Buffer и др.)
Режим watch
- Запуск в режиме наблюдения
- Поле watch в конфигурации
- watch.include и watch.exclude
- watch.clearScreen и watch.buildDelay
- watch.skipWrite
- Хуки watchChange и closeWatcher
- Интеграция с livereload и dev-серверами
- Ограничения watch-режима
Оптимизация и производительность сборки
- Измерение времени сборки
- Кеширование через поле cache
- Параллельная обработка через worker threads
- Минимизация количества трансформаций
- Влияние плагинов на скорость
- Анализ размера бандла: rollup-plugin-visualizer
- Стратегии уменьшения размера финального бандла
Интеграция с экосистемой
- Rollup как ядро Vite
- Использование Rollup внутри других инструментов
- Программный API Rollup
- rollup.rollup() и bundle.generate() / bundle.write()
- rollup.watch() через API
- Встраивание Rollup в скрипты сборки
- Интеграция с CI/CD
Программный API
- Импорт и инициализация
- Тип InputOptions и OutputOptions
- rollup.rollup(): сборка и получение объекта bundle
- bundle.generate(): генерация вывода в памяти
- bundle.write(): запись на диск
- bundle.watchFiles: список отслеживаемых файлов
- bundle.close(): освобождение ресурсов
- rollup.watch(): объект watcher и его события
- Обработка ошибок и предупреждений через API
- Типизация API при использовании TypeScript
Безопасность и надёжность сборки
- Проверка целостности зависимостей
- Исключение чувствительных данных из бандла
- Анализ лицензий зависимостей
- Воспроизводимые сборки
Отладка
- Интерпретация ошибок и предупреждений Rollup
- Предупреждение CIRCULAR_DEPENDENCY
- Предупреждение THIS_IS_UNDEFINED
- Предупреждение UNRESOLVED_IMPORT
- Предупреждение MISSING_GLOBAL_NAME
- Предупреждение EVAL и его последствия
- Использование source maps для отладки в браузере
- Инспекция графа модулей через API
- Логирование внутри плагинов
Миграция и обновление
- Переход с Rollup 2 на Rollup 3
- Переход с Rollup 3 на Rollup 4
- Изменения в API плагинов между версиями
- Обновление сторонних плагинов
- Совместимость с устаревшими CommonJS-пакетами
- Постепенная миграция проекта с Webpack на Rollup