babel 在 React Native 中做了什么？

Question

我正在尝试弄清楚 React Native 的构建过程以及 Metro 捆绑器和 babeljs 到底做了什么。特别是允许我使用 ES5+ 语法。我发现一些消息来源似乎告诉我一些不同的事情。这消息来源说：

\n\n

\n

Metro 将所有 javascript 代码合并到一个文件中，并翻译\n 设备无法理解的任何 Javascript 代码（例如 JSX 或一些\n 较新的 javascript 语法）

\n

\n\n

这个说：

\n\n

\n

React Native 使用 Babel 将 React 语法和较新的 ES5+\n 语法转换为可以在不支持这些功能的 JavaScript 环境中运行的代码。

\n

\n\n

所以现在我很困惑两者到底做了什么。我还在上面的源代码（和 Metro 文档）中找到了这一点：\n Metro。变换过程描述为：

\n\n

\n

所有模块都经过变压器。转换器负责将模块转换为目标平台可以理解的格式（例如 React Native）。模块的转换根据您拥有的核心数量并行进行。

\n

\n\n

这听起来和 babel 应该对我做的转译一模一样，或者这是不同的东西？除此之外，我对捆绑过程的解决部分的工作原理以及它与其他步骤并行工作的确切方式感到困惑，但这也许是另一个问题的主题。

\n

Answer 1

对于所有东西如何协同工作（React-Native、Typescript、Metro、带有预设的 Babel）存在很多困惑。我将尝试描述它。

1. React-Native 基于 ReactJS（用于开发 Web 应用程序的 UI 框架），其编码语言是 JavaScript。
2. JavaScript 有一些缺点，因此可以利用 TypeScript。TypesScript 由 tsconfig.json 文件配置。您可以在那里配置哪些文件需要转换为 JavaScript，哪些不需要。如果您启动yarn build:ts 并配置了像/dist 这样的输出目录，您将在该目录中找到转译的JavaScript 代码。
3. Metro 是一个 JavaScript 捆绑器。它接受一个入口文件和各种选项，并返回一个 JavaScript 文件，其中包含所有代码及其依赖项，并由yarn start 启动并由 Metro.config.js 配置

地铁分为三个不同的阶段：

1. 解决方案：Metro 需要构建入口点所需的所有模块的图表。为了从另一个文件中查找所需的文件，Metro 使用解析器。事实上，这个阶段与转型阶段同时发生。

2. 转换：所有模块都经过变压器。转换器负责将模块转换（转译）为目标平台（例如 React Native）可以理解的格式。模块的转换根据您拥有的核心数量并行进行。

3. 序列化：一旦所有模块都被转换，它们就会被序列化。序列化器组合模块以生成一个或多个包。包实际上是组合成单个 JavaScript 文件的模块包。

因此，据我了解，Metro 在其转换步骤中使用了 Babel。我认为很多文档和解释中都缺少这条信息。没有关于这一点的信息！因此，Babel 使用插件告诉 Babel 要转译什么以及如何将 JavaScript 代码（例如 JSX 语法）从一种格式转译为另一种格式。在babel.config.js文件中可以看到，预设的名称是：metro-react-native-babel-preset，表示metro转换过程中对babel的使用。

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};