# General Translation React SDKs (gt-react, gt-next, gt-react-native): Настройка Rollup SPA
URL: https://generaltranslation.com/ru/docs/react/guides/spa/configuring-rollup-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Как настроить gt-react в одностраничном React-приложении на базе Rollup.

Настройте среду выполнения приложения и при необходимости включите сгенерированные каталоги переводов в сборку Rollup.

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

## Настройка SPA на React с Rollup [#setup]

Инициализируйте `gt-react` до запуска точки входа приложения.

### 1. Установите gt-react

Установите последнюю версию `gt-react` с помощью менеджера пакетов, предпочитаемого в репозитории. Если gt-react уже установлен, пропустите этот шаг.

### 2. Добавьте файл `gt.config.json` в корневой каталог проекта

Добавьте файл `gt.config.json` в корневой каталог проекта. Этот файл будет содержать конфигурацию пакета `gt-react`.

Локали, уже заданные в проекте или переданные задаче настройки, считаются приоритетными. Сохраните все существующие значения `locales` и `defaultLocale`. Приведённые ниже значения — лишь примеры. Если в проекте не настроены локали, не определяйте требования к ним на основе этих примеров.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"]
}
```

Необязательное поле [`src`](/docs/cli/reference/config#src) задаёт исходные файлы, в которых GT ищет встроенный контент. Если оно не указано, по умолчанию используются следующие glob-шаблоны JavaScript и TypeScript в каталогах `src`, `app`, `pages` и `components`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"],
  "src": [
    "src/**/*.{js,jsx,ts,tsx}",
    "app/**/*.{js,jsx,ts,tsx}",
    "pages/**/*.{js,jsx,ts,tsx}",
    "components/**/*.{js,jsx,ts,tsx}"
  ]
}
```

### 3. Инициализируйте библиотеку

Инициализируйте библиотеку с помощью [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) до рендеринга приложения и импорта модулей, использующих функции перевода на уровне модуля.

Создайте загрузочный файл рядом с существующим входным файлом приложения. В этом примере исходный входной файл — `src/main.tsx`, а новый загрузочный файл — `src/index.ts`. Укажите загрузочный файл в существующей конфигурации `input` Rollup. Сохраните все остальные настройки сборки.

Загрузочный модуль и загрузчик переводов импортируют JSON-файлы. Если в проекте ещё не настроена поддержка JSON-модулей, установите `@rollup/plugin-json` в качестве зависимости для разработки с помощью предпочитаемого в репозитории менеджера пакетов и добавьте его в существующий список плагинов. Сохраните все существующие плагины и их конфигурацию.

```js title="rollup.config.mjs"
import json from '@rollup/plugin-json';

export default {
  // ...существующие параметры проекта
  input: 'src/index.ts',
  plugins: [
    // ...существующие плагины проекта
    json(),
  ],
};
```

Если HTML для разработки напрямую ссылается на исходную запись, обновите и его:

```html title="index.html"
<!-- <script type="module" src="/src/main.tsx"></script> -->
<script type="module" src="/src/index.ts"></script>
```

Затем инициализируйте GT и только после завершения инициализации динамически импортируйте исходный entry. Эталонное приложение Rollup генерирует ESM и поддерживает top-level await:

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';

await initializeGTSPA(gtConfig);

await import('./main'); // рендерим приложение только после того, как GT будет готов
```

Если текущий формат output или Target Rollup не поддерживает top-level await, не изменяйте их только ради этой настройки. Вместо этого используйте асинхронную функцию bootstrap:

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';

async function bootstrap() {
  await initializeGTSPA(gtConfig);
  await import('./main');
}

void bootstrap();
```

## Загрузка переводов [#translations]

Если [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) вызывается без функции [`loadTranslations`](/docs/react/reference/functions/load-translations), среда выполнения загружает переводы из CDN General Translation только при наличии [`projectId`](/docs/react/reference/config#project-id). Чтобы включить каталоги в бандл приложения, настройте путь вывода и соответствующий загрузчик. В следующих шагах используется `src/_gt/[locale].json`.

### 1. Обновите конфигурацию

Укажите в `files.gt.output` расположение, в которое CLI должен записывать сгенерированные файлы перевода.

Добавьте или объедините только настройку `files.gt.output`. Сохраните существующие в проекте `locales` и `defaultLocale`; приведённые ниже значения — лишь примеры и не должны заменять настроенные в проекте локали.

Как правило, в приложениях на базе Rollup переводы хранятся в каталоге `src/_gt`. Это позволяет Rollup включать модули переводов в бандл приложения.

```json title="gt.config.json"
{
  "locales": ["fr", "zh"],
  "defaultLocale": "en",
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

### 2. Добавьте заглушки

Создайте по одному пустому JSON-файлу для каждой целевой локали, уже настроенной в `gt.config.json`, кроме локали по умолчанию. Эти заглушки позволяют разрешить импорты до появления бандлов переводов. Файлы `fr` и `zh` ниже соответствуют примеру конфигурации из этого руководства; вместо них создайте файлы для фактически настроенных целевых локалей проекта. Если целевые локали не настроены, не добавляйте локали и не создавайте placeholder-файлы.

<Files>
  <Folder name="src">
    <Folder name="_gt">
      <File name="fr.json" />

      <File name="zh.json" />
    </Folder>
  </Folder>
</Files>

```json title="src/_gt/fr.json"
{}
```

```json title="src/_gt/zh.json"
{}
```

### 3. Добавьте загрузчик

Создайте `src/loadTranslations.ts` для загрузки переводов. Он должен указывать на то же расположение output, которое задано в `files.gt.output`.

Явно перечислите все настроенные целевые локали в `translationLoaders`. Каждый загрузчик должен использовать литеральный путь импорта, чтобы Rollup мог обнаружить и включить все файлы переводов на этапе сборки. Приведённые ниже записи `fr` и `zh` соответствуют примеру конфигурации из этого руководства; используйте фактически настроенные в проекте целевые локали.

```ts title="src/loadTranslations.ts"
const translationLoaders = {
  fr: () => import('./_gt/fr.json'),
  zh: () => import('./_gt/zh.json'),
};

export default async function loadTranslations(locale: string) {
  try {
    const loader =
      translationLoaders[locale as keyof typeof translationLoaders];
    if (!loader) {
      console.warn(`No translations found for locale "${locale}"`);
      return {};
    }
    const translations = await loader();
    return translations.default;
  } catch (error) {
    console.warn(`No translations found for locale "${locale}"`, error);
    return {};
  }
}
```

### 4. Обновите инициализатор

Обновите инициализатор, чтобы использовать новую функцию загрузчика. Сохраните используемый в приложении вариант загрузочного модуля с top-level await или асинхронной функцией.

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

await initializeGTSPA({ ...gtConfig, loadTranslations });

await import('./main');
```

## Next steps

- /docs/react/guides/spa/internationalizing-react-spa
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.