React Native 是 Facebook 推出的一款跨平台移动应用开发框架，它可以让开发者使用 JavaScript 和 React 的语法来开发 iOS 和 Android 应用程序。但是，React Native 的代码需要经过编译才能在移动设备上运行，而 Babel 是一款流行的 JavaScript 编译器，它可以将 ES6/ES7 的代码转换为 ES5 的代码，从而在现有的浏览器和设备上运行。本文将介绍如何使用 Babel 编译 React Native 应用程序，并提供详细的学习和指导意义。
安装 Babel
在开始编译 React Native 应用程序之前，我们需要先安装 Babel。可以使用 npm 来安装 Babel：
npm install --save-dev babel-cli babel-preset-env babel-preset-react-native
上面的命令会将 Babel CLI、Babel 的环境预设（preset）和 React Native 的环境预设安装到本地项目中。其中，Babel 的环境预设用于将 ES6/ES7 的代码转换为 ES5 的代码，而 React Native 的环境预设用于支持 JSX 语法。
配置 Babel
安装完成后，我们需要在项目的根目录下创建一个 .babelrc 文件，并在其中配置 Babel。下面是一个示例的 .babelrc 文件：
{
"presets": [
"env",
"react-native"
],
"plugins": []
}上面的配置指定了使用 env 和 react-native 两个预设，其中 env 用于将 ES6/ES7 的代码转换为 ES5 的代码，而 react-native 则用于支持 JSX 语法。此外，我们还可以在 plugins 中添加其他的插件，用于扩展 Babel 的功能。例如，可以使用 transform-object-rest-spread 插件来支持对象的扩展运算符。
编译 React Native 应用程序
在安装和配置 Babel 后，我们就可以开始编译 React Native 应用程序了。可以使用以下命令来编译应用程序：
babel src --out-dir lib
上面的命令指定了编译源代码目录 src，并将编译后的代码输出到目录 lib 中。
示例代码
下面是一个简单的 React Native 应用程序，它使用了 ES6 的箭头函数、模板字符串和对象的扩展运算符：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
----- --- - -- -- -
------
-------------- ------------------
-------
--
------ ------- ----使用 Babel 编译后的代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
----- --- - -- -- -
------
-------------- - - ----- - -----------
-------
--
------ ------- ----总结
本文介绍了如何使用 Babel 编译 React Native 应用程序，并提供了详细的学习和指导意义。通过使用 Babel，我们可以使用 ES6/ES7 的语法来开发 React Native 应用程序，并将其转换为支持现有设备的 ES5 代码。同时，本文还提供了示例代码，方便读者进行实践和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66135e05d10417a2223c803b
