在前端开发中，我们经常会使用 React 编写组件，而 JSX 语法是 React 中不可或缺的一部分。但是，由于浏览器无法直接运行 JSX 代码，我们需要通过 Babel 将其转译为纯 JS 代码，以便在浏览器中运行。
本文将介绍如何使用 Babel 将 JSX 代码转译为纯 JS，并对其中涉及到的知识点进行详细讲解，以帮助读者全面掌握这一技术。
什么是 JSX？
JSX 是一种语法扩展，它允许我们在 JavaScript 中编写类似于 HTML 的代码。例如，下面是一个使用 JSX 编写的组件：
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}在上面的代码中，<h1> 和 </h1> 之间的内容就是 JSX 语法，它会被转译为纯 JS 代码。
为什么需要转译 JSX？
尽管 JSX 语法非常方便，但是它并不是标准的 JavaScript 语法，浏览器无法直接运行它。因此，我们需要用一种转换工具将 JSX 代码转换为标准的 JavaScript 代码，以便在浏览器中运行。
Babel 是一个流行的 JavaScript 转换工具，它支持将 JSX 代码转换为纯 JS 代码。使用 Babel 转换 JSX 代码的过程如下：
- 将 JSX 代码传递给 Babel；
- Babel 解析 JSX 代码，生成 AST（抽象语法树）；
- Babel 使用插件将 AST 转换为标准的 JavaScript 代码。
下面将详细介绍如何使用 Babel 进行转译。
使用 Babel 转译 JSX
在使用 Babel 转译 JSX 代码之前，我们需要先安装 Babel 及其相关插件：
npm install -D babel-cli babel-preset-react
上面的命令会安装 Babel CLI 及其 React 插件，React 插件用于支持转译 JSX 语法。
接下来，我们创建一个名为 babel.config.js 的配置文件，用于指定 Babel 的配置：
module.exports = {
presets: [
"@babel/env",
"@babel/react"
]
};在上面的配置文件中，我们指定了两个 preset，一个是 @babel/env，它是 Babel 的一个官方 preset，用于转换 ES6+ 语法；另一个是 @babel/react，它是用于转换 JSX 语法的插件。
有了配置文件以后，我们就可以使用 Babel 将 JSX 代码转换为纯 JS 代码了。我们可以通过命令行来执行转译命令，如下所示：
npx babel src --out-dir lib --ignore '__tests__'
上面的命令会将 src 目录中的所有文件转译为纯 JS 代码，并将转译后的代码保存到 lib 目录中。其中，--ignore '__tests__' 表示忽略 __tests__ 目录中的文件。
深入理解 Babel 转译
在使用 Babel 转译 JSX 代码时，我们需要了解几个概念：
Parser
Parser 是 Babel 的一个模块，用于将源代码解析成 AST。Babel 提供了不同的 Parser，例如 @babel/parser、@babel/plugin-parse-typescript 等。在转译 JSX 代码时，我们需要使用 @babel/parser。
下面是一个将 JSX 代码解析为 AST 的示例：
-- -------------------- ---- -------
----- ------ - -------------------------
----- ---- - -
-------- --------------- -
------ ---------- -------------------
-
--
----- --- - ------------------ -
----------- ---------
-------- -------
---在上面的示例中，我们将 JSX 代码传递给 parser.parse 方法，并传递了一个选项对象。其中，sourceType: "module" 指定了代码的类型为模块化，plugins: ["jsx"] 指定了要解析的插件为 jsx。
Transformer
Transformer 是 Babel 的一个模块，用于将 AST 转换成目标代码。Transformer 对 AST 进行递归遍历，并对 AST 的节点进行修改。Babel 提供了很多 Transformer，例如 @babel/plugin-transform-arrow-functions、@babel/plugin-transform-block-scoping 等。在转译 JSX 代码时，我们需要使用 @babel/plugin-transform-react-jsx。
下面是一个将 JSX 代码转换为纯 JS 代码的示例：
-- -------------------- ---- ------- ----- ----- - ----------------------- ----- --- - --- - -- -- ------------ - --- ----- --- ----- - ---- - - --------------------------- ----- - -------- --------------- -------- ------------------------------ --- ------------------
在上面的示例中，我们先使用 parser.parse 将 JSX 代码转换为 AST，然后使用 babel.transformFromAst 方法将 AST 转换为纯 JS 代码。其中，presets: ["@babel/env"] 指定了要转换的 ES6+ 语法，plugins: ["@babel/transform-react-jsx"] 指定了要转换的 JSX 语法。
Analyzer
Analyzer 是 Babel 的一个模块，用于分析代码的依赖关系。在转译过程中，Analyzer 会分析每个模块的依赖，并将它们转换为相对路径，以便在浏览器中正确加载相应的模块。
下面是一个使用 Analyzer 分析依赖关系的示例：
-- -------------------- ---- ------- ----- ----- - ----------------------- ----- ---- - --- - -- ------ ----- -------- - ------------- -- -------- ----- --------------- - --------------------- - --------- -------- ------------------------------ --- ---------------------------------- ------------------------------------------------------
在上面的示例中，我们使用 babel.transform 方法将代码转换为纯 JS 代码，并传递了一个 filename 参数。此外，我们还在 plugins 中指定了 @babel/transform-react-jsx，以支持转换 JSX 语法。转换完成后，我们可以通过 metadata.modules.imports 查看代码中的依赖关系。
总结
本文介绍了如何使用 Babel 转译 JSX 代码。我们从什么是 JSX 开始，逐步深入到 Babel 的 Parser、Transformer、Analyzer 等概念，帮助读者全面掌握 Babel 转译 JSX 代码的方法及原理。同时，我们还提供了示例代码，以帮助读者更好地理解这一技术。希望读者在学习本文后，能够熟练掌握使用 Babel 转译 JSX 代码的方法，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb885ff6b2d6eab360c6e0