Современные монолиты с интернационализацией: InertiaJS, React и Laravel
InertiaJS — это адаптер для монолитных приложений, позволяющий использовать фреймворки/библиотеки и т.п. из экосистемы JavaScript. В этой статье мы рассмотрим только, как выполнить интернационализацию с использованием готовых инструментов Laravel.
Стандартная интернационализация Laravel
В разделах интернационализации или локализации фреймворка Laravel явно указано, что по умолчанию Laravel не поставляется с созданными каталогами интернационализации, для этого необходимо запустить php artisan lang:publish. По умолчанию Laravel создаст структуру в этом стиле.
/lang
/en
messages.php
/es
messages.php
Чтобы использовать это руководство по инерции, удалите подкаталоги с en, es, наш метод интернационализации будет использовать файлы JSON.
Интернационализация с инерцией
1) Установка языка по умолчанию для вашей системы
Насколько это важно? Что ж, это будет тот язык, на котором вы будете программировать ежедневно. Выбирайте его тщательно, всегда старайтесь использовать язык, носителем которого является ваш целевой клиент.
Вы уже сделали выбор? Итак, начнем.
2) Создание файлов интернационализации
Внутри каталога lang/ создайте файл с названием вашей языковой локализации в формате JSON. Пример: в моей системе языком по умолчанию является английский, но эту систему будут использовать и бразильцы, поэтому я создам файл lang/pt_br.json, в котором определю строки с помощью ключа и значения, с английского на бразильский португальский. Файл будет иметь следующую возможную структуру.
{
"Log in":"Entrar",
"Password": "Senha",
"Remember me": "Lembrar do ultímo acesso",
"Email":"E-mail",
"Forgot your password?":"Esqueci minha senha",
"Name":"Nome",
"Confirm Password": "Confirme sua senha",
"Already registered?": "Já possui um registro?",
"Register": "Registrar"
}
Теперь у вас есть файлы интернационализации. Вы можете создать столько файлов, сколько захотите, просто убедитесь, что имя файла совпадает с именем местоположения; эта информация обычно содержится в env ключе APP_LOCALE вашего приложения.
3) Отправка данных на фронтенд
Эта часть проста в вашем промежуточном программном обеспечении Inertia. Введите следующий код.
$locale = app()->currentLocale();
$filePath = base_path('lang/' . $locale . '.json');
$language = File::json($filePath);Теперь просто отправьте эти данные на фронтенд. Дружеский совет — поместить этот код во вспомогательную функцию. Ваше промежуточное программное обеспечение будет выглядеть примерно так.
l — функция для перевода.
4) Потребление на внешнем интерфейсе
Теперь, когда мы можем получить доступ к этим данным через инерционный хук usePage().props, мы можем создать функцию в нашем интерфейсе utils, которая возвращает переведенное значение.
export function t(key: string) {
// eslint-disable-next-line react-hooks/rules-of-hooks
const { lang } = usePage<PageProps>().props;
if (!lang) return key;
if (!lang[key]) return key;
return lang[key];
}Таким образом, теперь мы можем написать наши компоненты интерфейса следующим образом.
<InputLabel htmlFor="email" value={t('Email')} />Таким образом, упрощается интернационализация. Конечно, есть проблемы, которые этот подход не решает, такие как плюрализация и субституция. Но его цель — решить проблему для приложений с простым использованием интернационализации. Если в вашем приложении требуются другие вещи, вы можете оставить комментарий здесь, чтобы мы могли обменяться идеями и, возможно, придумать решение.
