Альфа
Lingo.dev Compiler находится в альфа-версии. Он нестабилен, не рекомендуется для использования в продакшене, а API могут меняться от релиза к релизу.
Lingo.dev Compiler включает инструменты для разработки, которые помогают быстрее работать с многоязычным UI без вызовов внешних API. С ними проще проверить, что весь текст можно перевести, протестировать интерфейс с разной длиной строк и отладить проблемы с переводом прямо в процессе разработки.
Псевдопереводчик#
Псевдопереводчик мгновенно создаёт тестовые переводы, оборачивая исходный текст в визуальные маркеры. API-ключ не нужен, сетевые вызовы не выполняются, а результат появляется сразу.
Включите его в конфигурации Compiler:
{
dev: {
usePseudotranslator: true,
},
}Что получается#
| Исходный текст | Псевдоперевод |
|---|---|
Welcome | [!!! Welcome !!!] |
Sign in to your account | [!!! Sign in to your account !!!] |
Items: {count} | [!!! Items: {count} !!!] |
Маркеры ([!!! ... !!!]) помогают визуально отличать переведённый текст от непереведённого. Если при включённом псевдопереводчике вы видите в UI обычный английский текст, значит, Compiler его не обрабатывает.
Сценарии использования#
Найдите непереведённые строки
Запустите приложение с включённым псевдопереводчиком. Любой текст, который отображается без маркеров [!!! ... !!!], Compiler не распознаёт. Обычно это происходит, когда текст хранится в переменных вне JSX или компонент находится вне директории sourceRoot.
Проверьте вёрстку на более длинном тексте
Псевдопереводы длиннее исходного текста из-за символов-маркеров. Это имитирует языки вроде немецкого или французского, где текст обычно на 20–30% длиннее, чем в английском, и помогает заранее заметить проблемы с переполнением вёрстки.
Проверьте интерполяцию
Плейсхолдеры вроде {count} и {name} должны находиться внутри маркеров псевдоперевода. Если плейсхолдер оказывается вне маркеров или вовсе пропадает, возможно, Compiler сохраняет его некорректно.
Псевдопереводчик использует тот же пайплайн перевода, что и реальные провайдеры: проходит те же этапы анализа AST и инъекции кода. Единственное отличие — на этапе генерации перевода вместо вызова LLM подставляются маркеры.
Сервер переводов#
Во время разработки Compiler запускает локальный сервер переводов, который обрабатывает запросы на перевод по требованию. Сервер стартует автоматически, когда вы запускаете npm run dev.
Как это работает#
Сервер переводов прослушивает локальный порт и обрабатывает запросы на перевод из пайплайна dev-сборки. Когда Compiler обнаруживает новую или изменённую строку, он отправляет её на сервер, а тот перенаправляет запрос настроенному провайдеру перевода или псевдопереводчику.
Конфигурация порта#
Сервер автоматически находит свободный порт в настраиваемом диапазоне:
{
dev: {
translationServerStartPort: 60000,
},
}| Параметр | По умолчанию | Описание |
|---|---|---|
translationServerStartPort | 60000 | Начальный номер порта. Сервер последовательно проверяет порты (60000, 60001, ..., 60099), пока не найдёт свободный. |
translationServerUrl | определяется автоматически | Полностью переопределяет URL сервера. Полезно, если нужно подключиться к удалённому серверу переводов или к собственному прокси. |
Если все порты в диапазоне 60000–60099 заняты, сервер не запустится. См. Troubleshooting, чтобы узнать, как решить конфликты портов.
Dev-виджет (скоро)#
Встроенный в браузер редактор переводов, в котором можно просматривать и редактировать переводы в реальном времени прямо во время навигации по приложению. Виджет накладывается поверх UI и показывает детали перевода для каждого текстового элемента.
Планируемые возможности:
- Нажмите на любой текстовый элемент, чтобы увидеть исходный текст, переводы и метаданные
- Редактируйте переводы прямо в браузере
- Изменения сразу сохраняются в
.lingo/metadata.json - Переключайтесь между локалями без перезагрузки
Статус
Dev-виджет сейчас в разработке и пока недоступен. Следите за обновлениями релизов в changelog.
Рекомендуемая конфигурация для разработки#
Чтобы получить максимально быстрый цикл разработки, используйте псевдопереводчик вместе со стандартными настройками сервера переводов:
{
dev: {
usePseudotranslator: true,
translationServerStartPort: 60000,
},
}Когда захотите посмотреть реальные переводы, отключите псевдопереводчик и перезапустите dev-сервер:
{
dev: {
usePseudotranslator: false,
},
}После этого Compiler будет генерировать реальные переводы для новых и изменённых строк с помощью настроенного translation provider.
