Поля input и output: минимальный рабочий пример

Конфигурация Rollup строится вокруг двух фундаментальных сущностей: точки входа и описания результата сборки. Эти сущности задаются через поля input и output, которые формируют минимально необходимую структуру конфигурационного файла.

Поле input: точка входа графа зависимостей

Поле input определяет исходный модуль, с которого начинается построение графа зависимостей. Rollup анализирует импортируемые модули, рекурсивно собирая все связанные файлы в единое дерево.

На уровне конфигурации input может задаваться несколькими способами:

Строковое значение

Наиболее простой вариант — указание пути к входному файлу:

export default {
  input: 'src/main.js'
};

В этом случае Rollup воспринимает src/main.js как стартовую точку и начинает обход импортов от него.

Массив входных точек

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

export default {
  input: ['src/main.js', 'src/admin.js']
};

Каждый элемент массива становится отдельной точкой входа, что приводит к генерации нескольких бандлов (при соответствующей настройке output).

Объект с именованными входами

Более управляемая форма — объект, где ключи определяют имена выходных бандлов:

export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js'
  }
};

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

Поле output: описание результата сборки

Поле output определяет формат, структуру и место сохранения итогового бандла. Оно может быть объектом или массивом объектов, если требуется несколько вариантов сборки.

Минимальная конфигурация включает два ключевых параметра:

  • file — путь к выходному файлу
  • format — формат модуля

Минимальный пример конфигурации

Наиболее базовая конфигурация Rollup выглядит следующим образом:

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  }
};

В данной конфигурации:

  • input: 'src/main.js' задаёт стартовую точку анализа зависимостей
  • file: 'dist/bundle.js' указывает итоговый файл сборки
  • format: 'esm' определяет формат выходного модуля как ES Modules

Основные форматы output.format

Rollup поддерживает несколько форматов, каждый из которых определяет способ упаковки модулей:

ES Modules (esm)

Современный стандарт модульной системы:

output: {
  file: 'dist/bundle.js',
  format: 'esm'
}

Характеризуется сохранением import/export синтаксиса, если это возможно.

CommonJS (cjs)

Формат, используемый в Node.js:

output: {
  file: 'dist/bundle.cjs.js',
  format: 'cjs'
}

Все экспорты преобразуются в module.exports, импорты — в require.

IIFE

Самовызывающаяся функция, подходящая для браузера без сборщика:

output: {
  file: 'dist/bundle.iife.js',
  format: 'iife',
  name: 'MyLibrary'
}

Здесь обязательным становится поле name, так как оно формирует глобальный объект, в который будет помещён экспорт.

UMD

Универсальный формат, совместимый с AMD, CommonJS и глобальной областью:

output: {
  file: 'dist/bundle.umd.js',
  format: 'umd',
  name: 'MyLibrary'
}

Связь input и output в процессе сборки

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

На этапе анализа Rollup выполняет:

  1. Загрузку входного файла
  2. Разбор import и export
  3. Построение дерева зависимостей
  4. Удаление неиспользуемого кода (tree-shaking)
  5. Генерацию итогового бандла в соответствии с output

Мульти-вход и мульти-выход

При расширенной конфигурации возможно комбинирование нескольких входов и нескольких выходов:

export default [
  {
    input: 'src/main.js',
    output: {
      file: 'dist/main.esm.js',
      format: 'esm'
    }
  },
  {
    input: 'src/main.js',
    output: {
      file: 'dist/main.cjs.js',
      format: 'cjs'
    }
  }
];

Такая структура используется для публикации библиотек, поддерживающих разные среды выполнения.

Поведение output.file и output.dir

При единичном выходном файле используется file:

output: {
  file: 'dist/bundle.js',
  format: 'esm'
}

При нескольких входных точках или код-сплиттинге применяется dir:

export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js'
  },
  output: {
    dir: 'dist',
    format: 'esm'
  }
};

В этом случае Rollup генерирует набор файлов внутри директории dist.

Именование входов и влияние на output

При объектной форме input ключи влияют на структуру выходных файлов:

export default {
  input: {
    app: 'src/app.js',
    dashboard: 'src/dashboard.js'
  },
  output: {
    dir: 'dist',
    format: 'esm'
  }
};

Результатом становится генерация файлов, связанных с именами app и dashboard, что упрощает организацию сборки при масштабировании проекта.

Использование динамических путей

Хотя Rollup конфигурация обычно статична, input может формироваться программно:

import path from 'path';

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

Такой подход применяется при необходимости унификации путей или интеграции с внешними инструментами сборки.

Влияние input на tree-shaking

Структура входной точки напрямую определяет эффективность удаления неиспользуемого кода. Чем глубже и чище граф зависимостей, тем более точным становится tree-shaking.

Пример:

// src/main.js
import { used } from './utils.js';
used();
// src/utils.js
export function used() {}
export function unused() {}

Rollup исключает unused, поскольку она не достижима из input.

Минимальная конфигурация как фундамент сборки

Комбинация:

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  }
};

представляет базовый уровень абстракции Rollup, на котором строятся все расширенные сценарии: плагины, код-сплиттинг, multiple outputs, внешние зависимости и библиотечные сборки.

Роль input и output в архитектуре Rollup

input фиксирует точку начала анализа, превращая файловую структуру в направленный граф.

output определяет форму результата, задавая:

  • формат модуля
  • структуру файлов
  • стратегию упаковки

Связка этих двух параметров формирует минимальный контракт сборки, на котором основана вся модель работы Rollup.

Оглавление