Babel 是一个 JavaScript 编译器，主要用于将现代 JavaScript 代码转换为向后兼容的版本，以便在老旧的浏览器或环境中运行。它通常用于以下目的：
1. 转换现代 JavaScript 语法
JavaScript 在不断发展，许多新的语法特性（如箭头函数、类、模块、async/await 等）可能不被旧版浏览器支持。Babel 允许开发者使用最新的 JavaScript 语法和特性，并将代码转换成浏览器或 Node.js 环境能够理解的旧版 JavaScript 代码。
例如：
const greet = () => {
console.log('Hello, World!');
};
Babel 会将其转化为 ES5 兼容的代码：
var greet = function() {
console.log('Hello, World!');
};
2. 支持不同的浏览器或环境
Babel 可以根据目标环境（浏览器或 Node.js 的特定版本）进行配置，确保生成的代码能够在这些环境中运行。你可以通过设置 targets 来指定支持的浏览器或环境，Babel 会自动将代码转化为兼容这些环境的版本。
例如，如果你想支持 Chrome 58+ 和 Firefox 50+，你可以在 Babel 配置文件中设置：
{
"targets": {
"browsers": ["> 1%", "last 2 versions", "Firefox ESR"]
}
}
3. Polyfill 新的 API
对于一些新的 JavaScript API（如 Promise, Array.prototype.includes, Object.assign 等），旧的环境可能没有这些功能。Babel 配合 @babel/polyfill 或 core-js，可以将这些新的 API 引入到旧版环境中。
例如：
const promise = new Promise((resolve, reject) => {
// promise logic
});
Babel 会添加适当的 polyfill 代码，以便即使在不支持 Promise 的环境中，也能正确运行。
4. 转换 JSX（用于 React）
在 React 开发中，我们常常使用 JSX 语法来编写组件。JSX 是一种 JavaScript 的扩展语法，它并不是浏览器原生支持的 JavaScript，因此需要 Babel 来转换 JSX 代码为 React.createElement 调用的普通 JavaScript 代码。
例如：
const element = <h1>Hello, world!</h1>;
Babel 会将其转化为：
const element = React.createElement('h1', null, 'Hello, world!');