babel 基本作用

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!');