Rollup

Сборщик проектов JavaScript.

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Rollup это сборщик проекта для JavaScript. Webpack более популярный, но, попробовав Rollup, многие разработчики остаются на нем.

Установка

Секция статьи "Установка"

Для установки требуется Node.js версии 8.0.0 или выше. Установить через npm нужно командой в консоли:

        
          
          npm install --global rollup
          npm install --global rollup

        
        
          
        
      

--global устанавливает пакет глобально, поэтому команды Rollup будут доступны из любой папки проекта.

Как пользоваться

Секция статьи "Как пользоваться"

🧑‍💻 По отзывам разработчиков Rollup проще и понятнее, чем Webpack.

Обычно Rollup используют из командной строки, но у него есть ещё и JavaScript API

Посмотреть список команд можно так:

        
          
          rollup --help
          rollup --help

        
        
          
        
      

А эта команда собирает бандл:

        
          
          # main.js - входная точка (entry point) вашего проекта;# bundle.js - имя будущего бандла;# скомпилируется в <script>, содержащий самозапускающуюся функцию ('iife');rollup main.js --file bundle.js --format iife
          # main.js - входная точка (entry point) вашего проекта;
# bundle.js - имя будущего бандла;
# скомпилируется в <script>, содержащий самозапускающуюся функцию ('iife');
rollup main.js --file bundle.js --format iife

        
        
          
        
      

Кстати, entry point в Rollup может быть не только файл .js, но и .html. Правда для этого нужен плагин, например rollup-plugin-html-entry.

Как настроить

Секция статьи "Как настроить"

Для настройки сборки нужно создать файл rollup.config.js в корне проекта. Пропишем в нем базовую настройку:

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

        
        
          
        
      

Для использования запустим команду:

        
          
          rollup -c
          rollup -c

        
        
          
        
      

Что умеет

Секция статьи "Что умеет"
  • пересобирает бандл в реальном времени при изменении кода;
  • проверяет синтаксис и форматирование кода;
  • может сделать из одного проекта несколько бандлов: для ES6, ES5 для старых браузеров, версию для Node.js;
  • убирает пробелы в коде для уменьшения веса файлов;
  • поддерживает плагины;
  • использует Tree Shaking;
  • использует разделение кода (code splitting);

Tree Shaking

Секция статьи "Tree Shaking"

Когда приложение разрастается, то найти вручную неиспользуемые строки становится сложно. Tree Shaking - это метод оптимизации, который анализирует и убирает лишний код. Это позволяет уменьшить вес и улучшить быстродействие приложения. Но работает он в довольно ограниченном количестве случаев.

Tree Shaking работает в Rollup по умолчанию и его не надо активировать как в Webpack.

Разделение кода (code splitting)

Секция статьи "Разделение кода (code splitting)"

Когда бандлер собрал большой проект в единый файл, может возникнуть проблема с долгой загрузкой. В таких случаях Rollup использует разделение кода (code splitting). Это значит, что код будет подгружаться постепенно и именно тот, который нужен сейчас пользователю - стратегия lazy load.