Rollup.js : введение в сборщик JavaScript

Rollup.js — это сборщик модулей JavaScript нового поколения от Рича Харриса, автора Svelte. Он компилирует несколько исходных файлов в один пакет.

Преимущества включают:

• легче управлять разработкой при использовании небольших, автономных исходных файлов
• исходный код можно дополнить, предопределить и проверить синтаксис во время сборки
• встряхивание дерева удаляет неиспользуемые функции
• возможен перенос на ES5 для обратной совместимости
• может быть создано несколько выходных файлов — например, ваша библиотека может быть предоставлена ​​в модулях ES5, ES6 и CommonJS, совместимом с Node.js
• производственные пакеты могут быть уменьшены, а ведение журнала удалено

Другие варианты связки, такие как webpack, Snowpack и Parcel, пытаются волшебным образом справиться со всем: создание HTML-шаблонов, оптимизация изображений, обработка CSS, объединение JavaScript и многое другое. Это хорошо работает, когда вас устраивают настройки по умолчанию, но пользовательские конфигурации могут быть трудными, а обработка выполняется медленнее.

Rollup.js в первую очередь ориентирован на JavaScript (хотя есть плагины для HTML-шаблонов и CSS). У него ошеломляющее количество опций, но его легко начать, а комплектация выполняется быстро. В этом руководстве объясняется, как использовать типичные конфигурации в ваших собственных проектах.

Установите Rollup.js

Rollup.js требует Node.js v8.0.0 или выше и может быть установлен глобально с помощью:

npm install rollup --global

Это позволяет rollupзапускать команду в любом каталоге проекта, содержащем файлы JavaScript, например в PHP, WordPress, Python, Ruby или другом проекте.

Однако, если вы работаете в большой команде, создающей проект Node.js, может быть предпочтительнее установить Rollup.js локально, чтобы гарантировать, что все разработчики используют одну и ту же версию. Предполагая, что у вас есть существующий package.jsonфайл Node.js в папке проекта, запустите:

npm install rollup --save-dev

Вы не сможете запустить rollupкоманду напрямую, но npx rollupее можно использовать. Как вариант, rollupв package.json «scripts» раздел можно добавить команды. Например:

"scripts": {
  "watch": "rollup ./src/main.js --file ./build/bundle.js --format es --watch",
  "build": "rollup ./src/main.js --file ./build/bundle.js --format es",
  "help": "rollup --help"
},

Эти скрипты могут быть выполнены, npm run <scriptname> например, с npm run watch.

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

Примеры файлов

Файлы примеров и конфигурации Rollup.js можно загрузить с GitHub. Это проект Node.js, поэтому запустите его npm installпосле клонирования и просмотрите README.mdфайл для получения инструкций. Обратите внимание, что Rollup.js и все плагины устанавливаются локально.

Кроме того, вы можете создать исходные файлы вручную после инициализации нового проекта Node.js с помощью npm init. Следующие модули ES6 создают цифровые часы реального времени, используемые для демонстрации обработки Rollup.js.

src/main.jsэто основной сценарий точки входа. Он находит элемент DOM и каждую секунду запускает функцию, которая устанавливает для его содержимого текущее время:

import * as dom from './lib/dom.js';
import { formatHMS } from './lib/time.js';

// get clock element
const clock = dom.get('.clock');

if (clock) {

  console.log('initializing clock');

  // update clock every second
  setInterval(() => {

    clock.textContent = formatHMS();

  }, 1000);

}

src/lib/dom.js это небольшая служебная библиотека DOM:

// DOM libary

// fetch first node from selector
export function get(selector, doc = document) {
  return doc.querySelector(selector);
}

// fetch all nodes from selector
export function getAll(selector, doc = document) {
  return doc.querySelectorAll(selector);
}

и src/lib/time.jsпредоставляет функции форматирования времени:

// time formatting

// return 2-digit value
function timePad(n) {
  return String(n).padStart(2, '0');
}

// return time in HH:MM format
export function formatHM(d = new Date()) {
  return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
}

// return time in HH:MM:SS format
export function formatHMS(d = new Date()) {
  return formatHM(d) + ':' + timePad(d.getSeconds());
}

Код часов можно добавить на веб-страницу, создав элемент HTML с clockклассом и загрузив скрипт как модуль ES6:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rollup.js testing</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script type="module" src="./src/main.js"></script>
</head>
<body>

  <h1>Clock</h1>

  <time class="clock"></time>

</body>
</html>

Rollup.js предоставляет возможности для оптимизации исходных файлов JavaScript.

Rollup.js: быстрый старт

Следующая команда может быть запущена из корня папки проекта для обработки src/main.jsи её зависимостей:

npx rollup ./src/main.js --file ./build/bundle.js --format iife

Выводится единственный скрипт в build/bundle.js. Он содержит весь код, но обратите внимание, что неиспользуемые зависимости, такие как getAll()функция в src/lib/dom.js, были удалены:

(function () {
  'use strict';

  // DOM libary

  // fetch first node from selector
  function get(selector, doc = document) {
    return doc.querySelector(selector);
  }

  // time library

  // return 2-digit value
  function timePad(n) {
    return String(n).padStart(2, '0');
  }

  // return time in HH:MM format
  function formatHM(d = new Date()) {
    return timePad(d.getHours()) + ':' + timePad(d.getMinutes());
  }

  // return time in HH:MM:SS format
  function formatHMS(d = new Date()) {
    return formatHM(d) + ':' + timePad(d.getSeconds());
  }

  // get clock element
  const clock = get('.clock');

  if (clock) {

    console.log('initializing clock');

    setInterval(() => {

      clock.textContent = formatHMS();

    }, 1000);

  }

}());

<script> Теперь можно изменить HTML- код для ссылки на связанный файл:

<script type="module" src="./build/bundle.js"></script>

Примечание: type=»module»больше не требуется, поэтому сценарий должен работать в старых браузерах, которые поддерживают ранние реализации ES6. Вы также должны добавить deferатрибут, чтобы сценарий запускался после того, как DOM будет готов (это происходит по умолчанию в модулях ES6).

Rollup.js предлагает множество флагов командной строки. В следующих разделах описаны наиболее полезные параметры.

Справка по Rollup.js

Параметры командной строки Rollup можно просмотреть с помощью флага —helpили -h:

npx rollup --help

Версия Rollup.js может быть выведена с помощью —versionили -v:

npx rollup --version

Выходной файл

—file(Или -oфлаг) определяет расслоение файл вывода, который установлен на./build/bundle.jsвыше. Если файл не указан, полученный пакет отправляется в stdout.

Форматирование JavaScript

Rollup.js предоставляет несколько —format (или -f) параметров для настройки итогового пакета:

Вариант	Описание
iife	заключить код в (function () {… }());блок выражения немедленно вызываемой функции, чтобы он не конфликтовал с другими библиотеками
es6	стандартный ES6
cjs	CommonJS для Node.js
umd	Универсальное определение модуля для использования как на клиенте, так и на сервере
amd	Определение асинхронного модуля
system	Модули SystemJS

Если вы не используете конкретную модульную систему, iifeэто будет лучшим вариантом для клиентского JavaScript. es6создаст немного меньший пакет, но будьте осторожны с глобальными переменными и функциями, которые могут конфликтовать с другими библиотеками.

Вывод исходной карты

Исходная карта обеспечивает обратную ссылку на исходные файлы, чтобы их можно было изучить в инструментах разработчика браузера. Это упрощает установку точек останова или обнаружение проблем при возникновении ошибок.

Внешнюю исходную карту можно создать, добавив —sourcemapфлаг к rollup команде:

npx rollup ./src/main.js --file ./build/bundle.js --format iife --sourcemap

Это создаёт дополнительный /build/bundle.js.map файл. Вы можете просмотреть его, хотя это в основном тарабарщина и не предназначена для употребления в пищу! На карту имеется ссылка в виде комментария в конце./build/bundle.js:

//# sourceMappingURL=bundle.js.map

Кроме того, вы можете создать встроенную исходную карту с помощью —sourcemap inline. Вместо создания дополнительного файла версия исходной карты в кодировке base64 добавляется к./build/bundle.js:

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY...etc...

После создания исходной карты вы можете загрузить пример страницы, которая ссылается на сценарий. Откройте инструменты разработчика и перейдите на вкладку » Источники » в браузерах на базе Chrome или на вкладку » Отладчик » в Firefox. Вы увидите исходный srcкод и номера строк.

Просмотр файлов и автоматическое объединение

—watch(Или -w) флаг отслеживает исходные файлы для изменения и автоматически создаёт пакет. Экран терминала очищается при каждом запуске, но вы можете отключить это с помощью —no-watch.clearScreen:

npx rollup ./src/main.js --file ./build/bundle.js --format iife --watch --no-watch.clearScreen

Создать файл конфигурации

Флаги командной строки могут быстро стать громоздкими. Приведённых выше примеров уже много, и вы ещё не начали добавлять плагины!

Rollup.js может использовать файл конфигурации JavaScript для определения параметров связывания. Имя по умолчанию — rollup.config.jsи его следует поместить в корень вашего проекта (обычно в каталог, из которого вы запускаете rollup).

Файл представляет собой модуль ES, который экспортирует объект по умолчанию, который задаёт параметры Rollup.js. Следующий код копирует использованные выше команды:

// rollup.config.js

export default {

  input: './src/main.js',

  output: {
    file: './build/bundle.js',
    format: 'iife',
    sourcemap: true
  }

}

Примечание: sourcemap: trueопределяет внешнюю карту источников. Используется sourcemap: ’inline’для встроенной карты источников.

Вы можете использовать этот файл конфигурации во время работы rollup, установив флаг —config(или -c):

npx rollup --config

Имя файла можно передать, если вы назвали конфигурацию чем-то другим, кроме rollup.config.js. Это может быть практично, когда у вас есть несколько конфигураций, возможно, расположенных в configкаталоге. Например:

npx rollup --config ./config/rollup.simple.js

Автоматическое объединение

watchпараметры можно установить в файле конфигурации. Например:

// rollup.config.js

export default {

  input: './src/main.js',

  watch: {
    include: './src/**',
    clearScreen: false
  },

  output: {
    file: './build/bundle.js',
    format: 'iife',
    sourcemap: true
  }

}

Однако —watchпри вызове всё же необходимо добавить флаг rollup:

npx rollup --config --watch

Обработка нескольких пакетов

Приведённый выше файл конфигурации возвращает один объект для обработки одного входного файла и его зависимостей. Вы также можете вернуть массив объектов для определения нескольких операций ввода и вывода:

// rollup.config.js

export default [

  {

    input: './src/main.js',

    output: {
      file: './build/bundle.js',
      format: 'iife',
      sourcemap: true
    }

  },

  {

    input: './src/another.js',

    output: {
      file: './build/another.js',
      format: 'es'
    }

  },

]

Может быть целесообразно определить массив даже при возврате одного объекта. Это упростит добавление дальнейших процессов позже.

Использование переменных среды

Файл конфигурации — это JavaScript, поэтому настройки могут быть изменены в соответствии с любыми факторами окружающей среды. Например, вы можете захотеть, чтобы сборка скриптов немного отличалась при запуске на вашей машине разработки или производственном сервере.

Следующая конфигурация обнаруживает NODE_ENVпеременную среды и удаляет исходную карту, если для неё установлено значение production:

// Rollup.js development and production configurations
const dev = (process.env.NODE_ENV !== 'production');

console.log(`running in ${ dev ? 'development' : 'production' } mode`);

const sourcemap = dev ? 'inline' : false;

export default [

  {

    input: './src/main.js',

    watch: {
      clearScreen: false
    },

    output: {
      file: './build/bundle.js',
      format: 'iife',
      sourcemap
    }

  }

]

Значение NODE_ENVможно установить из командной строки в macOS или Linux:

NODE_ENV=production

Это cmd приглашение Windows:

set NODE_ENV=production

Для Windows Powershell:

$env:NODE_ENV="production"

Однако Rollup.js также позволяет вам временно устанавливать / переопределять переменные среды в —environmentфлаге. Например:

npx rollup --config --environment VAR1,VAR2:value2,VAR3:x

process.env затем можно просмотреть в файле конфигурации:

• process.env.VAR1 является true
• process.env.VAR2 является value2
• process.env.VAR3 является x

В приведённом выше сценарии конфигурации по умолчанию используется режим разработки, но рабочий режим (без исходной карты) можно запустить с помощью:

npx rollup --config --environment NODE_ENV:production

Плагины Rollup.js

Rollup.js имеет обширный набор плагинов, дополняющих процесс объединения и вывода. Вы найдёте различные варианты для внедрения кода, компиляции TypeScript, файлов lint и даже запуска обработки HTML и CSS.

Использование плагина похоже на использование других проектов Node.js. Вы должны установить подключаемый модуль, а затем указать его в pluginмассиве в файле конфигурации Rollup.js. В следующих разделах описаны несколько наиболее часто используемых плагинов.

Используйте модули npm

Многие библиотеки JavaScript упакованы в виде модулей CommonJS, которые можно установить с помощью npm. Rollup.js может включать такие скрипты в пакеты со следующими плагинами:

1. node-resolve, который находит модуль в node_modulesкаталоге проекта
2. plugin-commonjs, который при необходимости преобразует модули CommonJS в ES6.

Установите их в свой проект:

npm install @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev

Вместо того чтобы использовать время функции форматирования в src/lib/time.js, можно добавить более полную дату / обработка библиотеки, такие как время day.js. Установите его с помощью npm:

npm install dayjs --save-dev

Затем измените src/main.jsсоответствующим образом:

import * as dom from './lib/dom.js';
import dayjs from 'dayjs';

// get clock element
const clock = dom.get('.clock');

if (clock) {

  console.log('initializing clock');

  setInterval(() => {

    clock.textContent = dayjs().format('HH:mm:ss');

  }, 1000);

}

rollup.config.jsнеобходимо обновить, чтобы включить и использовать плагины в новом pluginsмассиве:

// Rollup.js with npm modules
import { nodeResolve as resolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

const
  dev = (process.env.NODE_ENV !== 'production'),
  sourcemap = dev ? 'inline' : false;

console.log(`running in ${ dev ? 'development' : 'production' } mode`);

export default [

  {

    input: './src/main.js',

    watch: {
      clearScreen: false
    },

    plugins: [
      resolve({
        browser: true
      }),
      commonjs()
    ],

    output: {
      file: './build/bundle.js',
      format: 'iife',
      sourcemap
    }

  }

];

Запустите Rollup.js как раньше:

npx rollup --config

Теперь вы обнаружите, что day.jsкод был включён в build/bundle.js.

Когда вы убедитесь, что он работает, src/main.jsвернитесь к исходной локальной библиотеке кода, поскольку она используется в следующих разделах. Тебе rollup.config.jsне нужно меняться.

Заменить токены

Часто бывает полезно передавать переменные конфигурации во время сборки, чтобы они были жёстко запрограммированы в связанном сценарии. Например, вы можете создать файл JSON с маркерами дизайна, которые определяют цвета, шрифты, интервалы, селекторы или любые другие настройки, которые можно применить к HTML, CSS или JavaScript.

Плагин замены Rollup.js может заменить любую ссылку в ваших скриптах. Установите его с помощью:

npm install @rollup/plugin-replace --save-dev

Измените, rollup.config.jsчтобы импортировать плагин и определить tokensобъект, который передаётся replace()функции в pluginsмассиве. В этом примере вы можете изменить селектор часов ( __CLOCKSELECTOR__), обновить интервал времени ( __CLOCKINTERVAL__) и функцию форматирования времени ( __CLOCKFORMAT__):

// Rollup.js configuration
import { nodeResolve as resolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';

const
  dev = (process.env.NODE_ENV !== 'production'),
  sourcemap = dev ? 'inline' : false,

  // web design token replacements
  tokens = {
    __CLOCKSELECTOR__: '.clock',
    __CLOCKINTERVAL__: 1000,
    __CLOCKFORMAT__: 'formatHMS'
  };

console.log(`running in ${ dev ? 'development' : 'production' } mode`);

export default [

  {

    input: './src/main.js',

    watch: {
      clearScreen: false
    },

    plugins: [
      replace(tokens),
      resolve({
        browser: true
      }),
      commonjs()
    ],

    output: {
      file: './build/bundle.js',
      format: 'iife',
      sourcemap
    }

  }

];

src/main.jsнеобходимо изменить, чтобы использовать эти токены. Строки замены можно применять где угодно — даже как имена функций или importссылки:

import * as dom from './lib/dom.js';
import { __CLOCKFORMAT__ } from './lib/time.js';

// get clock element
const clock = dom.get('__CLOCKSELECTOR__');

if (clock) {

  console.log('initializing clock');

  setInterval(() => {

    clock.textContent = __CLOCKFORMAT__();

  }, __CLOCKINTERVAL__);

}

Запустите, npx rollup —configи вы обнаружите, что build/bundle.jsон идентичен предыдущему, но теперь его можно изменить, изменив файл конфигурации Rollup.js.

Транспортировка на ES5

Современный JavaScript работает в современных браузерах. К сожалению, это не относится к более старым приложениям, таким как IE11. Многие разработчики используют такие решения, как Babel, для преобразования ES6 в обратно совместимую альтернативу ES5.

У меня смешанные чувства по поводу создания пакетов ES5:

1. В декабре 2020 года рыночная доля IE11 составляла менее 1%. Инклюзивность — это здорово, но разве лучше сосредоточиться на доступности и производительности, чем на браузере десятилетней давности?
2. Устаревшие браузеры могут поддерживаться, если будут приняты прогрессивные улучшения. Эти браузеры могут не запускать какой-либо JavaScript, но сайт по-прежнему может предлагать определённый уровень функциональности HTML и CSS.
3. Пакеты ES5 могут быть значительно больше, чем ES6. Должны ли современные браузеры получать менее эффективный сценарий?

Двигаясь в будущее, я предлагаю вам объединить только ES6, а старые (более медленные) браузеры полагаются только на HTML и CSS. Это не всегда возможно — например, когда у вас сложное приложение с большой долей пользователей IE11. В таких ситуациях рассмотрите возможность создания пакетов ES6 и ES5 и обслуживания соответствующего сценария.

Rollup.js предлагает плагин, который использует Bublé для переноса на ES5. Проект находится в режиме обслуживания, но всё ещё хорошо работает.

Примечание: вот цитата из репозитория проекта: «Bublé был создан, когда ES2015 был ещё будущим. В настоящее время все современные браузеры поддерживают ES2015 и (в некоторых случаях) не только. Если вам не нужна поддержка IE11, вам, вероятно, не нужно использовать Bublé для преобразования вашего кода в ES5 ».

Установите плагин, чтобы вы могли выводить как модули ES6, так и ES5:

npm install @rollup/plugin-buble --save-dev

Перед изменением конфигурации padStart()используемая функция String src/lib/time.jsне реализована в старых браузерах. Можно использовать простой полифилл, добавив в новый src/lib/polyfill.jsфайл следующий код:

// String.padStart polyfill
if (!String.prototype.padStart) {

  String.prototype.padStart = function padStart(len, str) {

    var t = String(this);
    len = len || 0;
    str = str || ' ';
    while (t.length < len) t = str + t;
    return t;

  };

}

Этот полифилл не требуется в ES6, поэтому вам нужен способ внедрения его только в код ES5. К счастью, вы уже установили плагин замены, поэтому его можно использовать для решения этой задачи.

Добавьте __POLYFILL__токен вверху src/main.js:

__POLYFILL__
import * as dom from './lib/dom.js';
import { __CLOCKFORMAT__ } from './lib/time.js';

// rest of code...

Затем установите его в конфигурации Rollup.js в «plugins» массиве ES5:

// Rollup.js configuration
import replace from '@rollup/plugin-replace';
import { nodeResolve as resolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import buble from '@rollup/plugin-buble';

// settings
const
  dev = (process.env.NODE_ENV !== 'production'),
  sourcemap = dev ? 'inline' : false,

  input = './src/main.js',

  watch = { clearScreen: false },

  tokens = {
    __CLOCKSELECTOR__: '.clock',
    __CLOCKINTERVAL__: 1000,
    __CLOCKFORMAT__: 'formatHMS'
  };

console.log(`running in ${ dev ? 'development' : 'production' } mode`);

export default [

  {
    // ES6 output
    input,
    watch,

    plugins: [
      replace({
        ...tokens,
        __POLYFILL__: '' // no polyfill for ES6
      }),
      resolve({ browser: true }),
      commonjs()
    ],

    output: {
      file: './build/bundle.mjs',
      format: 'iife',
      sourcemap
    }

  },

  {
    // ES5 output
    input,
    watch,

    plugins: [
      replace({
        ...tokens,
        __POLYFILL__: "import './lib/polyfill.js';" // ES5 polyfill
      }),
      resolve({ browser: true }),
      commonjs(),
      buble()
    ],

    output: {
      file: './build/bundle.js',
      format: 'iife',
      sourcemap
    }

  }

];

Выполните сборку сценариев npx rollup —configES6 build/bundle.mjsи ES5 build/bundle.js. Соответственно необходимо изменить HTML-файл:

<script type="module" src="./build/bundle.mjs"></script>
<script nomodule src="./build/bundle.js" defer></script>

Современные браузеры загружают и запускают ES6, содержащийся в./build/bundle.mjs. Старые браузеры загружают и запускают скрипт ES5 (плюс polyfill), содержащийся в./build/bundle.js.

Транспортировка с Babel

Bublé проще, быстрее и менее суетливо, но Babel можно использовать, если вам нужен конкретный вариант. Установите следующие плагины:

npm install @rollup/plugin-babel @babel/core @babel/preset-env --save-dev

Затем включите Babel в свой файл конфигурации:

import { getBabelOutputPlugin } from '@rollup/plugin-babel';

Затем добавьте этот код в свой pluginsмассив:

   plugins: [
      getBabelOutputPlugin({
        presets: ['@babel/preset-env']
      })
    ],

Также output.formatнеобходимо изменить на esили cjsперед запуском.

Минимизировать вывод

Великолепный минификатор Terser может сжимать код, оптимизируя операторы и удаляя пробелы, комментарии и другие ненужные символы. Результаты могут быть впечатляющими. Даже в этом небольшом примере вывод Rollup.js (который уже создал меньший пакет) можно уменьшить ещё на 60%.

Установите плагин Rollup.js Terser с помощью:

npm install rollup-plugin-terser --save-dev

Затем импортируйте его в начало файла конфигурации Rollup.js:

import { terser } from 'rollup-plugin-terser';

Terser — это плагин вывода, который обрабатывается после того, как Rollup.js завершил свои основные задачи по связыванию. Таким образом, terser()параметры определяются в пределах pluginsмассива внутри от outputобъекта. Окончательный файл конфигурации:

// Rollup.js configuration
import replace from '@rollup/plugin-replace';
import { nodeResolve as resolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import buble from '@rollup/plugin-buble';
import { terser } from 'rollup-plugin-terser';

// settings
const
  dev = (process.env.NODE_ENV !== 'production'),
  sourcemap = dev ? 'inline' : false,

  input = './src/main-replace.js',

  watch = { clearScreen: false },

  tokens = {
    __CLOCKSELECTOR__: '.clock',
    __CLOCKINTERVAL__: 1000,
    __CLOCKFORMAT__: 'formatHMS'
  };

console.log(`running in ${ dev ? 'development' : 'production' } mode`);

export default [

  {
    // ES6 output
    input,
    watch,

    plugins: [
      replace({
        ...tokens,
        __POLYFILL__: '' // no polyfill for ES6
      }),
      resolve({ browser: true }),
      commonjs()
    ],

    output: {
      file: './build/bundle.mjs',
      format: 'iife',
      sourcemap,
      plugins: [
        terser({
          ecma: 2018,
          mangle: { toplevel: true },
          compress: {
            module: true,
            toplevel: true,
            unsafe_arrows: true,
            drop_console: !dev,
            drop_debugger: !dev
          },
          output: { quote_style: 1 }
        })
      ]
    }

  },

  {
    // ES5 output
    input,
    watch,

    plugins: [
      replace({
        ...tokens,
        __POLYFILL__: "import './lib/polyfill.js';" // ES5 polyfill
      }),
      resolve({ browser: true }),
      commonjs(),
      buble()
    ],

    output: {
      file: './build/bundle.js',
      format: 'iife',
      sourcemap,
      plugins: [
        terser({
          ecma: 2015,
          mangle: { toplevel: true },
          compress: {
            toplevel: true,
            drop_console: !dev,
            drop_debugger: !dev
          },
          output: { quote_style: 1 }
        })
      ]
    }

  }

];

Конфигурация Terser отличается для ES5 и ES6, прежде всего, для разных версий стандарта ECMAScript. В обоих случаях, consoleи debuggerзаявления будут удалены, когда NODE_ENVпеременная окружения установлена в production.

Таким образом, окончательная производственная сборка может быть создана с помощью:

npx rollup --config --environment NODE_ENV:production

Полученные размеры файлов:

• ES6./build/bundle.mjs: 294 байта из исходного пакета из 766 байтов (сокращение 62%)
• ES5./build/bundle.js: 485 байт из исходного пакета из 1131 байт (уменьшение 57%)

Ваши следующие шаги с Rollup.js

Немногим разработчикам придётся выходить за рамки параметров командной строки, указанных выше, но у Rollup.js есть ещё несколько уловок.

Rollup.js JavaScript API

Связку можно запустить из кода Node.js с помощью JavaScript API Rollup.js. API использует параметры, аналогичные параметрам файла конфигурации, поэтому вы можете создать асинхронную функцию для обработки связывания. Это можно использовать в задаче Gulp.js или в любом другом процессе:

const rollup = require('rollup');

async function build() {

  // create a bundle
  const bundle = await rollup.rollup({
    // input options
  });

  // generate output code in-memory
  const { output } = await bundle.generate({
    // output options
  });

  // write bundle to disk
  await bundle.write({
    // output options
  });

  // finish
  await bundle.close();
}

// start build
build();

В качестве альтернативы вы можете использовать rollup.watch()функцию для запуска функций обработчика при изменении исходных файлов.

Создайте свои собственные плагины Rollup.js

Rollup.js предлагает множество плагинов, но вы также можете создать свои собственные. Все плагины экспортируют функцию, которая вызывается со специфическими для плагина параметрами, установленными в файле конфигурации Rollup.js. Функция должна возвращать объект, содержащий:

1. единственная nameсобственность
2. ряд функций обработчиков сборки, таких как buildStartили buildEnd, которые вызываются при возникновении определённых событий связывания, и / или
3. ряд хуков генерации вывода, таких как renderStartили writeBundle, которые вызываются после того, как пакет был сгенерирован.

Я рекомендую зайти в репозиторий GitHub любого плагина, чтобы изучить, как он работает.

Rollup Revolution

Для настройки Rollup.js требуется немного времени, но полученная конфигурация подойдёт для многих ваших проектов. Это идеально, если вам нужен более быстрый и настраиваемый сборщик JavaScript.