React 新手经常遇到这样的对话：
👶：“我写了个 JSX，浏览器报错了……”
👨🏫：“你得用 Babel 转译一下。”
👶：“Babel 是啥？”
👨🏫：“还有
.babelrc、babel.config.json、preset、plugin……”👶：“？？？？？”
别怕！今天这篇文章，就是要让你彻底整明白 Babel 的来龙去脉，JSX 到底转了个啥，
.babelrc和babel.config.json区别在哪。你不需要有任何高级前置知识，小白也能学得明明白白，甚至还能写进简历
什么是 JSX？
JSX 是 React 推出的一种“语法糖”，让你能这样写代码：
const App = () => <h1>Hello React</h1>;
看起来像 HTML，但其实……它不是！
JSX 本质会被转换成：
const App = () => React.createElement('h1', null, 'Hello React');
所以浏览器本身并不认识 JSX，需要先转换成它能理解的 JS。
这个“转换魔法”就是 Babel 的工作。
Babel 是啥？为什么离了它 React 就跑不动？
Babel 是一个 JavaScript 编译器，能把你写的“高级语法”转换成浏览器能执行的“低配语法”。
比如它可以干这些事：
| 原始代码 | Babel 转译后 |
|---|---|
| JSX | React.createElement() |
箭头函数 ()=>{} | 普通函数 function(){} |
let / const | 变成 var（为了兼容旧浏览器） |
async / await | 变成 Promise 和生成器 |
Babel 是怎么把代码“加工”的？
来，我们自己手搓一次编译流程！
✅ 第一步：初始化项目并安装依赖
pnpm init -y
pnpm add @babel/core @babel/cli @babel/preset-react -D
解释一下：
| 包名 | 用途 |
|---|---|
@babel/core | Babel 的核心编译器引擎 |
@babel/cli | 命令行工具，能跑 babel 命令 |
@babel/preset-react | 支持 JSX 的转换 |
✅ 第二步：创建 JSX 文件
新建一个文件 app.jsx：
const App = () => <h1>Hello Babel!</h1>;
✅ 第三步：配置 Babel
你可以用两种方式配置：
方式1：babel.config.json（推荐）
{
"presets": ["@babel/preset-react"]
}
方式2：.babelrc
{
"presets": ["@babel/preset-react"]
}
那这两者有啥区别？别急，后面专门讲！
✅ 第四步：执行转译命令！
npx babel app.jsx -o output.js
然后你就会看到一份非常熟悉的代码：
import React from "react";
const App = () => /*#__PURE__*/React.createElement("h1", null, "Hello Babel!");
成功！你刚手动完成了一次 JSX ➜ JS 的转译！
.babelrc vs babel.config.json：到底该选哪个？
这是前端圈的经典问题！咱们一表打尽：
| 比较维度 | .babelrc | babel.config.json |
|---|---|---|
| 文件类型 | JSON（或 .babelrc.js） | 标准 JSON（或 babel.config.js） |
| 配置作用范围 | 局部配置（只作用于当前文件夹） | 全局配置（适合整个项目） |
| 适合谁用 | 独立 npm 包/组件库 | React 项目、Monorepo、Vite 项目等 |
| 官方推荐 | ❌ 已不推荐 | ✅ 推荐新项目用这个 |
| 优先级 | 低（可能被忽略） | 高（全局生效） |
总结一句话：
现在项目里，推荐用
babel.config.json替代.babelrc，特别是搭配 Vite/Webpack 时，全局配置才不会“抽风”。
小结：你该怎么选？
- 小项目 / 练习：随便用
.babelrc或babel.config.json - 正式项目 / Monorepo：果断用
babel.config.json - 你喜欢用 JS 动态配置？可以用
.babelrc.js/babel.config.js
面试角度你能说点啥？
面试官：“你能说下 Babel 编译 JSX 的原理吗？”
你就回答：
- JSX 是 React 的语法糖，本质会被转成
React.createElement - 浏览器不支持 JSX，需要 Babel 先做转译
- Babel 使用 preset（如
@babel/preset-react）告诉它怎么转 - 可以通过
babel.config.json全局配置，也可以用.babelrc局部配置 - Babel 是构建阶段运行的，不影响运行性能
你说完这些，对方 HR 当场点头： “可以进下一轮了。”
写在最后：你已经掌握了什么？
✅ JSX 到底是啥，它怎么转成 React.createElement
✅ Babel 是干什么的，它转译哪些语法
✅ 手动配置 Babel 的完整流程
✅ .babelrc vs babel.config.json 的区别、使用场景、优劣对比
✅ 面试如何吹得刚刚好
如果你喜欢这样的教程…
- 点个赞 👍 + 收藏 ❤️ + 关注我 ✅
- 评论区留言 “还想学啥？” 我都安排！
