在前端开发中，我们经常会使用到 React 技术栈，而 Babel 是一个非常流行的 JavaScript 编译工具，它可以将 ES6 与 JSX 语法编译成浏览器可以运行的代码。@gerhobbelt/babel-preset-react 是一个专门为 React 开发者准备的 Babel 插件，它提供了预设好的编译选项，简化了配置过程，本文将详细介绍如何使用该插件。
安装
如果你还没有安装 Babel 可以使用以下命令安装：
npm install --save-dev @babel/core @babel/cli
然后我们便可以安装 @gerhobbelt/babel-preset-react ：
npm install --save-dev @gerhobbelt/babel-preset-react
配置
在项目的根目录下创建一个 .babelrc 文件，并添加以下内容：
{
"presets": ["@gerhobbelt/babel-preset-react"]
}这个文件告诉 Babel 使用 @gerhobbelt/babel-preset-react 插件来编译代码。现在我们已经完成了插件的配置，让我们看看如何在项目中使用它。
使用
在我们的项目中，我们可以创建一个 src 文件夹，在其中编写我们的 React 代码。在这个文件夹中创建一个 app.js 文件，输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- ------- --------------- -
-------- -
------ ---------- ------------
-
-
-------------------- --- ---------------------------------以上代码是一个简单的 React 应用，它渲染了一个 "Hello World" 的文本。
运行以下命令，使用 Babel 编译代码：
npx babel src -d dist
这个命令将会把 src 目录下的所有 JavaScript 文件编译到 dist 目录中。
现在我们可以在 HTML 文件中引入 dist/app.js 文件，并在页面中添加一个 id 为 "root" 的容器：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ -----------
-------
------
---- ----------------
------- ---------------------------
-------
-------打开浏览器，你将会看到一个页面里渲染了 "Hello World" 的文本。这就是我们利用 @gerhobbelt/babel-preset-react 编译出的 React 应用。
示例代码
代码已经编写好了，如果你只想看一看示例代码，下面是完整的代码：
.babelrc 文件：
{
"presets": ["@gerhobbelt/babel-preset-react"]
}src/app.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- ------- --------------- -
-------- -
------ ---------- ------------
-
-
-------------------- --- ---------------------------------HTML 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------ -----------
-------
------
---- ----------------
------- ---------------------------
-------
-------总结
@gerhobbelt/babel-preset-react 可以帮助我们更轻松地使用 Babel 编译 React 代码，使得我们可以更专注于开发功能。在学习如何使用低级别技术是否会引入新的思维模型。同时，我们也可以将这些技术应用到我们的实际项目中，提高我们的编码效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f03e407403f2923b035be25