Конфигурация Rollup

MDX сочетает в себе возможности Markdown и JSX, что позволяет использовать React-компоненты внутри документации или статей. Для того чтобы эффективно обрабатывать MDX-файлы в проектах на JavaScript, необходима правильная настройка сборщика модулей. Rollup — один из популярных инструментов для этого, предоставляющий гибкую систему плагинов и возможность оптимизации конечного бандла.

Установка необходимых пакетов

Для работы с MDX через Rollup требуются следующие пакеты:

npm install @mdx-js/mdx @mdx-js/rollup rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser
  • @mdx-js/mdx — основной пакет для преобразования MDX в JSX.
  • @mdx-js/rollup — плагин для интеграции MDX с Rollup.
  • @rollup/plugin-node-resolve — разрешение модулей из node_modules.
  • @rollup/plugin-commonjs — обработка CommonJS-модулей.
  • rollup-plugin-terser — минификация итогового бандла для продакшена.

Основная структура конфигурации

Rollup использует файл rollup.config.js для описания процесса сборки. Пример базовой конфигурации для MDX:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import mdx from '@mdx-js/rollup';

export default {
  input: 'src/index.mdx',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    resolve({ extensions: ['.js', '.jsx', '.md', '.mdx'] }),
    commonjs(),
    mdx(),
    terser()
  ]
};

Ключевые моменты конфигурации:

  • input — исходный файл MDX, который нужно обработать.
  • output.file и output.format — путь к бандлу и формат модуля (esm, cjs, iife и т.д.).
  • Плагин resolve настроен с расширениями .md и .mdx, чтобы Rollup корректно находил MDX-файлы.
  • Плагин mdx() преобразует MDX в JSX, готовый для использования в React.
  • terser() минифицирует итоговый бандл для продакшена.

Интеграция с Babel

Для поддержки современных синтаксических возможностей JavaScript и JSX часто используется Babel. Rollup предоставляет плагин @rollup/plugin-babel:

npm install @rollup/plugin-babel @babel/core @babel/preset-env @babel/preset-react

Добавление плагина в конфигурацию:

import babel from '@rollup/plugin-babel';

plugins: [
  resolve({ extensions: ['.js', '.jsx', '.md', '.mdx'] }),
  commonjs(),
  mdx(),
  babel({
    babelHelpers: 'bundled',
    extensions: ['.js', '.jsx', '.md', '.mdx'],
    presets: ['@babel/preset-env', '@babel/preset-react']
  }),
  terser()
]

Особенности:

  • babelHelpers: 'bundled' объединяет необходимые вспомогательные функции Babel в один бандл.
  • Расширения .mdx включаются в Babel для обработки JSX, сгенерированного MDX-плагином.

Использование Remark и Rehype-плагинов

MDX позволяет подключать плагины для обработки Markdown и HTML через remark и rehype. Конфигурация Rollup поддерживает передачу этих плагинов:

import mdx from '@mdx-js/rollup';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';

mdx({
  remarkPlugins: [remarkGfm],
  rehypePlugins: [rehypeHighlight]
})

Пояснения:

  • remarkGfm добавляет поддержку GitHub Flavored Markdown (таблицы, чекбоксы, задачи).
  • rehypeHighlight обеспечивает подсветку синтаксиса для блоков кода.
  • Плагины применяются на этапе преобразования MDX в JSX, что позволяет расширять функциональность Markdown.

Разделение кода и динамическая загрузка

Rollup поддерживает код-сплиттинг, что полезно при работе с большим количеством MDX-документов. Для этого используется input как объект:

export default {
  input: {
    main: 'src/index.mdx',
    tutorial: 'src/tutorial.mdx'
  },
  output: {
    dir: 'dist',
    format: 'esm',
    sourcemap: true
  },
  plugins: [
    resolve({ extensions: ['.js', '.jsx', '.md', '.mdx'] }),
    commonjs(),
    mdx(),
    terser()
  ]
};

В этом случае Rollup создаст отдельные бандлы для каждого документа, что уменьшает размер начальной загрузки и позволяет динамически импортировать MDX-контент.

Настройка импорта CSS и стилей

Для стилизации MDX-компонентов можно подключать CSS через Rollup-плагины, например rollup-plugin-postcss:

npm install rollup-plugin-postcss

Конфигурация:

import postcss from 'rollup-plugin-postcss';

plugins: [
  resolve({ extensions: ['.js', '.jsx', '.md', '.mdx'] }),
  commonjs(),
  mdx(),
  postcss({
    modules: true,
    minimize: true
  }),
  terser()
]

Особенности:

  • modules: true активирует CSS Modules, предотвращая конфликты классов.
  • minimize: true уменьшает итоговый CSS.

Советы по оптимизации сборки

  1. Использование external для библиотек React и ReactDOM, чтобы не включать их в бандл:
external: ['react', 'react-dom']
  1. Минимизация только в продакшене с помощью process.env.NODE_ENV:
import { defineConfig } from 'rollup';

const isProd = process.env.NODE_ENV === 'production';

plugins: [
  resolve({ extensions: ['.js', '.jsx', '.md', '.mdx'] }),
  commonjs(),
  mdx(),
  isProd && terser()
]
  1. Source maps для удобной отладки: sourcemap: true в output.

Конфигурация Rollup для MDX позволяет построить гибкий, масштабируемый и оптимизированный процесс сборки документации или контента с JSX-компонентами. Комбинация плагинов MDX, Babel, PostCSS и минификации обеспечивает готовый к использованию бандл с возможностью динамической загрузки и расширяемой функциональностью Markdown.

Оглавление