JavaScript 中 Babel 怎么处理 JSX 语法的转换-js教程-PHP中文网

浏览器不能直接解析jsx，因其包含尖括号标签、classname属性、{表达式}嵌入、自闭合语法等非标准javascript结构；babel在编译阶段通过解析、转换（调用react.createelement）、生成三步将其转为合法js代码。

javascript 中 babel 怎么处理 jsx 语法的转换

Babel 不是直接“执行”JSX，而是把它当作一种特殊语法，在编译阶段就转成标准 JavaScript 函数调用——核心就是 React.createElement()。这个过程不依赖运行时，纯静态转换。

浏览器只认识合法的 JavaScript 语法，而 JSX 包含大量非标准结构：

尖括号标签（如 <div>）在 JS 中会被解析为小于号和大于号，不是有效表达式 <li> <code>className="box" 这类写法既不是对象字面量，也不是函数参数形式
{count} 这种花括号嵌入，在 JS 中单独出现会报错（除非在模板字符串或对象里）
<img> 这种自闭合标签，JavaScript 完全没有对应语法规则

Babel 把 JSX 转成可执行代码，靠的是标准的编译三阶段：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

解析（Parse）：用 @babel/parser 把 JSX 字符串构建成抽象语法树（AST），识别出元素类型、属性、子节点等结构
转换（Transform）：启用 @babel/plugin-transform-react-jsx 插件，遍历 AST 中的 JSX 节点，逐个替换成 React.createElement() 调用
生成（Generate）：把修改后的 AST 输出为普通 JavaScript 字符串，保留缩进和可读性

不同 JSX 写法对应不同的 React.createElement 形式：

原生标签（小写字母开头）→ 第一个参数是字符串：<div>Hi</div> → React.createElement("div", null, "Hi")
自定义组件（大写字母开头）→ 第一个参数是变量名：<header></header> → React.createElement(Header, null)
带属性和子元素：<input type="text" value="{val}"> → React.createElement("input", { type: "text", value: val })
Fragment：<p>a</p>> → React.createElement(React.Fragment, null, React.createElement("p", null, "a"))

要让 Babel 处理 JSX，得配对两样东西：

安装插件：npm install --save-dev @babel/plugin-transform-react-jsx
在 .babelrc 或 babel.config.json 中声明插件或使用预设：{"presets": ["@babel/preset-react"]}
如果没显式配置，Babel 默认会把 React.createElement 当作目标函数；也可通过 runtime 配置改用 jsx 运行时（如 import { jsx } from 'react'）