Qu'est-ce que le regroupeur de métro dans react-native?

Question

Je suis en train d'apprendre React Native.

Je ne trouve pas de documentation appropriée pour le metro bundler. J'ai donc quelques questions à ce sujet. Comme son nom l'indique, il crée un bundle.

1. Mais où se trouve le fichier bundle ?
2. Est-ce la même chose que webpack ?
3. À quoi sert ce fichier bundle ?

Answer 1

Une application React Native est une application compilée qui exécute du code JavaScript. Chaque fois que vous construisez et exécutez votre projet React Native, un packager appelé Metro démarre. Vous avez probablement déjà vu cette sortie dans votre terminal, vous informant que le packager est en cours d'exécution.

Le packager fait quelques choses :

Il combine tout votre code JavaScript en un seul fichier et traduit tout code JavaScript que votre appareil ne comprendra pas (comme JSX ou certaines des nouvelles syntaxes JS).

Il convertit les ressources (par exemple, les fichiers PNG) en objets pouvant être affichés par un composant Image.

référence : https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd

Answer 2

Metro est un regroupeur JavaScript qui prend en entrée des options, un fichier d'entrée, et vous fournit un fichier JavaScript contenant tous les fichiers JavaScript. Chaque fois que vous exécutez un projet React Native, une compilation de nombreux fichiers javascript est faite en un seul fichier. Cette compilation est réalisée par un regroupeur appelé Metro.

Réponses à vos questions:

1> Le fichier regroupé est situé sur l'appareil sur lequel vous construisez votre application et est stocké dans différents formats comme dans le cas du regroupement simple Android où le fichier .bundle est créé. Un autre format est celui du regroupement de RAM indexé dans lequel le fichier est stocké sous forme de fichier binaire.

2> Webpack est également un type similaire de regroupeur de modules qui regroupe vers la plateforme web ReactJS et ses modules sont accessibles via le navigateur. Le processus de regroupement est similaire à Metro.

3> Ces fichiers regroupés sont indexés et stockés dans un format numérique particulier, ce qui facilite l'organisation des fichiers JS à l'exécution.

Il y a plusieurs fonctions du regroupeur Metro et vous pouvez en savoir plus sur le rôle de Metro dans React Native ici : https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e

J'espère que cela vous aidera.

Answer 3

L'équipe de Metro continue d'améliorer sa documentation, vous pouvez désormais trouver de très bonnes explications sur https://facebook.github.io/metro/docs/concepts (lien mis à jour) :

Metro est un bundleur JavaScript. Il prend un fichier d'entrée et diverses options, et vous renvoie un seul fichier JavaScript qui inclut toutes votre code et ses dépendances.

Oui, c'est un peu comme Webpack, mais pour les applications React Native :)

Mais où se trouve le fichier de bundle ?

Une fois le bundleur lancé, vous pouvez vérifier son contenu à l'adresse http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false (comme webpack, il est servi depuis la mémoire, donc il n'est pas écrit dans le dossier de votre projet).

À quoi sert ce fichier de bundle ?

Ce fichier est installé dans l'appareil pour que son code y soit exécuté. Rappelez-vous que lorsque vous écrivez du code pour une application React Native, votre code n'est pas "traduit" en Java / Swift / quoi que ce soit d'autre. Les modules natifs enverront des événements à un thread Javascript, et ce thread JS exécutera votre code React Native groupé.