React 是 组件化开发的前端框架，是一种基于 jsx 语法的语言。随着React 版本升级，新的特性被引入，同时在一些自己的项目中使用较高版本的 React 也更加方便开发。但是，在一些老的项目中，我们仍然需要使用旧版本的React，此时就需要用到 Babel 来进行编译。
本文将介绍如何使用 Babel 编译高版本的 React，并提供一些技巧和指导意义。
什么是 Babel
Babel 是一个广泛使用的 JavaScript 编译器，支持将高版本的 JavaScript 语法和扩展编译成低版本的 JavaScript。Babel 也可作为编译器来编译React源码，从而使React在较低版本的浏览器中得以运行。
安装 Babel
首先，需要将 Babel 安装在您的项目中。可以使用 npm 来进行安装：
npm install babel-core babel-polyfill babel-preset-env babel-preset-react --save-dev
该命令在您的项目的 package.json 中将保存安装后的信息。
配置 Babel
Babel 的配置文件是 .babelrc，可用于指定 Babel 的不同插件和预设，用于识别和编译不同的 JavaScript 代码。
配置插件
插件是小型的、可重用的代码块，可扩展或更改 Babel 的转换行为。使用插件提供了更细粒度的控制和轻量级处理的能力。
例如，如果要使用ES2015箭头函数，可以添加以下插件：
{ "plugins": [ "transform-es2015-arrow-functions" ] }
配置预设
预设是插件的集合，可以一次性添加多个插件。预设通常是已经打包好的插件组合，并添加了额外的配置参数。
例如，以下代码使用了 babel-preset-env 和 babel-preset-react 预设：
{ "presets": [ ["env", {"modules": false}], "react" ] }
此配置将使用 'env' 预设来启用 ES6 和 ES7 特性，然后使用 'react' 预设来启用 React 转换。
编译 React
完成 Babel 配置后，可以使用 Babel 进行编译。使用以下命令编译您的 React 项目：
babel src -d lib
其中，src 是您源代码的目录，-d 指定输出目录。此命令将编译 src 目录下的所有 JavaScript 文件，并将编译结果输出到 lib 目录下。
实例
以下是一个示例项目，演示如何配置 Babel 来编译高版本的 React：
1. 安装依赖
首先，我们需要安装 Babel 相关的依赖：
npm install babel-core babel-polyfill babel-preset-env babel-preset-react react react-dom --save-dev
2. 配置 .babelrc 文件
接下来，我们需要在项目的根目录下创建一个 .babelrc 文件，并添加以下内容：
{ "presets": [ ["env", {"modules": false}], "react" ] }
这会启用 babel-preset-env 和 babel-preset-react 预设，以及所有相关的插件，来编译 React 代码。
3. 编写 React 组件
现在，我们可以开始编写 React 组件了。我们使用了ES6的语法和JSX语法，如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ----- --- ------- --------------- - ----- - - ----- ------- ------- -- -------- - ------ - ---------------------------- -- - - ----------------------- --------------------------------展开代码
4. 编译代码
使用以下命令来将代码编译到 lib 文件夹中：
babel src -d lib
5. 运行代码
最后，我们可以打开 index.html 文件（位于 lib 目录中），来查看我们编写的 React 组件在较低版本的浏览器中的运行情况。
总结
Babel 可以帮助我们编译高版本的 React 代码，使其在较低版本的浏览器中运行。本文介绍了如何安装和配置 Babel，以及如何使用 Babel 编译 React 代码。希望本文能够帮助您更好地了解 Babel，并提供有用的技巧和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480daf848841e989405b8e5
