Article original : How to use Babel macros with React Native
Par Karan Thakkar
Un cas d'utilisation pratique pour résoudre un problème d'i18n en utilisant codegen.macro
Si vous suivez Kent C. Dodds ou Sunil Pai sur Twitter, vous avez peut-être lu des tweets de temps en temps sur les macros babel. Moi aussi. Mais ce n'est que hier que j'ai enfin compris de quoi il s'agit. Et c'est glorieux !
Donc, en venant au problème : je voulais ajouter une utilité pour faire du formatage de nombres basé sur la locale dans React Native. Comme il n'y a pas de support cohérent pour l'API d'internationalisation dans React Native, j'ai utilisé un polyfill pour cela : https://github.com/andyearnshaw/Intl.js. Maintenant, avec le polyfill, j'avais aussi besoin d'importer tous les fichiers de locale de support. Il y a deux options ici :
- Charger toutes les locales : C'est simple, car je peux simplement importer un fichier. Cela devrait généralement être évité, car cela peut inutilement alourdir la taille de votre bundle si vous avez juste besoin de supporter certaines locales.
- Charger uniquement les locales nécessaires : Avec cela, je ne charge que les locales que mon application supporte.
Par exemple, si l'application supporte 40 locales, je dois manuellement écrire 40 imports pour chaque locale. Cela devient beaucoup plus difficile et fastidieux à faire à mesure que la liste des locales que vous supportez augmente.
Je voulais automatiser cela de manière à ne nécessiter aucune modification manuelle. Cela est particulièrement utile pour nous car nous avons des tâches en arrière-plan qui s'exécutent sur le CI et qui mettent automatiquement à jour notre fichier de locales chaque fois que nous ajoutons le support pour une nouvelle langue.
Comment puis-je importer dynamiquement plusieurs fichiers tout en permettant à l'emballeur React Native d'avoir tous les chemins de fichiers au moment de la compilation ? babel-plugin-macros et codegen.macro ?
Qu'est-ce que ces... choses babel ?
Cet article de blog de Kent C. Dodds décrit parfaitement ce qu'est babel-plugin-macros :
C'est une approche "nouvelle" de la transformation de code. Elle vous permet d'avoir des transformations de code importables avec une configuration zéro.
codegen.macro est une telle transformation que vous pouvez utiliser pour "générer du code" au moment de la construction.
Comment le configurer ?
React Native vous permet de configurer vos propres paramètres babel. Vous pouvez créer votre propre fichier ".babelrc" à la racine de votre projet. Pour vous assurer que vous utilisez la configuration babel par défaut qui vient avec React Native, installez babel-preset-react-native.
En plus de cela, vous devez installer un autre module : codegen.macro. Le plugin codegen utilise babel-plugin-macros sous le capot pour faire son travail. Nous verrons dans un instant ce que c'est.
Que fait codegen.macro ?
Il prend un morceau de code, l'exécute et se remplace par la chaîne export-ed. Cela aura beaucoup plus de sens une fois que vous verrez l'exemple ci-dessous. Étant donné une liste de locales et une macro codegen, il génère une liste d'imports au moment de la construction !
Mais, que faire si j'ai besoin de la coloration syntaxique ?
Puisque nous écrivons tout notre code dans une chaîne de modèle, il est vraiment difficile d'obtenir une coloration syntaxique appropriée. Vous pourriez finir par passer beaucoup de temps à essayer de comprendre pourquoi votre macro donne une erreur lors de la transpilation.
Heureusement, les macros babel supportent plusieurs façons différentes de les utiliser. Ma préférée est d'utiliser un codegen.require. Avec cela, vous pouvez déplacer le corps de votre macro dans un fichier séparé et l'importer où vous voulez, comme montré ci-dessous :
Avantages de l'utilisation de cette syntaxe :
- eh bien, la coloration syntaxique ??f44d
- pas besoin d'échapper les séquences d'échappement que vous devez utiliser comme \n ?
- utiliser des littéraux de modèle à l'intérieur de votre codegen ?
NOTE : mise à niveau de React Native
Si vous choisissez de remplacer la configuration babel, chaque fois que vous mettez à niveau react-native, vous devez également augmenter la version de babel-preset-react-native pour correspondre à celle utilisée dans cette version de react-native.
C'est tout, les gens ! Vous avez configuré les macros babel avec React Native ?? Consultez ces autres macros disponibles si vous voulez essayer quelque chose de différent.
PS : Merci à Narendra N Shetty, Siddharth Kshetrapal et Kent C. Dodds pour avoir révisé le brouillon et aidé à le façonner mieux ?
Salut ! ?f44d Je suis Karan Thakkar. Je travaille sur l'infrastructure React Native chez Skyscanner Engineering. Auparavant, j'ai dirigé l'équipe web chez Crowdfire. J'aime essayer de nouvelles technologies pendant mon temps libre et j'ai construit Tweetify (en utilisant React Native) et Show My PRf44d's (en utilisant Golang).
D'autres articles écrits par moi sont :