react-native 中的 Metro bundler 是什么？

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 普通捆绑。另一种格式是索引 RAM 包，其中文件存储为二进制文件。

2> Webpack 也是一种类似类型的模块捆绑器，它捆绑到 ReactJS Web 平台，并且它的模块可以通过浏览器访问。捆绑过程与 Metro 类似。

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

Metro bundler 有多种功能，你可以在这里了解 Metro 在 React Native 中的作用：https://medium.com/@rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e

希望对你有帮助。

Answer 3

Metro 团队不断改进其文档，现在您可以在 https://facebook.github.io/metro/docs/concepts 找到一些非常好的解释（链接已更新）：

Metro 是一个 JavaScript 捆绑器。它接受一个入口文件和各种 选项，并为您返回一个包含 all 的 JavaScript 文件 您的代码及其依赖项。

所以是的，它是一种 Webpack，但对于 React Native 应用程序来说：)

但是捆绑文件在哪里？

打包程序启动后，您可以在 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false 查看其内容 （和 webpack 一样，它是从内存中提供的，所以它不会被写入项目的文件夹中）。

那个捆绑文件有什么用？

此文件安装在设备中，以便在设备中执行其代码。 请记住，当您为 React Native 应用程序编写代码时，您的代码不会“翻译”为 Java / Swift / 其他的。 Native Modules 会将事件发送到 Javascript 线程，而 JS 线程将执行您捆绑的 React Native 代码。