Об авторе Kid Ant Financial Data Experience Технологическая команда

задний план

Проект React, который нуждается в интернационализации, повторяется уже больше года, и в нем много файлов, включая jsx и обычные объектные файлы js. По приблизительным оценкам, существует несколько тысяч китайских записей. В этой статье сначала представлена принятая схема интернационализации, а затем приводится процесс интернационализации и сценарий, разработанный мной.i18n-pick, согласно учебнику, это может помочь проекту jsx для быстрой интернационализации за 5 минут.

выбор плана

Сначала представим мой выбор программ интернационализации. Международных программ много, и у меня здесь несколько основных видов:

Преобразование во время компиляции: например, WEPACK I18N-WEBPACK-Plugin, время упаковки _ ('KEY'), чтобы сбежать
Преобразование во время выполнения: react-intl и т. д., писать записи на китайском как intl.get() и получать тексты на китайском во время выполнения.
Схема wordpress getText: gettext — это хук-фильтр для замены и локализации текста перевода, заменяющий текст, содержащийся в функциях __(), _e(), _x(), _ex() и _n()

Так как в качестве библиотеки визуальных компонентов в проекте я выбрал antd. Поэтому я хочу сохранить то же самое с официальным методом интернационализации, предоставляемым antd. antd рекомендует react-intl, но многие люди также рекомендуют другой подобный react-intl-universal, оба из которых относительно зрелые. Итак, я сравнил два:

	react-intl	react-intl-universal
Переключение без обновления страницы	превосходно	низший
поддержка файлов js (важно)	низший	превосходно
существительное в единственном числе и даже, по умолчанию, html	превосходно	превосходно
неразрушающий	Плохо (реализация кода декоратора изменит ссылку)	превосходно

Существительное в единственном числе и четное, значение по умолчанию, а функция html имеет и то, и другое. Я не буду много говорить здесь, если вас интересуют конкретные функции, вы можете перейти к API. Что больше беспокоит, так это поддержка файла js. react-intl поддерживает использование только в содержимом jsx-файлов, но из-за конфигурационного программирования проекта многие китайцы пишутся в js-объектах. react-intl не поддерживает использование в обычных js объектах, что очень неудобно. И его реализация декоратора изменит ссылку на компонент. Единственное его преимущество в том, что его переключение не требует обновления страницы, а такая низкочастотная операция обновляет страницу.

По вышеуказанным причинам в качестве решения для интернационализации в конечном итоге был выбран react-intl-universal. Однако, когда я на самом деле использовал его позже, я обнаружил, что способ, который он предоставил для поддержки js-объектов, был не очень хорошим, поэтому я напрямую принял идею react-intl-universal. Просто оберните их зависимости intl-messageformat~ Я не буду подробно описывать их здесь, но их официальную документацию по API можно найти на официальном сайте.

После выбора плана интернационализации начинается этап реализации. Независимо от того, какая схема выбрана выше, для кодирования в основном требуется специальная форма. Либо intl.get(), либо добавьте _# перед копией. Для проектов, которые итерировались в течение длительного времени, это требует большой работы. Извлечение и замена китайского текста. Поделитесь сценарием прямо здесьi18n-pick, который описывает весь процесс интернационализации.

Используйте учебник

В основном разделен на 3 шага: установка, сканирование и извлечение, а затем использование инструмента перевода для перевода записи.Конкретные шаги заключаются в следующем:

Установить

cnpm i i18n-pickЗеркало Taobao, используемое cnpm, будет работать быстрее.

сканирование

./node_modules/i18n-pick/bin/i18n-pick.js scan [path]Путь в конце команды выбирает каталог вашего кода.После запуска в корневом каталоге проекта будет сгенерирована папка i18n-messages, включающая три файла: jsx.text, text.text и zh-CH.json. Конкретная реализация заключается в вызове метода babel transformFileSync.При компиляции в синтаксическое дерево анализируются следующие типыbabel-type:

JSXAttribute
JSXText
AssignmentExpression
ObjectProperty
ArrayExpression

Основы здесь охватывают все ситуации.Если чего-то не хватает, пожалуйста, свяжитесь со мной. Сравните проанализированные значения с /[\u4e00-\u9fa5]/. Запишите имя файла, количество строк и содержание текста, содержащего текст на китайском языке. Китайский текст в JSX хранится в jsx.text, а китайский текст в JS обычно хранится в text.text.

Причина отдельного хранения в том, что при замене копию в JSX нужно заключать в фигурные скобки.

В то же время я сохраню извлеченное содержимое копии в zh-CH.json. Чтобы сотрудничать с использованием инструмента перевода atool-i10n, формат хранения в json также предоставляется в соответствии с его требованиями. Вот небольшой совет, см. приложение.

извлекать

./node_modules/i18n-pick/bin/i18n-pick.js pickЗатем выполните операцию выбора, которая заключается в анализе содержимого файлов jsx.text и text.text построчно и замене содержимого файлов. В начале я установил значение ключа как автоинкрементное число. Чтобы обеспечить читабельность исходного кода, я также поместил исходный текст в/**/Форма комментариев отмечена в конце текста. Позже узнал из области комментариевlany9527предложение одноклассника. Используйте китайский язык в качестве значения ключа~~ Затем я импортирую зависимости в заголовок файла. Эффект следующий:

base/reactIntlUnicersalЭтот файл необходимо разместить в вашем собственном проекте, код может ссылаться наСвязь.

переводить

Тогда рекомендуется установить инструмент перевода atool-l18n и напрямую перевести его на английский текст. Его можно скомпилировать и запустить~ Конечно, в дальнейшем будут внесены некоторые корректировки CSS.cnpm i atool-l10n

node_modules/.bin/atool-l10n

Суммировать

В этой статье в основном рассказывается о сценарии извлечения копирайта для быстрой интернационализации интерфейсных jsx-проектов. Если у вас есть вопросы по его использованию, задавайте их в комментариях~

tip

Спасибо за раздел комментариевlany9527По подсказке одноклассников, скрипт обновлен. Больше не используйте самоувеличивающиеся числа в качестве ключей. Заменил его на китайское имя в качестве ключа для извлечения, и скрипт был обновлен~

приложение:

1. В настоящее время скрипт не поддерживает переносы строк на китайском языке, поэтому содержимое трех файлов после сканирования приходится исправлять. И эту часть контента приходится заменять вручную. Однако такая ситуация встречается редко, и только две из 2000 записей в моем проекте имеют эту проблему.

2. Во-вторых, может быть ошибка компиляции после выполнения операции выбора, потому что она может быть написана вручную в вашем проекте.\nЭтот вид копирайтинг должен справиться с этой ситуацией вручную.

3. Третий тип - не поддерживает китайский\"В случае , эта часть должна быть обработана мной. Причина в том, что я использую китайский язык в качестве ключа. Чтобы передать извлеченное значение через eslint, я должен использовать одинарные кавычки. Вы должны избегать двойных кавычек и одинарных кавычек. Невозможно обработать уже сбежавший контент. После завершения преобразования копирайтинга вы можете снова отсканировать его с помощью команды сканирования, чтобы увидеть, что не было обработано, а затем вручную обработать его~

Заинтересованные студенты могут подписаться на рубрику или отправить свое резюме на 'yifei.pyf####alibaba-inc.com'.replace('####', '@'), присоединяйтесь к людям с высокими идеалами~

Оригинальный адрес:GitHub.com/proto team/no…