引言
各位前端er们，大家好！👋 作为一个正在进阶的大三学生，最近我沉迷于研究各种前端"黑科技"，这不，就让我发现了 Babel 这个宝藏工具！ 🚀
相信大家在写代码的时候都遇到过这样的情况：明明用了最新的 ES6 语法（比如 const、箭头函数啥的），结果在一些老旧的浏览器里就是跑不起来，看着控制台的报错信息，简直想把电脑砸了！😠
别慌！Babel 就是来拯救世界的！它就像一位魔法师🧙♂️，能把我们酷炫的 ES6 代码"翻译"成老旧浏览器也能看懂的 ES5 代码，让你的应用畅通无阻，简直不要太棒！ 🎉
👴ES6：新潮的"小鲜肉"，却让老浏览器"一脸懵"
我们都知道，ES6（ECMAScript 2015）给我们带来了许多好用的新语法，像 const、let、箭头函数等等，写起来那叫一个爽！但是，这些新语法就像是新潮的"小鲜肉"，老旧的浏览器爷爷们压根不认识，直接给你报错。所以，我们需要一位"翻译官"，把这些"小鲜肉"翻译成"老爷爷"能听懂的语言。
✨Babel：代码界的"返老还童"术
这时候，Babel 就闪亮登场啦！它就是一个代码界的"返老还童"术，能把我们写的新潮的 ES6 代码，转换成老旧浏览器也能识别的 ES5 代码，让你的代码在任何浏览器上都能流畅运行！它的工作原理就像这样：
javascript
ES6 代码（const a = 10;） ---> Babel ---> ES5 代码（var a = 10;）是不是很神奇？🤩
🛠️Babel 的家族成员，各司其职
Babel 可不是单打独斗的，它可是有一个庞大的家族！让我们来认识一下这些重要的成员：
-
@babel/core：这是 Babel 的核心大脑，负责执行真正的代码转换逻辑，比如把const变成var，把箭头函数变成普通函数等等。 -
@babel/cli：这是 Babel 的命令行工具，就像一个指挥官，你可以通过它在终端里输入命令，让 Babel 开始工作。比如，你想把demo.js转换成es5.js，就可以在终端里输入：clinpx babel demo.js -o es5.js这里有个小知识点：
npx可以让你不用全局安装 Babel，就能直接执行 Babel 命令，是不是很方便？ 🥳小Tips：
npx的原理是，如果项目里安装了某个包，npx就会优先去node_modules/.bin/目录里找这个包的可执行文件来运行。所以，即使你没有全局安装 Babel，只要项目里安装了，npx也能找到并执行。 -
@babel/preset-env：这个就像是 Babel 的"预设规则"，告诉 Babel 你想把代码转换成哪个版本的 ES。你可以配置它，让 Babel 根据你的目标浏览器，自动转换代码，避免出现兼容性问题。 -
@babel/preset-react：这个"预设规则"是专门用来处理 React 的 JSX 语法的，让 Babel 知道怎么把 JSX 代码转换成 JavaScript 代码。
⚙️配置文件：.babelrc，让 Babel 听你的
我们可以在项目的根目录下创建一个 .babelrc 文件，用来配置 Babel 的转换规则，比如你想使用 @babel/preset-env 和 @babel/preset-react，可以这样写：
json
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}有了这个配置文件，Babel 就知道你要做什么啦！
⚛️JSX：React 的"秘密武器"
接下来，我们再聊聊 JSX。🤔 大家第一次看到 JSX 代码，是不是会觉得很奇怪？
javascript
const hello = <p className="txt">Hello,<span>World!</span></p>这玩意儿怎么看起来既像 HTML 又像 JavaScript？别担心，它其实是 React 的一个"秘密武器"，让我们可以用类似 HTML 的语法来写 UI 组件，大大提高了开发效率。
小Tips： JSX 并不是 JavaScript 的新特性哦！它是 React 的一种语法扩展，需要经过 Babel 的特殊处理才能变成 JavaScript 代码。
🧙♀️Babel 如何处理 JSX？
Babel 会使用 @babel/preset-react 这个预设规则，把 JSX 代码转换成 React.createElement 函数的调用。上面的 JSX 代码转换后，会变成这样：
javascript
React.createElement("p", {
className: "txt"
}, "Hello,", /*#__PURE__*/React.createElement("span", null, "World!"));小Tips：
/*#__PURE__*/是一个注释，告诉 JavaScript 引擎这段代码是纯函数，可以进行一些优化。
是不是有点眼熟了？没错，React.createElement 函数就是 React 用来创建虚拟 DOM 的核心 API。
虚拟 DOM：性能优化的"幕后英雄"
你可能会问，为什么 React 不直接操作 DOM，而要用虚拟 DOM？ 🤔
其实，直接操作 DOM 是非常耗性能的。每次修改 DOM，浏览器都要重新渲染页面，这样会造成性能问题。而 React 通过虚拟 DOM，可以先在内存中计算出需要更新的部分，然后只更新需要更新的 DOM 节点，大大提高了性能。
小Tips： Vue 也采用了类似虚拟 DOM 的机制，来优化性能。所以，虚拟 DOM 已经成为现代前端框架的标配啦！
📝HTML 中的 JSX "小剧场"
为了让大家更直观地理解 JSX，我还特意写了一个小小的 HTML "剧本"：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSX</title>
</head>
<body>
<div id="example"></div>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="./babel.min.js"></script>
<script type="text/babel">
// text/babel 告诉浏览器，里面的内容是 JSX 语法
// babel 来执行一下转译
// JSX syntax 不支持
// const mytitle = <h1>你好</h1>
// console.log(mytitle);
ReactDOM.render(
<h1>你好</h1>,
document.getElementById('example')
)
</script>
</body>
</html>在上面的代码中，我们使用了 <script type="text/babel">，告诉浏览器里面的内容是 JSX 语法，需要使用 Babel 进行转换。然后，我们使用 ReactDOM.render() 函数，把 <h1>你好</h1> 这个 JSX 元素渲染到页面上。
细心的小伙伴可能会在发现一个提示
看到这个警告，是不是感觉有点懵？ 别慌，这其实是在提醒我们：你正在使用浏览器内的 Babel 转换器，这会影响生产环境的性能，你应该提前编译你的代码。
"浏览器内的 Babel 转换器"是什么鬼？
还记得我们之前在 HTML 文件里使用的 <script type="text/babel"> 吗？它就像一位"临时翻译官"，在浏览器运行时实时地把我们的 JSX 代码转换成 JavaScript 代码。
这种方式在开发的时候很方便，我们可以快速地看到代码的运行效果。但是，在生产环境下，它就变成了"拖油瓶"！ 🐌
为什么它会影响性能？
- 实时转换： 浏览器每次加载页面，都需要实时地转换 JSX 代码，这会消耗大量的 CPU 资源，导致页面加载速度变慢。
- 代码体积：
babel.min.js本身也是一个比较大的文件，会增加页面的请求次数，影响用户体验。 - 性能损耗： 在生产环境，我们应该追求极致的性能。浏览器实时转换会带来不必要的性能损耗。
那正确的做法是什么呢？
- 预编译（Precompile）： 在构建项目的时候，使用 Babel 命令行工具或者 Vite/Webpack 等构建工具，提前把你的代码转换成浏览器能识别的 JavaScript 代码。
- 生产环境： 把编译后的代码部署到生产环境，而不是把 Babel 代码和源文件一起打包上传。
举个例子：
如果我们用 Vite 来构建 React 项目，它会自动帮我们做好预编译的工作。我们只需要专注于业务代码，剩下的交给工具就行了。 🚀
小Tips： 浏览器本身是不支持 JSX 语法的，所以我们需要使用 Babel 来进行转换。
总结
Babel 就像一位神奇的魔法师，它能把我们写的酷炫的 ES6 代码和 JSX 代码，转换成老旧浏览器也能识别的 JavaScript 代码，让我们不用再担心兼容性问题。有了 Babel，我们可以尽情地使用最新的语法，享受代码带来的乐趣！🎉
希望通过这篇文章，你也能彻底搞懂 Babel 这个前端"神器"！如果你还有什么疑问，欢迎在评论区留言哦！我们一起学习，一起进步！ 💪