Автор оригинала: FreeCodeCamp Community Member.
Preethi Kasireddy
Интернационализация – это большая проблема. Если вы хотите, чтобы ваше заявление о повлиялении во всем мире вы должны иметь дело с языковыми барьерами.
К сожалению, дорога от «Ваши средства прибудет к 7 июля» на «VOS Fonds Arriveront Le 7 Juillet» далеко не просто.
Прежде чем ваша заявка может добиться успеха за пределами англоязычного мира, вам придется адаптировать все ваши строки, даты и цифры к конвенциям разных культур.
Разработчики называют эту практику Интернационализация (который часто сокращается в « I18N », потому что есть 18 букв между « I » и « » в словах I Nnternationalizatio n |.)
Одна из причин, по которой мы упускаем просмотр интернационализации – это просто потому, что трудно получить правильно. Каждый язык имеет разные правила и конвенции. Адаптация к этим правилам и конвенциям занимает время и усилия.
Решение: отреагируйте в Intl
Но интернационализация не должна быть тяжелой, благодаря новой библиотеке Ractive. Реагировать INTL это проект с открытым исходным кодом из Yahoo, а также часть Format.js , коллекция библиотек JavaScript для интернационализации, которая строит встроенный INTL API JavaScript.
Реагировать INTL Библиотека производит интернализацию в реакции. Простые, с компонентами по полке и API, которые могут обрабатывать все, от форматирования строк, дат и чисел, к плюрализации.
Давайте дадим ей прогулку.
Основные понятия
Вот основные концепции, которые вам понадобится под вашим ремнем, чтобы получить максимальную отдачу от Intl React:
API интернационализации JavaScript
JavaScript имеет Интернационализация API Спецификация, которая определяет Intl объект как стандартный встроенный глобальный объект.
Реагирование Intl по существу использует и опирается на эту API. Пока браузер поддерживает эти API, Rect Intl будет продолжать работать свою магию.
Примечание. Единственный браузер, который в настоящее время поддерживает эти API, является Safari. Мы будем использовать полифилл, чтобы преодолеть это в образце проекта ниже.
Модульные бундлеры
React Intl распределяет свой пакет через модули ES6, Commonjs и UMD. Следовательно, он очень хорошо работает с Bundlers, как WebPack, Browserify и Rollup.
В образце проекта мы будем использовать WebPack в качестве нашего модуля Bundler.
Если вы не планируете использовать модуль Bundler, чтобы загрузить Intal Intl в ваше приложение, я рекомендую документацию для получения дополнительной информации о других подходах (например, через Node.js).
Загрузка данных локали
Реагирование Intl опирается на данные локали для поддержки форматирования множественного и относительного времени. Данные локали определяют следующее для каждой конкретной локали:
- Схема спецификации на локаль для форматирования и даты разборки, раз, время, часовые зоны, цифры и ценности валюты
- Переводы названий валют, эпохи, месяцев, будних дней и т. Д.
- Информация о языке и сценарии (множественные случаи, используемые символы, гендерные списки, капитализация, направление записи и т. Д.)
- Информация о стране (валюта, календарь, предпочтение, недельные конвенции, телефонные коды и т. Д.)
Если вы используете Browserify, WebPack или Rollup для Bundle Reg Intl для браузера, он будет содержать только данные локали для базового английского по умолчанию. Остальные данные локали это не включены в основную библиотеку. Таким образом, в этом образце проект мы осмотрим, как импортировать данные локали на язык, вы решите поддержать в вашем приложении.
Имейте в виду, что если вы используете INTL INTL через Node.js, все данные локали будут загружены в память, поэтому вы можете пропустить этот шаг.
Форматирование данных с использованием компонентов реагирования против API
Библиотека предоставляет два способа отформатировать строки, цифры и даты: Реагировать Компоненты или API Отказ
Реагистрационную компонент:
API:
Я принимаю первый подход, когда это возможно, используя декларативные идиоматические-реагирующие компоненты для форматирования данных над императивными API.
Преимущество этого подхода заключается в том, что он позволяет нам составлять компоненты с другими компонентами, B) позволяет насыщенным текстовым и строковым форматированием, C) предоставляет предупреждения о форматировании форматирования, а также D). должен быть необходим Чтобы избежать дорогих операций форматирования.
Конечно, есть времена, когда ваш единственный выбор – использовать API (например: передача строки в виде опоры, атрибут имени HTML-элемента и т. Д.), Чтобы он все еще пригодился.
Образец проекта
Лучший способ учиться, чтобы увидеть живой пример. Для этого поста я сделал Простой реактивный проект Который состоит из основного компонента заголовка, компонента подзаголовки и нескольких компонентов виджета, каждый из которых со своими собственными заголовками и телом.
Во-первых, мы пройдем через процесс настройки Intl Intl. Затем мы будем использовать компоненты и API для преобразования строк, номеров и дат, используемых в компонентах.
Установка
Предположим, у нас есть существующее приложение React, от которого мы работаем. Во-первых, вам нужно установить пакет Intl Intl:
Далее нам нужно будет установить плагин Babel для React Intl:
На самом деле иметь плагин Babel сделать свое магию, нам нужно настроить наши .babelrc Файл, чтобы включить этот плагин. Вот что мой .babelrc Похоже, с добавлением к нему плагин React-Intl (линии 6-11):
Какой этот плагин Babel является извлечение всех строковых сообщений в вашем приложении, которые определены с использованием либо определенные динамики ,
(Обратите внимание, что Deformessages ,
После извлечения он генерирует файлы JSON, которые содержат строковые сообщения и помещает их в каталог, который вы определены в MessageDir путь выше.
Загрузка данных
Далее давайте загрузим соответствующие данные локали для языков, которые нам нужно поддерживать.
Как я уже упоминал выше, если вы подключаетесь к браузеру, используя WebPack, Browserify или Rollup, Rect Intl наступает по умолчанию только по умолчанию. Поэтому мы должны добавить другие данные локали вручную.
В файле корневого компонента мы добавляем данные локали, используя AddLocaledata API. Затем данные будут переданы содержимое модуля данных локали, которые затем будут зарегистрированы в реестре данных Locale Data.
Для этого образца проекта я собираюсь предположить, что мы поддерживаем 4 языка: английский, испанский, французский и итальянский.
Примечание : Если ваше приложение поддерживает гораздо больше, рекомендуемый подход к добавлению данных локали – динамически загружать данные локали на основе языка текущего пользователя. Прочитайте реагирование Intl Docs для получения дополнительной информации об этом подходе.
Создайте контекст I18N в вашем приложении React
До сих пор мы установили пакет Intl Intl, настроив наш .babelrc Плагин и загрузил соответствующие данные локали.
Один последний шаг – создать I18n Контекст для всех наших компонентов реагирования, так что текущее локаль пользователя и переведенное сообщение (на основе локала пользователя) можно загрузить в компоненты RACT INTL, которые вы определяете в вашем приложении.
Чтобы сделать это, мы сначала определите сообщения, чтобы пройти IntlProvider на основе локали пользователя (см. Линии 18-26 ниже). Затем мы обертываем компонент Root React с IntlProvider, который является Именный экспорт, предоставленный React-INTL (см. Линии 31-33):
В этой настройке мы предполагаем, что наши переведенные данные будут жить в build/locales/data.json И что данные сгруппированы по языку, как так:
Построить сценарий для перевода
Теперь, когда у нас есть конфигурация все сделана, давайте посмотрим на то, как мы можем построить простой скрипт, который будет схватить все строки, которые варятят для нас в нескольких файлах JSON и объединяют их в один файл.
Точка этого скрипта состоит в том, чтобы накапливать все английские строки, чтобы мы могли затем загрузить эти строки в службу перевода, их переведены на разные языки, которые мы поддерживаем, а затем поместите результаты в build/locales/data.json файл, который мы использовали выше. Однажды там IntlProvider Компонент может наконец загрузить их в наш корневой компонент.
Поскольку нам не нужно делать переводы в этом посте, мы пропустим этот шаг и просто построить сценарий, который помещает все в один файл. Просто помните, чтобы помнить поставщик услуг перевода в реальных приложениях:)
Все кредиты отправляются в авторов библиотеки RACT INTL для генерации этого сценария ниже:
Шаги для преобразования даты, номеров и строк с Intal Intl
Хорошо – мы наконец готовы сделать некоторые форматирование!
Применение приложения – простая макет с Заголовок , Subheader и виджеты Каждый из которых содержит строки, цифры и/или даты:
Ничего изощренного, но достаточно, чтобы нас начали.
Заголовок
Во-первых, мы посмотрим на заголовок, который говорит: «Добро пожаловать на вашу приборную панель, Преем!»
Чтобы преобразовать это, мы будем использовать Форматмесьмессаж компонент:
Форматмесьмессаж Компонент имеет реквизиты, которые соответствуют что-то называемое « сообщение дескриптор » в реакции Intl. Дескриптор сообщения Является ли формат, используемый для определения сообщений/строк/строк по умолчанию и полезен для предоставления данных, необходимых для наличия строк/сообщений. Он содержит следующие свойства:
- ID : Уникальный, стабильный идентификатор для сообщения
- Описание : Контекст для переводчика о том, как он используется в UI (необязательно)
- DefaultMessage : Сообщение по умолчанию (на английском языке)
ID опоры должны быть уникальными для каждого сообщения, определенного в вашем приложении. Что удивительно, что DefaultMessage могут быть переданы данные из реквизита, как в том случае в Имя выше. (Обратите внимание, что значения, которые передаются в качестве данных, не будут переведены – они просто вставляются в окончательную переведенную строку как есть.)
Подзаголовок
Далее давайте посмотрим на подзаголовок, который немного больше участвует:
Возможность составлять компоненты в других компонентах (то есть есть отформатированные * Предметы в другом Форматированные * Пункт) – это мощная особенность Intl Intl.
Вы можете увидеть в приведенном выше примере, что непрочитанный это Форматтемноморс и Уведомления это Форматыбллурство и что оба являются ценностями, переданными в ФорматтуемыеМЕССЫ ‘s DefaultMessage Отказ Красивый!
Еще одна функция Slick – Формалетативный , который сделает отформатированное относительное время:
После перевода и отформатированного, он будет читать: “Вы в последний раз вошли в систему 4 часа назад!” (Или, однако, давно Lastlogin был.)
Передача отформатированных строк в качестве компонентов
На вышеуказанных двух фрагментах мы видели, как использовать Отформатирован * Компоненты, чтобы определить строки, цифры, даты и плюрализацию.
Тем не менее, существует множество случаев, когда необходимо пройти отформатированные строки как реквизиты или использовать отформатированные строки для имени HTML-компонента. Форматмесьмессаж Компонент не очень хорошо работает в таких случаях.
К счастью, отреагируйте Intl определенные динамики API допускает нам обязательно определить все строки компонента, затем пропустите их как реквизит к компоненту.
Давайте попробуем этот подход для заголовков и корпуса виджета. Во-первых, мы используем определенные динамики Определить наши строки:
Затем, предполагая, что у нас есть компонент виджета, который ожидает, что заголовок и реквизит тела мы можем продолжаться так:
Одна вещь, которую вы могли бы заметить в первом виджете, заключается в том, что мы также можем передавать данные на строки, определенные в определенные динамики Отказ Здесь мы прошли текущую отформатированную дату в качестве значения Дата Отказ Довольно аккуратно, да?
API также хорошо работает для форматирования чисел, дат, времена, относительных времен и плюрализации (проверьте их документы для большего количества в этом)
Как сделать это работать в Safari
Теперь, когда мы почти закончили, я брошу один последний кривый мяч на вас:
Текущая настройка не будет работать для браузеров Safari:(
Как уже упоминалось выше, это потому, что в настоящее время Safari не имеет нативной поддержки API интернационализации JavaScript.
К счастью, есть еще способ сделать эту работу для пользователей Safari. Что нам нужно сделать, это использовать Intl Polyfill Отказ Есть несколько разных способов загрузки этого. Давайте продолжим использовать WebPack, ради примера:
Во-первых, мы устанавливаем Intl Пакет из НПМ:
Далее мы напишем простое, если только загрузка только загрузки полифилл, если нет поддержки браузера на Intl (см. Линии 30-57). Это следует избегать загрузки библиотеки и всех данных локали в ваше приложение, когда не нужно.
Как вы можете видеть, первое, что проверить, если Intl Глобал это не Доступно в окне. Если нет, то мы загружаем данные о полифиллировании Intl и связанные данные локали, а затем рендерируйте компонент. В противном случае мы просто видим компонент.
И наконец, вот наше предварительно переведенное приложение (все еще на английском конечно). Я оставлю вас с последним шагом, который находит провайдер перевода и переведен эти строки!
Другие советы
Я надеюсь, что этот пост достаточно, чтобы начать превращение приложения вашего SPAZZEY RACT в тот, который имеет другую к другим культурам и языкам.
Прежде чем подписать, вот несколько других советов, которые следует учитывать при интернационализации вашего приложения:
- Гибкие компоненты: Создайте свои компоненты, такие, что они гибкими и позволяют расширить текст и усадку. Некоторые языки могут расширяться гораздо больше или сокращаться намного меньше английского. Если вы не учитываете это, ваш макет может выглядеть невыносимо после перевода.
- Соответствующий размер шрифта: Используйте размер шрифта, который будет хорошо работать со всеми языками, которые вы поддерживаете. Некоторые языки, такие как японский и китайский, нужны большие размеры шрифта.
- UTF-8 : Используйте UTF-8 везде. Это включает в себя в вашем HTML, на стороне сервера, база данных и т. Д. В отличие от других кодировков, кодировкой UTF-8. Обрабатывает практически все языки действительно хорошо.
- Нет текста в изображениях: Избегайте использования текста на изображениях, потому что перевод текста в графике чрезвычайно трудно, и не стоит боли.
- Не разделяйте свои строки: Например, если у вас есть «Ваши средства, прибудут к 7 июля», – избегайте расщепления строк, таких как «Ваши средства прибудут» и «7 июля». Комбинация может работать только на английском языке благодаря вариациям порядка слов на других языках.
Заключение
Как всегда, не стесняйтесь комментировать предложения и вопросы. Я хотел бы услышать это:)
Весь код для приложения образца можно найти на GitHub здесь: https://github.com/iam-peekay/inbox-react-intl.