有很多关于如何一起工作的困惑（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配置
   Metro有三个不同的阶段：
   1.分辨率：Metro需要构建一个从入口点需要的所有模块的图。为了从另一个文件中找到哪个文件是需要的，Metro使用了一个解析器。实际上，这个阶段与转换阶段并行发生。
   1.转型：所有的模块都要经过一个转换器。转换器负责将模块转换为目标平台可以理解的格式（例如React Native）。模块的转换是基于你拥有的内核数量并行进行的。
   1.序列号：一旦所有的模块都被转换了，它们就会被序列化。序列化器将模块组合起来生成一个或多个bundle。bundle字面上是组合成一个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'],
};

Babel是一个transpiler。什么？！？transpiler是一个工具，它可以读取用一种编程语言编写的源代码，并生成另一种语言的等效代码。React Native使用Babel将React语法和更新的ES 5+语法转换为可以在不支持这些功能的JavaScript环境中运行的代码。
开箱即用的Babel不做任何事情。它基本上是解析代码，然后再次生成相同的代码。为了引入一些魔法，你需要为Babel集成插件（或预置，一组插件）来做任何事情。
插件和预置可以通过yarn（或npm）（JavaScript的包管理器）作为包安装，并在package.json文件中声明它们。包可以作为依赖项或devDependencies使用。区别取决于它们的用法。事实上，前者在运行时需要，后者在开发时需要。