Rollup.js — это сборщик модулей JavaScript следующего поколения от Рича Харриса, автора Svelte. Он компилирует несколько исходных файлов в один пакет.
Преимущества включают в себя:
разработкой легче управлять при использовании небольших автономных исходных файлов
исходный код может быть подвергнут линтингу, преттификации и проверке синтаксиса во время связывания
возможна транспиляция в ES5 для обратной совместимости
можно создать несколько выходных файлов — например, ваша библиотека может быть предоставлена в модулях ES5, ES6 и Node.
производственные пакеты могут быть минимизированы и удалены журналы
Другие варианты упаковщиков, такие как webpack, Snowpack и Parcel, пытаются волшебным образом справиться со всем: шаблонами HTML, оптимизацией изображений, обработкой CSS, связыванием JavaScript и многим другим. Это хорошо работает, когда вы довольны настройками по умолчанию, но пользовательские конфигурации могут быть сложными, а обработка выполняется медленнее.
Rollup.js в основном концентрируется на JavaScript (хотя есть плагины для
Установите Rollup.js
Rollup.js требует Node.js версии 8.0.0 или выше и может быть установлен глобально с помощью:
npm install rollup —global
Это позволяет rollupзапускать команду в любом каталоге проекта, содержащем файлы JavaScript, например в PHP, WordPress, Python, Ruby или другом проекте.
Однако, если вы работаете над проектом Node.js в большой команде, предпочтительнее установить Rollup.js локально, чтобы все разработчики использовали одну и ту же версию. Предполагая, что у вас есть файл Node.js package.jsonв папке проекта, запустите:
npm install rollup —
Вы не сможете запустить 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
Clock
Rollup.js предоставляет параметры для оптимизации исходных файлов JavaScript.
Быстрый старт Rollup.js
Следующая команда может быть запущена из корня папки проекта для обработки src/main.jsи ее зависимостей:
npx rollup. /src/main.js —file. /build/bundle.js —format iife
Выводится один скрипт at build/bundle.js. Он содержит весь код, но обратите внимание, что неиспользуемые зависимости, такие как getAll () функция in 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
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) ;
}
} ());
Теперь HTML -код
Примечание: 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=
После создания исходной карты вы можете загрузить пример страницы, которая ссылается на скрипт. Откройте инструменты разработчика и перейдите на вкладку «Источники «в браузерах на базе Chrome или на вкладку «Отладчик «в Firefox. Вы увидите исходный srcкод и номера строк.
Просмотр файлов и автоматическое объединение
Флаг —watch (или -w) отслеживает ваши исходные файлы на наличие изменений и автоматически создает пакет. Экран терминала очищается при каждом запуске, но вы можете отключить это с помощью —
npx rollup. /src/main.js —file. /build/bundle.js —format iife —watch —
Создайте файл конфигурации
Флаги командной строки могут быстро стать громоздкими. Примеры выше уже длинные, а вы еще не начали добавлять плагины!
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
}
}
Однако
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 может включать такие скрипты в пакеты со следующими плагинами:
Установите их в свой проект:
npm install @rollup/
Вместо использования функций форматирования времени в src/lib/time.js, вы можете добавить более полную библиотеку обработки даты/времени, такую как day.js. Установите его с помощью npm:
npm install dayjs —
Затем измените 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/
import commonjs from '@rollup/
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/
Измените rollup.config.js, чтобы импортировать подключаемый модуль и определить tokensобъект, который передается replace () функции в pluginsмассиве. В этом примере вы можете изменить селектор часов (__CLOCKSELECTOR__), интервал времени обновления (__CLOCKINTERVAL__) и функцию форматирования времени (__CLOCKFORMAT__):
// Rollup.js configuration
import { nodeResolve as resolve } from '@rollup/
import commonjs from '@rollup/
import replace from '@rollup/
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:
В декабре 2020 года доля рынка IE11 составляла менее 1%. Инклюзивность — это здорово, но лучше ли сосредоточиться на доступности и производительности, чем на браузере десятилетней давности?
Устаревшие браузеры могут поддерживаться, если будет принято прогрессивное улучшение. Эти браузеры могут не запускать JavaScript, но сайт все равно может предлагать определенный уровень функциональности HTML и CSS.
Пакеты ES5 могут быть значительно больше, чем ES6. Должны ли современные браузеры получить менее эффективный скрипт?
Двигаясь в будущее, я предлагаю вам связать только ES6, а старые (более медленные) браузеры полагаются только на HTML и CSS. Это не всегда возможно — например, когда у вас есть сложное приложение с большой долей пользователей IE11. В таких ситуациях рассмотрите возможность создания пакетов ES6 и ES5 и обслуживания соответствующего сценария.
Rollup.js предлагает плагин, который использует Bublé для переноса в ES5. Проект находится в режиме обслуживания, но все еще работает хорошо.
Примечание: вот цитата из репозитория проекта: «Bublé был создан, когда ES2015 был еще будущим. В настоящее время все современные браузеры поддерживают все версии ES2015 и (в некоторых случаях) более поздние версии. Если вам не нужна поддержка IE11, вам, вероятно, не нужно использовать Bublé для преобразования вашего кода в ES5».
Установите плагин, чтобы вы могли выводить модули ES6 и ES5:
npm install @rollup/
До изменения конфигурации используемая 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/
import { nodeResolve as resolve } from '@rollup/
import commonjs from '@rollup/
import buble from '@rollup/
// 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 —configдля сборки сценариев ES6 build/bundle.mjsи ES5 build/bundle.js.
Современные браузеры будут загружать и запускать ES6, содержащийся в файлах. /build/bundle.mjs. Старые браузеры будут загружать и запускать скрипт ES5 (плюс polyfill), содержащийся в файлах. /build/bundle.js.
Транспиляция с помощью Babel
Bublé проще, быстрее и менее суетлив, но Babel можно использовать, если вам нужна конкретная опция. Установите следующие плагины:
npm install @rollup/
Затем включите Babel в файл конфигурации:
import { getBabelOutputPlugin } from '@rollup/
Затем добавьте этот код в свой pluginsмассив:
plugins: [
getBabelOutputPlugin ({
presets: ['@babel/
})
],
Также output.formatнеобходимо изменить до esили cjsперед запуском.
Минимизировать вывод
Невероятный минификатор Terser может сжимать код, оптимизируя операторы и удаляя пробелы, комментарии и другие ненужные символы. Результаты могут быть драматичными. Даже в этом небольшом примере выход Rollup.js (который уже создал меньший пакет) может быть уменьшен еще на 60%.
Установите плагин Rollup.js Terser с помощью:
npm install
Затем импортируйте его в верхнюю часть файла конфигурации Rollup.js:
import { terser } from '
Terser — это выходной плагин, который обрабатывается после того, как Rollup.js завершит свои основные задачи по объединению. Поэтому terser () параметры определяются в pluginsмассиве внутри объекта output. Окончательный файл конфигурации:
// Rollup.js configuration
import replace from '@rollup/
import { nodeResolve as resolve } from '@rollup/
import commonjs from '@rollup/
import buble from '@rollup/
import { terser } from '
// settings
const
dev = (process.env.NODE_ENV≠= 'production’),
sourcemap = dev? 'inline’: false,
input = '. /src/
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. В обоих случаях операторы consoleand 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 есть несколько других хитростей...
Связку можно запустить из кода 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
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. Функция должна возвращать объект, содержащий:
одно nameсвойство
ряд
ряд ловушек генерации вывода, таких как renderStart или writeBundle, которые вызываются после того, как пакет был сгенерирован.
Я рекомендую перейти в репозиторий GitHub любого плагина, чтобы изучить, как он работает.
Роллап Революция
Для настройки Rollup.js требуется некоторое время, но полученная конфигурация подойдет для многих ваших проектов. Идеально, если вам нужен более быстрый и более настраиваемый сборщик JavaScript.
