1、Babel 介绍

名称来历

babel 最开始叫 6to5，顾名思义是 es6 转 es5，但是后来随着 es 标准的演进，有了 es7、es8 等， 6to5 的名字已经不合适了，所以改名为了 babel。

babel 的用途

Babel 是一个 JavaScript 编译器，主要用于将现代 JavaScript（ES6+）代码转换为向后兼容的 JavaScript 代码，以便在较旧的浏览器或运行环境中执行。以下是 Babel 的核心用途：

1. 转译现代 JavaScript 代码

Babel 将 ES6+ 的新语法（如箭头函数、解构赋值、模块等）转换为 ES5，以确保代码可以运行在不支持新特性的环境中。
示例：

// ES6 代码
const add = (a, b) => a + b;

// 转译后的 ES5 代码
var add = function(a, b) {
    return a + b;
};

2. 转换 JSX

Babel 可以将 React 中使用的 JSX 语法转换为普通 JavaScript，便于浏览器理解和执行。
示例：

// JSX 代码
const element = <h1>Hello, world!</h1>;

// 转译后的代码
const element = React.createElement("h1", null, "Hello, world!");

3. 使用 Polyfill 支持新特性

Babel 配合工具（如 @babel/polyfill 或 core-js），可以为新 API 提供支持，例如 Promise、Array.prototype.includes 等。这种方式补充运行时缺失的功能。

4. 编译 TypeScript

Babel 支持将 TypeScript 转换为 JavaScript，尽管它不执行类型检查。

5. 语法实验

Babel 提供了对 JavaScript 提案的支持，使开发者可以使用尚未被正式纳入标准的新语法。

6. 代码优化

配合 Babel 插件，可以对代码进行优化，例如移除无用的代码或变量，以减少文件大小。

常见场景

1. 兼容性支持：在旧版本浏览器（如 IE11）中运行现代代码。
2. 前端框架：与 React、Vue 等框架结合，用于处理 JSX、模块化等特性。
3. 模块化开发：支持 ES Module 的转换，适应 CommonJS 或其他模块规范。

使用方式

Babel 通常通过以下工具集成到项目中：

• CLI：直接通过命令行运行 babel-cli 转换代码。
• Webpack：通过 babel-loader 在构建过程中完成代码转换。
• Rollup 或 Parcel：其他构建工具也能集成 Babel。

配置文件

Babel 的配置文件一般为 .babelrc 或 babel.config.js，用于设置预设（Presets）和插件（Plugins）。
例如：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}