![](https://habrastorage.org/getpro/habr/upload_files/995/8f2/b51/9958f2b51d9e19ad0ab6873c7c582676.png)
Привет, Хабр!
Когда-то были времена, когда весь JavaScript-код приложения складывался в один огромный файл. Это было не только неудобно, но и было множество ошибок из-за глобального пространства имен и сложностей с зависимостями. Тогда появилась необходимость в модульности.
Многие при первой встречи с такими проблемами пытались разделить код на отдельные файлы и подключать через тег <script>
. Но такое решение было очень далеко от идеала. Потом были попытки использовать различные библиотеки и инструменты, такие как RequireJS или Browserify, но каждый из них имел свои недостатки и ограничения.
Все изменилось с приходом ES6, который ввел нативную поддержку модулей и один из этих модулей - Rollup. Сегодня мы его и рассмотрим в статье.
Установим и настроим
Создадим директорию для проекта и переходим в неё:
mkdir my-rollup-project && cd my-rollup-project
Инициализируем с помощью NPM:
npm init -y
Установим Rollup как зависимость:
npm install rollup --save-dev
Создадим файл rollup.config.js
в корневой директории проекта:
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};
Добавим скрипт сборки в package.json
:
"scripts": {
"build": "rollup -c"
}
Для запуска сборки:
npm run build
Добавление CSS
Для работы с CSS потребуется плагин. Установим rollup-plugin-postcss
:
npm install rollup-plugin-postcss --save-dev
Добавим этот плагин в rollup.config.js
:
import postcss from 'rollup-plugin-postcss';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [
postcss({
extensions: ['.css'],
}),
],
};
Теперь можно создать файл стилей styles.css
в папке src
и импортировать его в index.js
:
/* src/styles.css */
body {
background-color: #f0f0f0;
}
// src/index.js
import './styles.css';
console.log('Привет, Хабр!');
Работа с изображениями
Для включения изображений в бандл используем плагин rollup-plugin-img
:
Обновим rollup.config.js, добавив этот плагин:npm install rollup-plugin-img --save-dev
Обновим rollup.config.js
, добавив этот плагин:
import postcss from 'rollup-plugin-postcss';
import img from 'rollup-plugin-img';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
},
plugins: [
postcss({
extensions: ['.css'],
}),
img({
limit: 10000 // размер файла в байтах для инлайнинга изображений
}),
],
};
Теперь можно добавить изображение в папку src
и использовать его в CSS или JavaScript. Например, в styles.css
:
body {
background-image: url('./background.png');
background-size: cover;
}
Или напрямую в index.js
:
import background from './background.png';
document.body.style.backgroundImage = `url('${background}')`;
Также установим некоторые нужные плагины
@rollup/plugin-node-resolve: позволяет Rollup подключать внешние модули из node_modules
:
npm install --save-dev @rollup/plugin-node-resolve
Включим в конфигурационный файл:
import resolve from '@rollup/plugin-node-resolve';
export default {
//...
plugins: [resolve()]
};
Абсолютно аналогично можно установить:
@rollup/plugin-commonjs: преобразует модули CommonJS в формат ES6, который может обрабатывать Rollup.
@rollup/plugin-json: позволяет Rollup импортировать данные из JSON-файлов.
@rollup/plugin-babel: интегрирует Babel для транспиляции кода в старые версии JavaScript.
Для Babel нужно будет создать.babelrc
с настройками Babel:
{
"presets": [
["@babel/preset-env", {
"modules": false
}]
]
}
@rollup/plugin-terser: минифицирует итоговый бандл для продакшена.
Основные функции Rollup
Tree-Shaking
Tree-Shaking – это процесс устранения кода, который фактически не используется в проекте.
Tree-Shaking работает, анализируя кодовые файлы, необходимые для запуска приложения, и включая только код, который действительно используется приложением. Этот процесс создаёт структуру данных, представляющую намерения вашего кода, состоящую из узлов, которые представляют код (функции, утверждения и т.д.). Эти узлы формируют структуру, похожую на дерево, и после её создания можно определить, какой код действительно используется приложением .
Tree-Shaking в JS работает благодаря использованию ES6 модулей, потому что они статичны в своей структуре. Каждый файл, проанализированный в процессе Tree-Shaking, будет иметь различные виды операторов экспорта как узел верхнего уровня создаваемой структуры данных. В файлах, которые импортируют эти экспортированные члены, использование импорта может быть отслежено.
Рассмотрим пример использования Tree-Shaking с помощью Rollup, демонстрирующий как неиспользуемый код может быть исключен из итогового бандла.
Предположим, есть два файла модулей: math.js
и main.js
. В math.js
определены несколько функций, но main.js
использует только одну из них.
math.js:
export const sum = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export const subtract = (a, b) => a - b;
main.js:
import { sum } from './math.js';
console.log(sum(1, 2)); // Ожидается вывод: 3
Если мы используем Rollup для сборки, он анализирует зависимости и понимает, что только функция sum
используется в main.js
. Функции multiply
и subtract
не используются и, следовательно, могут быть исключены из финального бандла благодаря механизму Tree-Shaking.
Для запуска Tree-Shaking с Rollup, можно юзать следующий конфигурационный файл Rollup rollup.config.js
:
export default {
input: 'main.js', // точка входа вашего приложения
output: {
file: 'bundle.js', // имя итогового файла
format: 'es' // формат модулей в итоговом бандле
}
};
Затем, запускаем Rollup с этой конфигурацией, и он сгенерирует bundle.js
, содержащий только используемый код. В результате размер итогового файла будет меньше, и приложение загрузится быстрее.
Code Splitting
Code-Splitting позволяет разделить код на разные части на основе различных точек входа и динамических импортов, используя механизм импорта формата вывода вместо пользовательского кода загрузчика . Это позволяет динамически загружать части приложения по мере необходимости.
Для демонстрации Code Splitting с помощью Rollup, рассмотрим пример, где у нас есть две точки входа в приложение и динамический импорт модуля.
Структура проекта:
src/
main1.js
(точка входа 1)main2.js
(точка входа 2)shared.js
(модуль, используемый обеими точками входа)dynamic.js
(модуль, импортируемый динамически)
shared.js:
// экспортируем функцию, общую для main1.js и main2.js
export const sharedFunction = () => console.log('Это общая функция');
dynamic.js:
// экспортируем функцию для динамического импорта
export const dynamicFunction = () => console.log('Это динамическая функция');
main1.js:
import { sharedFunction } from './shared.js';
// использование общей функции
sharedFunction();
// динамический импорт модуля
import('./dynamic.js').then((module) => {
module.dynamicFunction();
});
main2.js:
import { sharedFunction } from './shared.js';
// использование общей функции
sharedFunction();
// предположим, здесь есть дополнительный код специфичный для main2.js
Для поддержки Code Splitting в Rollup конфигурации нужно определить обе точки входа и настроить выходные параметры для генерации нескольких чанков:
rollup.config.js:
export default {
input: ['src/main1.js', 'src/main2.js'],
output: {
dir: 'output',
format: 'esm',
chunkFileNames: '[name]-[hash].js'
},
plugins: [
// здесь можно юзать плагины, например @rollup/plugin-node-resolve для разрешения модулей из node_modules
]
};
input
определяется как массив с двумя точками входа. Rollup будет анализировать зависимости, обнаруживать общие модули и динамические импорты, и соответственно разделять код на чанки. В результате, shared.js
будет вынесен в отдельный чанк, так как используется обеими точками входа, в то время как dynamic.js
будет загружен динамически только при необходимости.
Настройка Rollup для работы с TypeScript, React
Для начала работы с TypeScript и React необходимо установить соответствующие пакеты и зависимости:
npm i --save-dev typescript react react-dom @types/react
Для интеграции TypeScript в проект с Rollup юзаем плагин @rollup/plugin-typescript
. Простейший файл конфигурации rollup.config.js
может выглядеть так:
import typescript from '@rollup/plugin-typescript';
export default {
input: 'src/index.tsx', // точка входа приложения
output: {
dir: 'dist', // каталог для сгенерированных файлов
format: 'esm', // формат модуля ES
},
plugins: [typescript()],
};
Эта конфигурация указывает Rollup на обработку файлов TypeScript и сборку их в модули ES6.
Файл tsconfig.json
содержит настройки компилятора TypeScript. Пример базовой конфигурации:
{
"compilerOptions": {
"outDir": "./dist",
"module": "ESNext",
"target": "es5",
"jsx": "react",
"declaration": true,
"declarationDir": "./dist"
},
"include": ["src/**/*"]
}
Здесь будет поддержка JSX, генерацию деклараций типов и компиляцию в ES5 для лучшей совместимости.
Для работы с React компонентами потребуется настроить Babel вместе с Rollup для транспиляции JSX:
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
Также нужно создать .babelrc
или babel.config.json
файл с соответствующими пресетами:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
Это позволяет Babel корректно обрабатывать файлы .tsx
и .ts
, содержащие JSX.
Больше практических инструментов эксперты из OTUS рассматривают в рамках онлайн-курсов. С полным каталогом курсов можно ознакомиться по ссылке, а также не забывайте о нашем календаре бесплатных мероприятий.