第 23 卷

JSX 是 React 等框架的语法扩展（如 <div>Hello</div>），本质是“语法糖”，浏览器无法直接解析。Babel 处理 JSX 的核心是“通过专用插件将 JSX 语法转译为 JavaScript 函数调用”，让浏

览器能够识别执行。具体依赖 @babel/preset-react（预设）或 @babel/plugintransform-react-jsx（核心插件）实现，处理流程如下：

1. 核心依赖

Babel 本身不支持 JSX 处理，需安装以下依赖：

Code block

@babel/preset-react 是 JSX 处理的预设，内部包含 @babel/plugin-transformreact-jsx（核心转译插件）、 @babel/plugin-transform-react-display-name（添

加组件显示名称）等插件，推荐直接使用预设。

1. 配置方式

在 Babel 配置文件中添加 @babel/preset-react 预设：

Code block

1// babel.config.js 2module.exports = {

3presets: [

1. 具体处理流程

Babel 处理 JSX 分为“语法解析→转译生成 JS 代码”两个核心步骤：

Code block

1// 原始 JSX 代码 2const App = () => <div className="app">Hello JSX</div>;

解析后生成的 AST 节点会包含 JSX 元素的标签名（ div）、属性（ className="app"）、子节点（ Hello JSX）等信息。

（2）步骤2：转译 JSX 为 JS 函数调用

Babel 的转换器（ @babel/core）通过 @babel/plugin-transform-react-jsx 插件，将 AST 中的 JSXElement 节点转译为 JavaScript 函数调用。转译结果取决于 runtime 配置选项：

• runtime: "automatic"（React 17+ 推荐）：自动导入 react/jsx-runtime 模块中的 jsx

或 jsxs 函数，无需手动引入 React。转译结果：

Code block

1// 转译后的代码（自动导入 jsx 函数）

2import { jsx as _jsx } from "react/jsx-runtime";

3 4const App = () => _jsx("div", {

5className: "app", 6children: "Hello JSX"

7});

• runtime: "classic"（旧版 React 16-）：转译为 React.createElement 函数调用，需手动

在文件顶部引入 React。转译结果：

Code block

1// 转译后的代码（需手动引入 React）

2import React from "react";

3

• 属性名转换：JSX 中的 className 转译为 className（避免与 JavaScript 关键字 class

• 事件名转换：JSX 中的驼峰式事件名（如 onClick）保持不变，转译为函数调用的属性（如

onClick: handleClick），React 会自动处理为原生事件（如 click）。

• 子节点处理：JSX 中的子元素（文本、其他 JSX 元素）会作为 children 参数传入 jsx 或

React.createElement 函数。

• Fragment 处理：空标签 <></>（React Fragment）会转译为 jsx(React.Fragment,

...) 或 React.createElement(React.Fragment, ...)。

1. 适配其他框架的 JSX 处理

Babel 的 JSX 转译不仅支持 React，还可通过 importSource 选项适配 Vue 3、Preact 等框架。例如适配 Vue 3：

Code block

1// babel.config.js 2module.exports = {

3presets: [ 4["@babel/preset-react", {

5runtime: "automatic",

转译后会使用 Vue 的 jsx 函数，实现 Vue 框架的 JSX 语法支持。

二十九、Babel的polyfill和transform-plugins之间有何区别?

Babel 的 polyfill（补丁）和 transform-plugins（转译插件）都是为了解决 ES6+ 代码的向后兼容问题，但二者解决的“兼容场景”完全不同：transform-plugins 负责转译“语法”，polyfill 负责补

充“API”。二者协同工作，才能让 ES6+ 代码在旧环境（如 IE11）中正常运行。

1. 核心定义与作用

（1）transform-plugins（转译插件）

核心作用：将 ES6+ 新增的语法特性转为 ES5 语法，解决“语法不兼容”问题。例如箭头函数、解构赋值、class 语法、let/const 等，这些都是“语法层面”的新增特性，旧浏览器无法识别。

示例：