Модули ES6: Rollup

Привет, Хабр!

Когда-то были времена, когда весь 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 рассматривают в рамках онлайн-курсов. С полным каталогом курсов можно ознакомиться по ссылке, а также не забывайте о нашем календаре бесплатных мероприятий.