什么是React-native中的Metro捆绑器？

Question

我正在学习React Native。

我找不到有关Metro bundler的适当文档。因此，我对此几乎没有疑问。 顾名思义，它会创建一个捆绑包。

1. 但是捆绑文件在哪里？
2. 与webpack一样吗？
3. 该捆绑包文件有什么用？

Answer 1

React Native应用程序是运行某些Javascript的已编译应用程序。每当您构建和运行React Native项目时，都会启动一个名为Metro的打包程序。您可能之前已经在终端中看到了此输出，让您知道打包程序正在运行。

包装商要做的几件事：

将您所有的Javascript代码组合到一个文件中，并转换设备无法理解的任何Javascript代码（例如JSX或某些较新的JS语法）。

将资产（例如PNG文件）转换为可由Image组件显示的对象。

参考： https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd

Answer 2

Metro是一个JavaScript捆绑程序，它接收选项，一个入口文件，并为您提供一个JavaScript文件，其中包括所有JavaScript文件。每次您运行react native项目时，都会将许多javascript文件编译成一个文件。该编译由称为Metro的捆绑程序完成。

回答您的问题：

1>捆绑文件位于您要在其上构建应用的设备本身，并且以不同格式存储，例如在创建.bundle的Android Plain捆绑情况下。另一种格式是索引RAM束，其中文件存储为二进制文件。

2> Webpack也是类似类型的模块捆绑器，它确实捆绑到ReactJS Web平台，并且其模块可通过浏览器访问。捆绑过程类似于地铁。

3>这些捆绑的文件被索引并以特定的数字格式存储，因此在运行时易于按顺序排列JS文件。

Metro捆绑程序具有多种功能，您可以在此处阅读有关Metro在React Native中的作用：https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e

希望有帮助。

Answer 3

地铁团队不断改进其文档，现在您可以在https://facebook.github.io/metro/docs/en/concepts上找到一些非常好的解释：

  

Metro是JavaScript捆绑程序。它接收一个入口文件和各种   选项，并返回一个包含所有   您的代码及其依赖项。

是的，这是一种Webpack，但对于React Native应用程序:)

但是捆绑文件在哪里？

捆绑程序启动后，您可以在http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false上检查其内容 （就像webpack一样，它是从内存中提供的，因此不会写在项目的文件夹中）。

该捆绑文件的用途是什么？

此文件已安装在设备中，可以在此处执行其代码。 请记住，当您为React Native应用程序编写代码时，您的代码不会“翻译”为Java / Swift /任何东西。本机模块会将事件发送到Javascript线程，而JS线程将执行您捆绑的React Native代码。