На рынке доступны различные библиотеки для добавления интернационализации в приложение React.
В этом примере я покажу вам интеграцию LinguiJS в приложение React. Мы можем использовать LinguiJS в основном Javascript, React, React Native, Angular, Vue, а также во многих библиотеках и фреймворках.
Начнем с интеграции
1. Создайте приложение React.
2. Установите @lingui/cli, @lingui/macro и базовые пакеты Babel как зависимости разработки и @lingui/react как зависимость времени выполнения.
3. Создайте .linguirc в корневом каталоге вашего проекта.
Формат PO рекомендуется LinguiJs. Lingui поддерживает различные другие форматы, дополнительную информацию вы можете найти в документации.
Я лично предпочитаю использовать формат JSON, и если вы также хотите использовать JSON, вам нужно передать «формат»: «минимальный» вместо «po».
4. Добавьте указанные ниже скрипты в package.json под ключом scripts.
5. Добавьте языковой стандарт, который хотите использовать в своем приложении.
6. Проверьте настройку, запустив npm run extract.
Ура Установка сделана. Теперь нам нужно интегрировать LinguiJS в приложение React.
Создать I18nLoader
Подключитесь к хранилищу redux и получите данные локали из состояния redux.
Оберните приложение с помощью I18nLoader
Теперь мы собираемся подготовить контент нашего приложения к переводу.
Везде, где нам нужно сделать текст переводимым, нам просто нужно обернуть его макросом ‹Trans›.
После обертывания текста макросом Trans мы хотим сохранить ключи для текста, который мы хотим перевести, чтобы нам нужно было запустить команду извлечения.
Как только вы запустите команду извлечения, она добавит весь текст, заключенный в ‹Trans›, в качестве ключа во все файлы локали. По умолчанию файл с исходным языком в формате .linguirc также будет иметь переносимый текст в качестве значения, в нашем случае это английский язык.
Поздравляем, вы закончили базовую настройку и интеграцию.
