在使用 React Native 开发应用程序时，我们需要使用 Babel 将 ES6+ 代码转换为适用于现代浏览器和原生应用程序的代码。本文将介绍如何在 React Native 应用程序中使用 Babel 进行完全构建。
安装 Babel
首先，我们需要在项目中安装 Babel。可以使用以下命令安装最新版本的 Babel：
--- ------- ---------- ----------- ---------- ----------------- -------------------
此命令将安装 Babel 的核心功能以及两个预设 - @babel/preset-env 和 @babel/preset-react。其中，@babel/preset-env 用于将 ES6+ 代码转换为适用于所有浏览器的代码，@babel/preset-react 则用于转换 React JSX 代码。
配置 Babel
接下来，我们将创建一个名为 .babelrc 的文件，用于配置 Babel。在项目根目录下创建一个新文件，使用以下代码进行编辑：
-
---------- -
--------------------
---------------------
-
-此文件指定了需要使用的 Babel 预设。
使用 Babel 进行构建
现在，我们已经准备好使用 Babel 进行完全构建。打开 package.json 文件，并将以下代码添加到 scripts 部分：
---------- - -------- ------ --- -- ---- -
在上面的代码中，我们创建了一个名为 build 的脚本，这将使用 Babel 将 src 文件夹中的代码转换为 lib 文件夹中的代码。
现在，我们可以通过运行以下命令使用 Babel 进行构建：
--- --- -----
此命令将使用 Babel 将 src 文件夹中的代码转换为 ES5 代码，并将其输出到 lib 文件夹中。
结论
通过本文，我们了解了如何在 React Native 应用程序中使用 Babel 进行完全构建。每次修改代码后，只需运行 npm run build 命令，即可将 ES6+ 代码转换为 ES5 代码。这是一种非常有用的技术，可以帮助我们更轻松地开发 React Native 应用程序。
示例代码
以下是一个简单的 React Native 组件，演示了如何使用 ES6+ 和 JSX 代码来创建 UI 元素：
------ ----- ---- --------
------ - ----- ----- ---------- - ---- ---------------
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
--
----- -
--------- ---
--
---
----- --- - -- -- -
------ -
----- -------------------------
----- -------------------------- -------------
-------
--
--
------ ------- ----在运行 npm run build 命令后，此代码将转换为以下 ES5 代码：
---- --------
--- ----- - -----------------
--- ------------ - ------------------------
--- ------ - --------------------------------
---------- -
----- --
----------- ---------
--------------- --------
--
----- -
--------- --
-
---
--- --- - -------- ----- -
------ --------------------
------------------
- ------ ---------------- --
--------------------
------------------
- ------ ----------- --
------- -------
-
--
--
-------------- - ----来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67145cedad1e889fe213711d