5

我试图弄清楚 react native 的构建过程以及 Metro bundler 和 babeljs 到底是做什么的。特别是什么允许我使用 ES5+ 语法。我正在寻找一些似乎告诉我一些不同的消息来源。这个消息来源说：

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

这个说：

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

所以现在我很困惑两者到底是做什么的。我也在上述来源（和地铁文档）中找到了这一点： Metro。转换过程描述为：

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

这听起来就像 babel 应该对我做的翻译，或者这是不同的东西？Appart 从那我很困惑捆绑过程的解决部分的工作原理以及它与其他步骤并行的确切工作原理，但也许这是另一个问题的主题。

4

2 回答 2

2

关于一切如何协同工作（React-Native、Typescript、Metro、Babel 和预设）存在很多混淆。我将尝试描述它。

  1. React-Native 基于 ReactJS（用于开发 Web-Apps 的 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 使用了解析器。实际上，这个阶段与转型阶段同时发生。

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

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

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

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
于 2022-01-29T21:47:40.120 回答
2

Babel 是一个转译器。什么？！？转译器是一种工具，它可以读取用一种编程语言编写的源代码，并以另一种语言生成等效代码。 React Native 使用 Babel 将 React 语法和较新的 ES5+ 语法转换为可以在不支持这些功能的 JavaScript 环境中运行的代码。

开箱即用的 Babel 不做任何事情。它基本上解析代码，然后再次生成相同的代码。为了引入一些魔法，你需要集成插件（或预设，一组插件）让 Babel 做任何事情。

插件和预设可以使用 yarn（或 npm）作为包安装——JavaScript 的包管理器——在一个名为 package.json 的文件中声明它们。包可作为依赖项或 devDependencies 使用。区别取决于它们的用法。事实上，前者在运行时需要，后者在开发过程中需要。

于 2020-02-07T10:43:51.173 回答