JSX编译是如何触发的？无构建工具React环境下Babel编译逻辑疑问

安全阿岳

2026-9-27

@babel/standalone 编译触发逻辑详解

你碰到的自动编译是@babel/standalone（浏览器端运行的Babel版本）内置的默认行为，完整的运行逻辑如下：

触发时机：你引入的babel.min.js加载完成并执行后，会自动监听页面的DOMContentLoaded事件，等整个HTML文档解析完毕、所有DOM节点都加载完成后，就会自动启动编译流程。
待处理脚本识别规则：Babel会遍历页面内所有的<script>标签，只会处理type属性为text/babel、text/jsx这类非标准JS类型的标签，你代码里写的<script type="text/babel">刚好命中了处理规则，不管是内联在标签里的代码，还是通过src属性引入的外部脚本，都会被它处理。
完整的编译执行流程：
1. 先获取待处理的代码内容：内联脚本直接读取标签内的文本，带src的外部脚本会发起网络请求拉取对应代码
2. 调用Babel的核心编译能力，把JSX、ES6+等浏览器不识别的语法转译为可以直接运行的ES5标准JS代码
3. 把编译完成的JS代码通过动态创建<script>标签插入页面执行，你的React渲染逻辑就是在这一步运行的
你问的编译前回调是存在的：@babel/standalone支持全局配置钩子，你可以在引入babel.min.js的标签之前定义全局配置，就能在编译前后插入自定义逻辑，示例配置如下：

// 注意这段配置必须写在babel.min.js的引入标签之前才会生效
window.BABEL_CONFIG = {
  presets: ['react', 'es2015']
}
window.BABEL_HOOKS = {
  // 编译前触发的钩子，可以自定义修改待编译的代码
  beforeCompile: (rawCode, scriptSource) => {
    console.log('待编译的代码来源：', scriptSource)
    return rawCode
  }
}