Установка через npm и yarn

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

Установка через npm

Для установки MDX с использованием npm применяется команда npm install. Наиболее часто используется пакет @mdx-js/react для интеграции MDX с React-приложениями:

npm install @mdx-js/react

Эта команда добавляет библиотеку MDX в зависимости проекта. После установки она становится доступной через import в коде:

import { MDXProvider } from '@mdx-js/react';

Для полноценной работы с MDX в проектах на Webpack или Vite часто требуется установить дополнительные пакеты для компиляции .mdx файлов:

npm install @mdx-js/loader @mdx-js/react
  • @mdx-js/loader — загрузчик для Webpack, который преобразует MDX в React-компоненты.
  • @mdx-js/react — компонент-провайдер для интеграции MDX с React.

Если проект использует TypeScript, рекомендуется установить также типы:

npm install --save-dev @types/mdx

Установка через Yarn

Аналогично npm, Yarn предоставляет возможность установки MDX и связанных пакетов. Для базовой установки используется команда:

yarn add @mdx-js/react

Для Webpack или других сборщиков также необходимо добавить загрузчик MDX:

yarn add @mdx-js/loader @mdx-js/react

Для разработки с TypeScript:

yarn add -D @types/mdx

Настройка Webpack для MDX

После установки необходимо настроить загрузку MDX-файлов. В webpack.config.js это делается следующим образом:

module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: '@mdx-js/loader',
            /** дополнительные опции можно указать здесь */
          }
        ]
      }
    ]
  }
};

Это позволяет Webpack автоматически компилировать MDX-файлы в React-компоненты, которые можно импортировать и использовать в проекте.

Настройка Vite для MDX

Для проектов на Vite установка MDX производится через плагин vite-plugin-mdx:

npm install @mdx-js/react @mdx-js/rollup vite-plugin-mdx

Или через Yarn:

yarn add @mdx-js/react @mdx-js/rollup vite-plugin-mdx

В vite.config.js подключение выглядит так:

import mdx from 'vite-plugin-mdx';

export default {
  plugins: [
    mdx()
  ]
};

Это интегрирует MDX с Vite и позволяет импортировать .mdx файлы как React-компоненты.

Примеры импорта и использования MDX

После установки и настройки можно импортировать MDX-файл в React-компонент:

import MyContent from './content.mdx';

function App() {
  return (
    <MDXProvider>
      <MyContent />
    </MDXProvider>
  );
}

MDX-файлы поддерживают вставку компонентов:

# Заголовок MDX

<MyButton>Нажми меня</MyButton>

Где MyButton — это обычный React-компонент, импортированный в MDX или переданный через MDXProvider.

Основные советы по установке

  • Проверять версии @mdx-js/react и @mdx-js/loader для совместимости с версией React.
  • Для TypeScript-проектов подключать типы MDX, чтобы избежать ошибок при компиляции.
  • Если проект использует Vite или Webpack, обязательно подключать соответствующие плагины или лоадеры.

Установка через npm или Yarn — первый шаг к использованию MDX. После корректного подключения библиотека готова к интеграции с React-компонентами и разработке гибких Markdown-документов.

Оглавление