Автор оригинала: FreeCodeCamp Community Member.
Каран Таккар
Практическое использование случая для решения проблемы I18N с использованием Codegen.macro
Если вы следите за Кент C. Додс или Sunil Pai В Twitter вы можете прочитать твиты время от времени о макросах Babel. Итак, я. Но только вчера я, наконец, понял, о чем обман. И это славно!
Итак, приходя к этой проблеме: я хотел добавить некоторую утилиту для форматирования номера на основе локали в реакции на родом. Поскольку нет последовательной поддержки для Интернационализация API в реактивный родной, я использовал полифилл для него: https://github.com/andyearnshaw/intl.js Отказ Теперь, наряду с полифиллированием, мне также необходимо импортировать все поддерживающие файлы локали. Здесь здесь два варианта:
- Загрузить все локалики : Это просто, так как я могу просто импортировать один файл. Обычно это следует избегать, поскольку оно может быть излишне вручать размер вашего пучка, если вам просто нужно поддерживать некоторые локалики.
2. Нагрузка только на нужные локали : С этим я загружаю только локали, которые поддерживает мое приложение.
Например, если приложение поддерживает 40 локалей, я должен вручную охватить запись 40 импорта для каждой локали. Становится намного сложнее и более утомительно сделать это как список локалей, которые вы поддерживаете, увеличивается.
Я хотел автоматизировать это таким образом, чтобы без ручных изменений. Это особенно полезно для нас, поскольку у нас есть фоновые задания, работающие на CI, которые автоматически обновляют файл локалей, когда мы добавляем поддержку нового языка.
Как я могу динамически импортировать несколько файлов, но также разрешить RACT NANDE Packager иметь все пути к файлам в компиляции? Babel-Plugin-Macros и Codegen.macro ?
Что это … Бабел вещи?
Это Сообщение блога по Кент C. Додс отлично описывает, что Babel-Plugin-Macros является:
Codegen.macro Это одно такое преобразование, которое вы можете использовать для «генерации кода» в Stroce.
Как вы настраиваете?
React Nature позволяет настроить ваши собственные настройки Babel. Вы можете создать наш собственный файл “.babelrc” в корне вашего проекта. Чтобы убедиться, что вы используете конфигурацию Babel по умолчанию, которая поставляется с реактивными нативными, установить Babel-Preset-React – родной Отказ
На вершине этого вам необходимо установить другой модуль: Codegen.macro Отказ Плагин Codegen использует Babel-Plugin-Macros под капотом, чтобы сделать свою работу. Мы увидим в немного, что это такое.
Что делает codegen.macro?
Требуется кусок кода, выполняет его и заменяет себя с Экспорт - Эд нить. Это сделает много смысла, как только вы увидите пример ниже. Учитывая список локалей и Modegen Macro, он генерирует список импорта в State Time!
Но что, если мне нужен синтаксис выделения?
Поскольку мы пишем все наш код в строке шаблона, очень трудно получить правильный синтаксис выделения. Вы можете потратить много времени, пытаясь выяснить, почему ваш макрос дает ошибку во время транспортировки.
К счастью, Babel Macros поддерживает мало разных способов использовать их. Мой любимый использует Codegen.require Отказ С этим вы можете переместить корпус вашего макроса в отдельный файл и потребовать его везде, где вы хотите, как показано ниже:
Преимущества использования этого синтаксиса:
- Ну, синтаксис подсвечивает ??
- Нет необходимости избежать любых эсфазных последовательностей, которые вам нужно использовать как \ N?
- Используйте шаблонные литералы внутри вашего Codegen?
Примечание: обновление реагирует на родных
Если вы решите переопределить конфигурацию Babel, всякий раз, когда вы обновляете React-arent, вы также должны поднять версию Babel-Preset-React – racured-racured-racured, чтобы соответствовать использованию, используемую внутри этой реактивной версии.
Вот и все люди! Вы настроили Babel Macros с реактивным родным ?? Проверьте ESE Другие доступные Macros I F Вы хотите попробовать что-то другое.
PS: Благодаря NARENDRA N Шетти, Сиддхартом КШетраполь и Кент C. Dodds для рассмотрения проекта и помогая им лучше?
Привет! ? Я k Аран Таккар. Я работаю над реагированием родной инфраструктурой в S Kyscanner Engineering. Раньше я веду веб-команда в C Rowdfire. Мне нравится пробовать новые технологии в свободное время, и я построил T Weetify (используя реагировать родной) и S Как мой PR (используя Голанг).
Другие статьи, написанные мной: