什么是 Babel？
Babel 是一个广泛使用的 JavaScript 编译器，它可以将 JavaScript 的最新语法转化成浏览器或 Node.js 可以执行的语法。它的核心是一个可插拔的转换引擎，可以根据用户自定义的配置，将源码编译成目标代码。
在 React Native 项目中，由于需要支持多个平台，我们常常需要转换一些不同的 JavaScript 语法和模块系统，以适配不同的平台要求，这时候 Babel 就能够派上用场。
添加 Babel 配置
添加 Babel 配置非常简单，只需要在项目根目录下创建一个名为 .babelrc 的文件，写入下面的配置内容：
-
---------- --------------------- -----------------------
---------- -
------------------------------------- - --------- ---- ---
------------------------------------------- - -------- ---- ---
------------------------------------
------------------- -
-------- -
---------- -----------
----------- ----------------
-------------- -------------------
---------- ---------------
--------- --------------
------------ -----------------
-
--
-
-上面的配置包含了 React Native 项目中常见的设置，下面来详细解释一下。
Presets
Presets 是一种 Babel 插件的组合包，可以根据需要选择要启用的插件。常用的有 @babel/preset-env 和 @babel/preset-react 两个。
其中，@babel/preset-env 是一个智能预设集合，可以根据目标环境自动启用合适的插件。在 React Native 项目中，我们可以将它用来转换 ES6 以及一些新的 JavaScript 语法，如箭头函数等。
@babel/preset-react 则是用于支持 JSX 语法的插件预设。
Plugins
Plugins 是一种强大的 Babel 机制，可以针对源代码进行定制化的转换。在 React Native 项目中，有一些常见的插件可以选择使用。
@babel/plugin-proposal-decorators 用于支持装饰器语法，例如 @observer。它支持两个参数，legacy 为 false 时使用新的语法格式（前缀写法），为 true 时使用旧的语法格式（装饰器写法）：
------- ----- ---------- ----- - -- ------- ---- ---------- ----- - --
@babel/plugin-proposal-class-properties 用于支持类属性语法。它支持一个参数 loose，为 true 时会转化成 Object.defineProperty 格式，否则转化成 Object.defineProperties 格式。
@babel/plugin-transform-runtime 用于提供对使用高级语法的模块进行转换的支持。使用它，我们可以将一些运行时的公共模块（例如 Promise、Object.assign 等）提取出来，以减少打包后代码的大小。
module-resolver 则是一种自定义的插件，可以用于处理模块路径的别名。在项目中定义别名可以提高代码的可读性和重用性。
在上面的插件中，我们通过定义了一些常见的别名，例如 @screens 和 @components，可以在项目中直接使用这些别名来导入模块。
示例代码
在了解了如何配置 Babel 之后，我们可以开始在 React Native 项目中使用它。
我们来创建一个简单的 demo，它包含一个屏幕和一个按钮，点击按钮会弹出一个 Hello World! 的提示框。
首先，我们需要在项目根目录下创建 .babelrc 文件，并将前面提到的插件配置写入其中。
然后，我们创建一个名为 HelloScreen.js 的文件，在其中编写以下代码：
------ ----- ---- --------
------ - ----- ------- ----- - ---- ---------------
------ ------- ----- ----------- ------- --------------- -
------------- -
------------------ ---------
-
-------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
------- ---------- ------ ----------- -- ------------------- --
-------
--
-
-最后，在项目的入口文件（例如 index.js）中，导入 HelloScreen 并将其渲染到屏幕上：
------ ----- ---- --------
------ - ----------- - ---- ---------------
------ ----------- ---- -----------------------
----- --------- ------- --------------- -
-------- -
------ ------------ ---
-
-
------------------------------------------ -- -- -----------完成上述步骤后，我们可以启动 React Native 的开发服务器，然后在浏览器上打开 Expo 项目的页面，即可看到一个简单的按钮，点击它会弹出一个提示框，上面写着 Hello World!。
总结
本文介绍了如何在 React Native 项目中添加 Babel 配置，以支持一些新的 JavaScript 语法和模块系统的转换。我们详细说明了 .babelrc 文件的相关配置项，并通过一个示例代码演示了如何使用 Babel。
你可以根据自己的项目需要，选择适合的插件和配置，用 Babel 来处理项目中的 JavaScript 代码。这样可以让我们的项目更加规范化，也可以更好地支持多个平台，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c7231810032fedd3909912