什么是React Native中的Metro Bundler？

Question

我正在学习React Native。

我找不到适当的Metro Bundler文档。因此，我对它有几个问题。 如其名，它创建一个bundle文件。

1. 但是bundle文件位于哪里？
2. 这与webpack相同吗？
3. 那个bundle文件有什么用？

- Piyush

Answer 1

一个React Native应用是一个编译后的应用，运行一些Javascript。每当构建和运行React Native项目时，都会启动一个名为Metro的打包器。你可能已经在终端中看到过这个输出，让你知道打包器正在运行。

打包器会执行以下几个操作：

将所有Javascript代码合并成一个文件，并将任何设备无法理解的Javascript代码进行翻译（例如JSX或某些较新的JS语法）。

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

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

- mahdi sharifi

---

当应用程序在设备上运行时，是否仍需要Metro Bundler？ - user1443721

@user1443721：这取决于你是否在运行debug版本。如果你正在运行release版本（react-native run-<PLATFORM> --variant=release），那么就不需要了。 - flaky

打包不同于编译，但它有助于提高启动性能，并将一些特定于平台的JavaScript代码转换成更广泛支持的JavaScript代码。参考 - Oğuzhan

Answer 2

Metro是一个JavaScript打包工具，它接受选项和入口文件，并返回一个包含所有JavaScript文件的JavaScript文件。每次运行React Native项目时，将许多JavaScript文件编译为单个文件。这个编译过程由一个名为Metro的打包工具完成。

回答您的问题：

1> 打包文件位于正在构建应用程序的设备本身上，并以不同的格式存储，例如在Android中创建.bundle的普通打包格式。另一种格式是Indexed RAM bundle，其中文件作为二进制文件存储。

2> Webpack也是一种类似的模块打包工具，它对ReactJS web平台进行打包，并且其模块可以通过浏览器访问。打包过程与Metro类似。

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

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

希望这有所帮助。

- Rishabh Sharma

Answer 3

https://facebook.github.io/metro/docs/concepts（已更新链接）中找到一些非常好的解释:

Metro 是一个 JavaScript 打包器。它接收一个入口文件和各种选项，然后返回一个包含所有代码及其依赖项的单个 JavaScript 文件。

所以，是的，它是 React Native 应用程序的一种类似于 Webpack 的工具 :)

但是bundle文件在哪里呢？

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

那么该 bundle 文件有什么用处呢？

该文件被安装在设备中以使其代码在那里执行。请记住，当您为 React Native 应用程序编写代码时，您的代码并未“转换”为 Java / Swift / 其他语言。原生模块将向 JavaScript 线程发送事件，而 JS 线程将执行打包的 React Native 代码。

- Rocío García Luque

---

在我的情况下，它正在 http://localhost:19002/ 上运行，这与您上次的答案有所不同吗？或者端口是可配置的吗？ - vikramvi