React 是一个非常流行的 JavaScript 库，它被用于构建用户界面。与此同时，Babel 是一个 JavaScript 编译器，它可以将 ES6+ 代码编译为 ES5，以便它可以在所有浏览器中正确运行。在本文中，我们将探讨如何使用 Babel 编译 React。
安装 Babel
首先，我们需要安装 Babel，可以使用 npm 进行安装：
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
这个命令将安装 Babel 的核心库 @babel/core，命令行工具 @babel/cli，以及 @babel/preset-env 和 @babel/preset-react 预设。@babel/preset-env 可以让我们编译 ES6+ 代码，而 @babel/preset-react 可以帮助我们编译 JSX 代码。
配置 Babel
接下来，我们需要创建一个 .babelrc 文件来配置 Babel。在这个文件中，我们指定了 Babel 要使用哪些预设和插件：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}在这个文件中，我们只指定了两个预设 - @babel/preset-env 和 @babel/preset-react。这些预设包含了一些插件，这些插件可以帮助 Babel 编译我们的代码。
编译 React
有了 Babel 安装和配置好之后，我们就可以编译 React 代码了。我们可以使用 @babel/cli 来编译单个文件：
npx babel src/index.js --out-file dist/index.js
在这个例子中，我们将文件 src/index.js 编译为 dist/index.js。Babel 会自动读取我们的 .babelrc 文件并执行编译。
我们也可以使用 Babel 的 watch 模式来自动编译文件：
npx babel src --out-dir dist --watch
在这个例子中，我们将 src 目录下的所有文件编译到 dist 目录下，并开启了 watch 模式。这意味着 Babel 将会自动监视我们的代码并在文件更改时重新编译。
示例代码
这里是一个简单的 React 组件，它包含一个 HelloWorld 类和一个 render 方法：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------- ------- --------------- -
-------- -
------ -
---------- -----------
--
-
-
------ ------- -----------使用 Babel 进行编译后，将得到以下代码：
-- -------------------- ---- -------
---- --------
--- ------ - -----------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
--- ---------- -
-------------
-------- ------------------ -
--------------------------------- ------------------
-------- ------------ -
--------------------------------- ------------
------ -------------------------------------------- --------------------------------------------------- ------------
-
------------------------------------ --
---- ---------
------ -------- -------- -
------ ------------------------------------- ----- ------- ---------
-
----
------ -----------
-------------------------------
------------------ - -----------我们可以看到，Babel 将 import 语句转换为了 require 语句，并将 class 继承转换为了使用 babelHelpers 的函数调用。最终的输出可以在所有浏览器中运行。
结论
在本文中，我们学习了如何使用 Babel 编译 React 代码。我们通过安装 Babel 和一些必要的预设以及插件来配置 Babel，并使用命令行工具来编译代码。通过我们的示例代码，我们看到了 Babel 是如何将 ES6+ 和 JSX 代码编译为 ES5 代码，并可在所有浏览器中执行。最后，我们了解了 Babel 的 watch 模式，它可以帮助我们自动监视代码并在文件更改时重新编译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67186c8ead1e889fe22b0aa7