React 和 ES6 普及后，成为了前端开发中最热门的技术。但是，因为一些浏览器不支持 ES6 语法，我们需要使用 Babel 来将 ES6 代码转换成 ES5。Babel 是一个 JavaScript 编译器，用于将新的 ECMAScript 版本转换成向后兼容的 JavaScript。本文将详细介绍如何使用 Babel 编译 React+ES6。
安装
首先，我们需要安装 Babel。在终端中运行以下命令：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
配置
安装完成后，我们需要在项目的根目录下创建一个名为 .babelrc 的文件。该文件用于存储 Babel 的配置信息。我们可以在 .babelrc 文件中指定要使用的 preset，以便让 Babel 知道要将 ES6 和 JSX 转换成什么。
以下是示例的 .babelrc 配置文件：
{
"presets": [
"react",
"es2015"
]
}这里我们用到了 babel-preset-react 和 babel-preset-es2015 两个 preset。babel-preset-react 用于将 JSX 转换为 JavaScript，babel-preset-es2015 用于将 ES6 解析成 ES5。
我们还需要在 webpack.config.js 中配置 Babel。在 module.rules 中添加以下规则：
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}这里我们使用了 babel-loader 来处理 JavaScript 和 JSX。exclude 是指定哪些文件夹不需要使用 Babel。
示例代码
最后，我们来看一下使用 Babel 编译 React+ES6 的示例代码。以下是一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
-------- -
------ -
---------- ------------
--
-
-
------ ------- ----使用 Babel 编译后的代码如下所示：
-- -------------------- ---- -------
---- --------
------------------------------ ------------- -
------ ----
---
--- ------ - -----------------
--- ------- - -------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
--- --- - -------- ------------------ -
-------------- ------------------
-------- ----- -
--------------------- -----
------ -------------------------------- -------------- -- --------------------------------------- ------------
-
----------------- --
---- ---------
------ -------- -------- -
------ ------------------------------
------
-----
------ -------
--
-
----
------ ----
-----------------------------
--------------- - ----显然，经过 Babel 编译后的代码更加冗长，但是可以兼容大多数现代浏览器和旧浏览器。
结论
学习使用 Babel 编译 React+ES6 是非常必要的。通过 Babel，我们可以兼容当前流行的 ES6 语法和 React 组件。希望这篇文章能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fce9e44471362601748f83