Интеграция с различными сборщиками

Remark и Rehype — это мощные инструменты для обработки Markdown и HTML в экосистеме JavaScript. Они позволяют создавать гибкие конвейеры трансформации контента, но реальная сила этих библиотек проявляется при интеграции с современными сборщиками, такими как Webpack, Vite и Rollup. Ниже рассмотрены ключевые подходы к интеграции и примеры конфигураций.

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

Для работы Remark/Rehype с Webpack используется концепция загрузчиков (loaders). Основной принцип заключается в том, чтобы Markdown-файлы обрабатывались через remark и/или rehype, а результат превращался в JavaScript-модули.

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

npm install remark remark-html rehype rehype-stringify webpack markdown-loader

Пример конфигурации webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'markdown-loader',
            options: {
              // Конфигурация Remark
              pedantic: true,
              // Возможность подключения плагинов Remark/Rehype
              remarkPlugins: [require('remark-slug')],
              rehypePlugins: [require('rehype-highlight')],
            },
          },
        ],
      },
    ],
  },
};

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

  • Markdown-файлы автоматически превращаются в HTML или React-компоненты, в зависимости от используемого loader.
  • Плагины Remark и Rehype подключаются через параметры конфигурации loader.
  • Встроенные плагины позволяют добавлять автогенерацию id для заголовков (remark-slug) или подсветку синтаксиса кода (rehype-highlight).

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

Vite использует концепцию плагинов для расширения функционала сборки. Для интеграции Remark/Rehype создается кастомный плагин или используется готовый, например vite-plugin-md.

Установка:

npm install vite vite-plugin-md remark remark-html rehype rehype-stringify

Пример настройки vite.config.js:

import { defineConfig } from 'vite';
import mdPlugin from 'vite-plugin-md';
import remarkSlug from 'remark-slug';
import rehypeHighlight from 'rehype-highlight';

export default defineConfig({
  plugins: [
    mdPlugin({
      markdownItOptions: {
        html: true,
      },
      remarkPlugins: [remarkSlug],
      rehypePlugins: [rehypeHighlight],
    }),
  ],
});

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

  • Markdown можно импортировать напрямую в компоненты Vue или React.
  • Remark и Rehype-плагины применяются до окончательной компиляции, обеспечивая полную трансформацию контента.
  • Легко интегрировать подсветку кода, таблицы содержания, автогенерацию заголовков и другие расширения.

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

Rollup также поддерживает работу с Remark/Rehype через плагины и загрузчики. Основная цель — преобразование Markdown в HTML или в JavaScript-модули для дальнейшей работы с ними.

Установка:

npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-md remark remark-html rehype rehype-stringify

Пример конфигурации rollup.config.js:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import md from 'rollup-plugin-md';
import remarkSlug from 'remark-slug';
import rehypeHighlight from 'rehype-highlight';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    resolve(),
    commonjs(),
    md({
      remarkPlugins: [remarkSlug],
      rehypePlugins: [rehypeHighlight],
    }),
  ],
};

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

  • Плагины Rollup позволяют подключать цепочку трансформации Markdown → HTML → JS.
  • Можно комбинировать с другими плагинами Rollup для оптимизации, минификации и tree-shaking.
  • Настройка Remark/Rehype производится через параметры плагина rollup-plugin-md, что делает интеграцию гибкой и расширяемой.

Рекомендации по выбору стратегии интеграции

  • Для больших проектов с React/Vue: предпочтительно использовать Vite с vite-plugin-md или Webpack с markdown-loader, так как поддерживается импорт Markdown как компонентов.
  • Для библиотек и npm-пакетов: Rollup обеспечивает компактный бандл и удобное подключение Remark/Rehype.
  • Для расширенной обработки Markdown: подключение дополнительных плагинов Remark (remark-gfm, remark-toc) и Rehype (rehype-autolink-headings) улучшает функциональность без изменения сборщика.

Особенности работы плагинов Remark и Rehype

  • Remark работает на уровне AST Markdown (MDAST), что позволяет анализировать и изменять структуру Markdown до конвертации в HTML.
  • Rehype работает на уровне AST HTML (HAST), что открывает возможности для манипуляции HTML-тегами, вставки классов, добавления элементов навигации.
  • Плагины могут быть цепочкой: Remark → Rehype → rehype-stringify, обеспечивая гибкий контроль над каждым этапом трансформации контента.

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

Markdown-файлы можно типизировать при использовании сборщиков:

declare module '*.md' {
  const content: string;
  export default content;
}
  • Позволяет импортировать Markdown как строки или компоненты.
  • Обеспечивает поддержку автодополнения и проверки типов при работе с содержимым Markdown.

Производительность и кеширование

  • Использование кеширования при сборке ускоряет трансформацию больших Markdown-библиотек.
  • В Webpack и Vite можно использовать встроенные механизмы кеширования loader/plugin для повторного использования AST.
  • Rollup поддерживает incremental build через cache объект при повторной сборке.

Если требуется, можно составить подробную таблицу сравнения подходов интеграции с Webpack, Vite и Rollup, включая поддержку плагинов, производительность и типизацию. Это позволит выбрать оптимальный стек для конкретного проекта.

Оглавление