Написание плагина

Этот пример внедряет глобальный компонент, чтобы показать, как определять и использовать плагины.

1. Определение плагина

plugin.ts

import type { RspressPlugin } from '@rspress/core';

export function pluginExample(slug: string): RspressPlugin {
  // Путь к компоненту. Компонент вам нужно реализовать самостоятельно
  const componentPath = path.join(__dirname, 'Example.tsx');
  return {
    name: 'plugin-example',
    // Пути к глобальным компонентам
    globalUIComponents: [componentPath],
    // Определение глобальных переменных на этапе сборки
    builderConfig: {
      source: {
        define: {
          'process.env.SLUG': JSON.stringify(slug),
        },
      },
    },
  };
}

Example.tsx

import React from 'react';

const Example = () => {
  console.log(process.env.SLUG);
  return <div>Пример</div>;
};

export default Example;

Плагин обычно представляет собой функцию, которая принимает необязательные параметры плагина и возвращает объект, содержащий имя плагина и другую конфигурацию.

В приведённом выше примере мы определяем плагин с именем plugin-example. Он задаёт глобальную переменную окружения process.env.SLUG на этапе сборки и внедряет глобальный компонент Example.tsx на страницу.

2. Подключение плагина

Подключайте плагины через параметр plugins в файле rspress.config.ts:

rspress.config.ts

import { pluginExample } from './plugin';

export default {
  plugins: [pluginExample('test')],
};

После этого компонент Example внедряется на страницу, и он может получать доступ к process.env.SLUG.

#Написание плагина

#1. Определение плагина

#2. Подключение плагина

Написание плагина

1. Определение плагина

2. Подключение плагина