Обновить файлы перевода i18n

Вопрос или проблема

import i18next from "i18next";
import I18NextHttpBackend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
import { getLanguageData } from "./languageData";

const languageData = getLanguageData();

i18next
  .use(I18NextHttpBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: "ru",
    lng: "en",
    keySeparator: ".",
    interpolation: {
      escapeValue: false,
    },
    saveMissingTo: "all",
    ...languageData,
  });

export default i18next;

import translationEN from "./en/en.json";
import translationRU from "./ru/ru.json";

const WEBLATE_URL = "   https://weblate.hdcem.ru/api/";

const envMode = process.env.NODE_ENV;

const devLanguageData = {
  backend: {
    loadPath: `${WEBLATE_URL}translations/digital/zakaz/{{lng}}/file/`,
    addPath: "src/utils/i18n/{{lng}}/{{lng}}.json",
    customHeaders: {
      Authorization: process.env.REACT_APP_WEBLATE_API_KEY,
    },
  },
};

const resources = {
  resources: {
    en: {
      translation: translationEN,
    },
    ru: {
      translation: translationRU,
    },
  },
};

export const getLanguageData = () => {
  if (envMode === "development") return devLanguageData;
  if (envMode === "production") return resources;

  return resources;
};

Ответ или решение

Обновление файлов перевода i18n в приложении с использованием Weblate

В современном программировании важность многоязычной поддержки трудно переоценить. Используя библиотеку i18n-react, вы можете эффективно управлять системой перевода в вашем приложении. В этом ответе мы рассмотрим, как обновлять файлы перевода в формате JSON, получая их из API Weblate, и как это сделать правильно при развертывании вашего проекта.

1. Понимание текущей конфигурации

Ваш текущий код уже включает в себя систему, использующую i18next и i18next-http-backend. При этом важный аспект заключается в том, что для разработки вы получаете переводы через API Weblate, а для продакшн версии — из локальных файлов JSON. Это оправданный подход, так как он позволяет тестировать разные языки в режиме реального времени.

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

2. Настройка сохранения переводов

Чтобы сохранять переводы, получаемые из API Weblate, в локальные JSON файлы, вам необходимо использовать опцию addPath в конфигурации бэкенда. Убедитесь, что ваш addPath указывает на правильный путь для записи файлов. Ваш код уже содержит addPath: "src/utils/i18n/{{lng}}/{{lng}}.json", что позволяет сохранять переводы.

Однако упомянутый вами saveMissing и saveMissingTo нуждаются в корректной настройке, чтобы переводы действительно сохранялись. Убедитесь, что:

• saveMissingTo: "all" установлен для сохранения всех отсутствующих переводов.
• В вашем коде есть функция или механизм, который будет обрабатывать эти сохранения, например, сохранение файлов в локальную файловую систему после того, как получите переводы из Weblate.

Вот пример того, как вы можете расширить вашу конфигурацию, чтобы это работало:

const devLanguageData = {
  backend: {
    loadPath: `${WEBLATE_URL}translations/digital/zakaz/{{lng}}/file/`,
    addPath: "src/utils/i18n/{{lng}}/{{lng}}.json",
    customHeaders: {
      Authorization: process.env.REACT_APP_WEBLATE_API_KEY,
    },
  },
  saveMissing: true, // Включите сохранение отсутствующих переводов
};

3. Обработка сохранения файлов

Для того чтобы переводы действительно сохранялись в локальные JSON файлы, необходимо реализовать логику, которая будет реагировать на события сохранения после обновления переводов. К примеру, можно использовать встроенные функции i18next для обработки события added после того, как данные получены.

Вот пример, как вы могли бы это реализовать:

i18next.on('added', (lng, ns) => {
  // Логика для сохранения перевода в файл
  saveTranslationToFile(lng, ns);
});

const saveTranslationToFile = (language, namespace) => {
  const translations = i18next.getResourceBundle(language, namespace);
  const filePath = path.join(__dirname, `src/utils/i18n/${language}/${language}.json`);

  fs.writeFileSync(filePath, JSON.stringify(translations, null, 2));
};

4. Проверьте работу на локальном сервере

После внесения изменений обязательно протестируйте работу приложения в локальном режиме (development). Убедитесь, что при запросе переводов из Weblate ваш код корректно сохраняет их в указанные JSON файлы, а затем корректно загружает их при развертывании.

Заключение

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