在开发 React 应用时，我们常常需要使用 ES6 或更高版本的 JavaScript 语法，以及使用最新的 ECMAScript 规范提供的 API。而在浏览器运行时，这些高级语法和 API 可能并不被所有浏览器所支持。因此，我们需要一个工具来将这些高级语法和 API 转换成浏览器可以支持的代码，这个工具就是 Babel。
Babel 是一个针对 JavaScript 的编译器，它可以将 ES6 或更高版本的 JavaScript 代码转换成 ES5 代码以及最新的 ECMAScript 规范提供的 API 转换成浏览器可以支持的 API。
在 React 项目中集成 Babel，可以帮助我们使用最新的 JavaScript 语法和 ECMAScript 规范提供的 API 来编写代码，同时在浏览器运行时也能保证代码的兼容性。
安装 Babel
首先，我们需要安装 Babel 相关的工具和插件。在 React 项目中，我们通常会使用 @babel/core、@babel/preset-env 和 @babel/preset-react 这些包。
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
配置 Babel
在安装完相关的包之后，我们需要引入 Babel，并且配置 Babel。在 React 项目中，我们可以通过创建 .babelrc 或在 package.json 中添加 "babel" 字段来配置 Babel。
.babelrc
在项目根目录下创建 .babelrc 文件，并添加以下内容：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}这里使用 @babel/preset-env preset 来转换 ES6 语法以及最新的 ECMAScript 规范提供的 API，使用 @babel/preset-react preset 来转换 JSX 语法。
package.json
在 package.json 中添加 "babel" 字段，并添加以下内容：
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}集成 Babel
配置好 Babel 之后，我们需要将 Babel 集成到 React 项目中。在 React 项目中，我们通常会使用 babel-loader 和 @babel/plugin-transform-runtime 这些包。
npm install --save-dev babel-loader @babel/plugin-transform-runtime
在 webpack 的配置文件中，我们需要添加 babel-loader 和 @babel/plugin-transform-runtime。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- -----------------------------------
-
-
-
-
-
--示例代码
下面给出一个使用 React 和 Babel 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-
------ ------- ----在这个示例代码中，我们使用了 ES6 语法（类）和 JSX 语法。通过配置 Babel，我们可以将这些语法转换成浏览器可以支持的代码。
总结
在 React 项目中集成 Babel 可以帮助我们使用最新的 JavaScript 语法和 ECMAScript 规范提供的 API 来编写代码，同时在浏览器运行时也能保证代码的兼容性。在配置 Babel 和集成 Babel 的过程中，我们需要注意选择合适的包，并且要对配置和集成进行正确的调试和测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc62345ad90b6d0427c580