Что такое Rollup

Вопрос

Что такое Rollup

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает принципы работы современных инструментов сборки, знает особенности Rollup и может сравнить его с другими сборщиками.

Ключевые тезисы

• Rollup — это модульный сборщик JavaScript-кода, который объединяет множество небольших модулей в один или несколько оптимизированных файлов.
• Основное преимущество Rollup — поддержка tree shaking, что позволяет удалять неиспользуемый код и минимизировать размер конечного бандла.
• Rollup часто используется для сборки библиотек, так как он создаёт чистый и эффективный код, поддерживающий стандарты ES6.
• Rollup конкурирует с другими сборщиками, такими как Webpack и Parcel, но отличается своей простотой и фокусом на модульность.

Подробный ответ

Rollup — это инструмент для сборки JavaScript-кода, который специализируется на объединении множества небольших модулей в один или несколько оптимизированных файлов. В отличие от других сборщиков, Rollup фокусируется на модульности и поддержке стандартов ES6, что делает его идеальным выбором для создания библиотек. Одним из ключевых преимуществ Rollup является поддержка tree shaking — процесса, который автоматически удаляет неиспользуемый код из финального бандла, что значительно уменьшает его размер. Это особенно важно для библиотек, где каждый килобайт на счету. Rollup конкурирует с такими инструментами, как Webpack и Parcel, но отличается своей простотой и эффективностью при работе с модулями.

Практические примеры

Пример 1

Пример настройки Rollup для сборки библиотеки:

// rollup.config.js
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

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

Эта конфигурация позволяет собрать модули из src/index.js в один файл dist/bundle.js в формате ES6.

Пример 2

Пример использования tree shaking в Rollup:

// src/utils.js
export function usedFunction() { return 'I am used'; }
export function unusedFunction() { return 'I am not used'; }

// src/index.js
import { usedFunction } from './utils';
console.log(usedFunction());

При сборке Rollup автоматически удалит unusedFunction, так как она не используется в коде.

Частые ошибки

• Игнорирование необходимости настройки плагинов для работы с CommonJS модулями. Rollup по умолчанию работает с ES6 модулями, и для поддержки CommonJS требуется плагин @rollup/plugin-commonjs.
• Неверное указание формата выходного файла (например, использование esm для проекта, который должен работать в браузере без поддержки модулей).

Связанные темы

• Webpack — другой популярный сборщик, который предлагает больше возможностей для сложных проектов.
• Tree shaking — процесс удаления неиспользуемого кода, который поддерживается не только Rollup, но и другими сборщиками.
• ES6 Modules — стандарт модулей в JavaScript, который Rollup использует по умолчанию.

Follow-up вопросы

В чём отличие Rollup от Webpack?

Уровень: basic

Rollup фокусируется на сборке библиотек и использует tree shaking для удаления неиспользуемого кода, что делает бандлы меньше. Webpack более универсален и подходит для сборки приложений, поддерживая больше функций, таких как горячая перезагрузка и разделение кода.

Как работает tree shaking в Rollup?

Уровень: intermediate

Tree shaking — это процесс удаления неиспользуемого кода при сборке. Rollup анализирует зависимости модулей и исключает те части кода, которые не используются в проекте, что уменьшает размер конечного бандла.

Какие плагины часто используются с Rollup?

Уровень: intermediate

В Rollup часто используются плагины для обработки TypeScript, Babel, минификации кода, работы с CSS и другими ресурсами. Например, @rollup/plugin-babel для транспиляции кода и rollup-plugin-terser для минификации.

Почему Rollup предпочитают для сборки библиотек?

Уровень: advanced

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

Какие ограничения есть у Rollup?

Уровень: advanced

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