Rollup

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 работает в Rollup по умолчанию и его не надо активировать как в Webpack.

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