55 votes

Qu'est-ce que metro bundler dans react-native ?

Je suis en train d'apprendre React Native.

Je n'arrive pas à trouver une documentation appropriée pour metro bundler. J'ai donc quelques questions à son 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. Quelle est l'utilité de ce fichier groupé ?

36voto

mahdi sharifi Points 181

Une application React Native est une application compilée qui exécute du 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 indiquant que le packager est en cours d'exécution.

Le packager fait plusieurs choses :

Combine tout votre code Javascript en un seul fichier, et traduit tout code Javascript que votre appareil ne comprend pas (comme JSX ou certaines des nouvelles syntaxes JS).

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

2 votes

Lorsque l'application fonctionne sur un appareil, Metro Bundler est-il encore nécessaire ?

2 votes

@user1443721 : cela dépend, si vous exécutez une debug construire, alors oui. Si vous exécutez une release construire ( react-native run-<PLATFORM> --variant=release ) alors non.

20voto

Rishabh Sharma Points 66

Metro est un bundler JavaScript qui prend des options, un fichier d'entrée, et vous donne un fichier JavaScript incluant tous les fichiers JavaScript en retour. Chaque fois que vous exécutez un projet react native, une compilation de plusieurs fichiers JavaScript est faite en un seul fichier. Cette compilation est faite par un bundler qui s'appelle Metro.

Des réponses à vos questions :

1> Le fichier groupé est situé sur l'appareil lui-même sur lequel vous construisez votre application et est stocké dans différents formats comme dans le cas du groupage Android Plain dans lequel .bundle est créé. Un autre format est celui du bundle Indexed RAM dans lequel le fichier est stocké sous forme de fichier binaire.

2> Webpack est aussi un type similaire de module bundler qui fait du bundling pour la plateforme web ReactJS et ses modules sont accessibles par le navigateur. Le processus d'empaquetage est similaire à celui de Metro.

3> Ces fichiers groupés sont indexés et stockés dans un format numérique particulier et il est donc facile au moment de l'exécution d'organiser les fichiers JS dans l'ordre.

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

J'espère que cela vous aidera.

13voto

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

Metro est un bundler JavaScript. Il prend un fichier d'entrée et diverses options, et vous rend un seul fichier JavaScript qui comprend tous les éléments suivants l votre code et ses dépendances.

Donc oui, c'est une sorte de Webpack, mais pour les applications React Native :)

Mais où se trouve le fichier groupé ?

Une fois que l'empaqueteur est lancé, vous pouvez vérifier son contenu à l'adresse suivante 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).

Quelle est l'utilité de ce fichier groupé ?

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

0 votes

Dans mon cas, il fonctionne sur localhost:19002 Est-ce que cela a changé depuis votre dernière réponse ? ou le port est-il configurable ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X