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

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

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

## Настройка SPA React на Bazel [#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/index.js` в качестве файла загрузочного модуля и импортируйте существующую точку входа `src/main.jsx` после инициализации.

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

Цель должна получать каждый файл, импортируемый новым загрузочным модулем. Добавьте установленную npm-метку `gt-react` в список зависимостей. Добавьте `gt.config.json` в `srcs` или `data`, если этот файл ещё не охвачен объявленным входным файлом. Файл загрузочного модуля будет включён автоматически, если цель уже охватывает каталог исходных файлов с помощью glob.

Затем измените браузерную точку входа цели: замените существующую точку входа React новым файлом загрузочного модуля. Для приложения, использующего правило `esbuild` от Aspect в корне репозитория, итоговая цель может выглядеть так:

```python title="BUILD.bazel"
load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")

esbuild(
    name = "app",
    srcs = glob(["src/**"]) + ["gt.config.json"],
    deps = [
        ":node_modules/react",
        ":node_modules/react-dom",
        ":node_modules/gt-react",
    ],
    entry_point = "src/index.js",
    format = "esm",
    output = "app.js",
)
```

Используйте подписи и атрибуты, уже принятые в проекте. Например, цель в дочернем пакете Bazel может использовать `//:gt.config.json` и `//:node_modules/gt-react` вместо подписей относительно корневого пакета. Если бандл зависит от собственного `js_library`, объявите `gt-react` в цели, которой принадлежит импортирующий исходный код, а не дублируйте его произвольно.

Используйте асинхронную загрузочную функцию, если существующий бандл Bazel не поддерживает await верхнего уровня. Не изменяйте формат вывода или целевую версию JavaScript только для включения await верхнего уровня.

```js title="src/index.js"
import { initializeGTSPA } from 'gt-react';

import gtConfig from '../gt.config.json';

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

void bootstrap();
```

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

## Загрузка переводов [#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`; приведённые ниже значения являются примерами и не должны заменять настроенные в проекте локали.

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

```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"
{}
```

Убедитесь, что соответствующая цель Bazel объявляет эти JSON-файлы. Существующий `glob(["src/**"])` включает их; в противном случае добавьте файлы в `srcs` или `data` цели в соответствии с API правила.

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

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

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

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

export default async function loadTranslations(locale) {
  const loader = translationLoaders[locale];
  if (!loader) {
    console.warn(`No translations found for locale "${locale}"`);
    return {};
  }

  const translations = await loader();
  return translations.default;
}
```

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

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

```js title="src/index.js"
import { initializeGTSPA } from 'gt-react';

import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

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

void bootstrap();
```

После добавления переводов в бандл снова запустите цель сборки или тестирования Bazel.

## 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.