Как использовать макросы Babel из React Native

1656603135 kak ispolzovat makrosy babel iz react native

Коран Тхаккар

Практический вариант использования для решения проблемы i18n с помощью codegen.macro

jfjrz1ddbDi4Zef64CpbkFH3aucozCj7VNNX
Фоновое фото от Rayi Christian Wicaksono на Unsplash

Если вы подписались на Кент К. Доддс или Сунил Пай в Twitter, возможно, вы время от времени читали твиты о макросах babel. Я тоже. Но только вчера я наконец-то понял, что такое ажиотаж. И это хорошо!

Итак, подходя к проблеме: я хотел добавить какую-то утилиту для форматирования чисел на основе локали в React Native. Поскольку у React Native нет последовательной поддержки API интернационализации, я использовал для него полизаполнение: теперь вместе с полизаполнением мне тоже нужно было импортировать все вспомогательные файлы локали. Здесь есть два варианта:

  1. Загрузите все локалы: Это просто, поскольку я могу импортировать только один файл. Обычно это следует избегать, поскольку это может не нужно увеличить размер вашего пакета, если вам просто нужно поддерживать некоторые локали.
m8Pk2rDXI2f6OfOEECt99XwbiR0pw5OxzXXf
Загрузите все локали, предоставленные Intl.js

2. Загружайте только необходимые локалы: При этом я загружаю только локали, поддерживаемые моей программой.

LzitpUOexDJoOucbHFAbe7kkPP8nOVs2F7k5
Загружайте только необходимые локали из Intl.js

К примеру, если программа поддерживает 40 языковых стандартов, мне придется вручную написать 40 импортов для каждого языка. Это становится гораздо труднее и утомительнее делать это, поскольку список поддерживаемых языков увеличивается.

Я хотел автоматизировать это таким образом, чтобы не требовало изменений вручную. Это особенно полезно для нас, поскольку у нас есть фоновые задания, запущенные на CI, которые автоматически обновляют файл локалов каждый раз, когда мы добавляем поддержку нового языка.

Как я могу динамически импортировать несколько файлов, но также разрешить упаковщику React Native иметь все пути к файлам во время компиляции? babel-plugin-macros и codegen.macro ?

Что это за вавилонские вещи?

Эта публикация в блоге Кента С. Доддса прекрасно описывает то, что babel-plugin-macros есть:

Это «новый» подход к преобразованию кода. Это позволяет импортировать преобразование кода с нулевой конфигурацией.

codegen.macro это одно из таких преобразований, которое вы можете использовать для «генерации кода» при сборке.

Как вы это настроите?

React Native позволяет настроить собственные настройки babel. Вы можете создать свой собственный файл «.babelrc» в корне вашего проекта. Чтобы убедиться, что вы используете конфигурацию babel по умолчанию, поставляемую с React Native, установите babel-preset-react-native.

Поверх этого вам нужно установить еще один модуль: codegen.macro. Используется плагин codegen babel-plugin-macros под капотом выполнять свою работу. Чуть-чуть посмотрим, что это такое.

9yAnzljqibKRoDn7rKe5AkGMQ63pPWfp4354
⬆️️Вот ваш .babelrc файл должен выглядеть

Что делает codegen.macro?

Он берет фрагмент кода, выполняет его и заменяет себя на export-ed строчка. Это будет иметь большой смысл, когда вы увидите пример ниже. Учитывая список локалов и макрос кодогена, он генерирует список импорта во время сборки!

1WKwUJ0aFROJGwvTQNckj87aOJOTvadtYTuv
yj8t50UemnN-BaJUUy0q1XAgggZgMDPgelZz
ВЛЕВО: макрос codegen для создания импорта для всех языковых стандартов · ПРАВО: список поддерживаемых языков
yPXysDYsOX2BytVUIzJKeY7pMK9CblD8oMeH
Выход из babel после транспиляции

Но что делать, если мне нужна подсветка синтаксиса?

Поскольку мы пишем весь наш код в строке шаблона, очень трудно получить правильную подсветку синтаксиса. Вы можете потратить много времени, пытаясь выяснить, почему ваш макрос дает ошибку при транспиляции.

К счастью, макросы babel поддерживают несколько разных способов их использования. Мой любимый использует a codegen.require. Благодаря этому вы можете переместить тело своего макроса в отдельный файл и потребовать его куда угодно, как показано ниже:

1PuJiRDOV4A2YT6nx1SOTmeViF9XbpG1-L22
u1tVA9klTM1XTlJtK5Rj2PE5nxrzkUdtsh9F
Импортируйте кодоген с помощью спец. codegen.require звонить

Преимущества использования этого синтаксиса:

  • ну, подсветка синтаксиса?‍
  • не нужно экранировать какие-либо исходные последовательности, которые нужно использовать как \n ?
EVMYOZ1LD-n8SHTuqvfwVNWXr6wghjIFiND3
zJD4HRaNxhHMHsHlhlINJf64K0B0vHin32jG
  • использовать шаблонные литералы в своем коде?
MVDROCDmMzE6MY8Osky7BpEJYlh-z5-QO-Ez
HXwx6D60GMfXD6DiiMmwqUI78dt4lowhLdrw

ПРИМЕЧАНИЕ: обновление React Native

Если вы решите заменить конфигурацию babel, когда вы обновляете react-native, вы также должны увеличить версию babel-preset-react-native, чтобы она соответствовала той, которая используется в этой версии react-native.

Вот так люди! Вы настроили макросы babel с помощью React Native? Просмотрите эти другие доступные макросы, если вы хотите попробовать что-нибудь другое.

PS: Спасибо Нарендра Н Шетти, Сиддхарт Кшетрапала и Кент К. Доддс за то, что они пересмотрели проект и помогли сформировать его лучше?

NeELdCuvtLGOOP54bsUaMrsh3SDAd9cmI3FD

Привет! ? Я Коран Тхаккар. Я работаю над инфраструктурой React Native в Skyscanner Engineering. Раньше я возглавлял веб-команду в Crowdfire. Мне нравится пробовать новые технологии в свободное время, и я создал Tweetify (с помощью React Native) и Show My PR (с помощью Golang).

Другие написанные мной статьи:

Добавить комментарий

Ваш адрес email не будет опубликован.