Экосистема FormatJS представляет собой набор библиотек и утилит, ориентированных на интернационализацию JavaScript-приложений с использованием ICU MessageFormat. Архитектура инструментов построена вокруг идеи разделения сообщений, их извлечения, компиляции и строгой типизации на этапе разработки.
Основная цель dev-инструментов — перенести максимум ошибок i18n из рантайма в этап сборки и обеспечить управляемое масштабирование переводов в больших приложениях.
Официальная документация и набор утилит доступны в рамках экосистемы: FormatJS
Инструменты FormatJS делятся на несколько уровней:
Ключевая концепция — сообщение (message descriptor), которое имеет стабильный идентификатор и структуру:
{
id: "user.greeting",
defaultMessage: "Hello, {name}!",
description: "Greeting message on dashboard"
}Одним из центральных инструментов является Babel-плагин для обработки сообщений.
Используется для автоматического извлечения сообщений из кода на этапе транспиляции.
Основные функции:
defineMessages, FormattedMessage,
intl.formatMessageПример конфигурации:
{
"plugins": [
["formatjs", {
"idInterpolationPattern": "[sha512:contenthash:base64:6]"
}]
]
}Особенность подхода — возможность детерминированной генерации идентификаторов, что снижает риск конфликтов переводов.
CLI является ядром автоматизации.
formatjs extractformatjs compileformatjs compile-folderКоманда анализирует исходный код и формирует набор сообщений:
formatjs extract "src/**/*.ts" --out-file messages.jsonНа выходе формируется структура:
[
{
"id": "user.greeting",
"defaultMessage": "Hello, {name}!",
"description": "Greeting message on dashboard"
}
]Команда преобразует ICU MessageFormat в оптимизированные данные:
formatjs compile messages.json --out-file compiled.jsonРезультат оптимизирован для быстрого выполнения в рантайме и минимизации парсинга ICU-строк.
Инструменты разработки FormatJS строго опираются на ICU синтаксис.
Пример сложного сообщения:
{
id: "cart.summary",
defaultMessage:
"You have {itemCount, plural, one {# item} other {# items}} in your cart"
}CLI и Babel-плагины выполняют:
Плагин eslint-plugin-formatjs обеспечивает статический анализ кода.
formatMessageid у сообщенийdefaultMessageПример конфигурации:
{
"plugins": ["formatjs"],
"rules": {
"formatjs/enforce-id": "error",
"formatjs/enforce-description": "warn"
}
}Lint-слой критически важен для больших команд, где переводческие ключи могут теряться или конфликтовать.
FormatJS поддерживает строгую интеграцию с TypeScript.
Основные возможности:
Пример типизированного сообщения:
type Messages =
| "user.greeting"
| "cart.summary";При использовании react-intl обеспечивается:
{name}, {count}Одним из вспомогательных инструментов является псевдолокализация.
Она используется для выявления:
Пример трансформации:
Hello, user
→ [Ĥḗļļő, üšëř]CLI позволяет генерировать псевдолокализованные файлы через pipeline компиляции сообщений.
Используется loader для предварительной обработки сообщений:
Типичная схема:
source code → babel-plugin-formatjs → extracted messages → compiled runtime formatFormatJS позволяет минимизировать:
Инструменты разработки тесно связаны с рантаймом через react-intl.
Оптимизации включают:
FormatJS dev-tools обеспечивают работу с файлами переводов:
Типичный workflow:
Инструменты позволяют выявлять:
Пример проблемы:
// default
"You have {count} items"
// translation (error)
"Tu as {number} articles"CLI обнаруживает несовпадение count vs
number.
FormatJS включает дополнительные утилиты:
AST-уровень позволяет переписывать сообщения без потери контекста, что важно при масштабных рефакторингах.
В больших проектах dev-инструменты FormatJS применяются в монорепозиториях:
Проблемы, решаемые инструментами:
FormatJS инструменты часто включаются в пайплайны:
Пример CI шага:
formatjs extract src --out-file messages.json
git diff --exit-code messages.jsonТипичные практики использования dev-инструментов:
Такая модель снижает количество runtime-ошибок и упрощает поддержку многоязычных интерфейсов в крупных JavaScript-приложениях.