Magic Translate vs. react-intl
react-intl является частью FormatJS. Он форматирует сообщения, даты и числа в соответствии с синтаксисом сообщений ICU, а вы предоставляете переводы для каждого языка. Magic Translate переводит текст в ваших компонентах напрямую, поэтому вы не пишете и не храните никаких переводов.
С первого взгляда
| Magic Translate | react-intl | |
|---|---|---|
| Как вы пишете текст | Ваши собственные слова, завернутые в <T> | <FormattedMessage> с идентификатором и сообщением по умолчанию |
| Переводы | Машинный перевод, созданный автоматически | Вы извлекаете сообщения и переводите их |
| Файлы сообщений | Нет | Один файл на каждый язык |
| Даты и числа | Используйте API-интерфейсы браузера Intl | Встроенные компоненты и синтаксис ICU |
| Рендеринг на сервере | Компоненты сервера React и Next.js | Да, с дополнительной настройкой |
| Цена | Бесплатный план, затем ежемесячные планы в зависимости от использования | С открытым исходным кодом и бесплатно |
Чем отличается код
В react-intl каждое сообщение имеет идентификатор, а переводы хранятся в отдельных файлах:
import { FormattedMessage } from 'react-intl';const Welcome = () => (<FormattedMessage id="home.welcome" defaultMessage="Welcome back!" />);// Then extract the messages, translate them for every language// and load the right file when the app starts.
С помощью Magic Translate вы пишете сообщение один раз:
import { T } from '@magic-translate/react';const Welcome = () => <T>Welcome back!</T>;
Когда выбирать Magic Translate
- Вы хотите, чтобы ваше приложение было на многих языках без необходимости перевода.
- Ваши тексты часто меняются, и вы хотите, чтобы все языки оставались в актуальном состоянии.
- Вы хотите освоить новые языки, не платя переводчикам и не дожидаясь их привлечения.
Когда выбирать react-intl
- Вам нужен синтаксис сообщений ICU для сложных множественных чисел и пола.
- Ваши переводы должны быть написаны или проверены людьми.
- Вам нужна бесплатная библиотека с открытым исходным кодом без внешних сервисов.
Использование обоих
Они хорошо работают вместе. Используйте API react-intl или Intl для форматирования дат, чисел и валют и Magic Translate для перевода текста вокруг них.
Готовы попробовать? Следуйте инструкциям по началу работы, чтобы перевести первый компонент за пять минут.