一：定义：

Babel 是一个广泛使用的 JavaScript 编译器，它可以将高版本的 JavaScript 代码转换为低版本的 JavaScript 代码，以便于在旧版浏览器和环境中运行

编译过程分为三个阶段：parsing、transforming、generating

核心是使用插件对 JavaScript 代码进行转换和处理，每个插件都是一个独立的功能模块，可以根据需要选择使用或编写自定义的插件

二：流程

1：词法分析：Babel 会先对输入的 JavaScript 代码进行词法分析，将代码分割成一个个 token。

2：语法分析：Babel 会将词法分析得到的 token 转换为 AST（抽象语法树）。

3：转换处理：Babel 会使用一系列插件对 AST 进行遍历和转换处理，其中包括将 ES6/ES7 的语法转换为 ES5 的语法、将 JSX 转换为普通的 JavaScript 代码等等。

4：生成代码：Babel 最终会将处理后的 AST 转换为 JavaScript 代码，并输出给用户使用。

三：代码演示

项目根目录下新建一个 .babelrc 文件，并在其中添加需要使用的 preset

{  "presets": ["@babel/preset-env"]}

const message = "Hello, world!";console.log(message);//转换后var message = "Hello, world!";console.log(message);

四：总结

1：将输入的 JavaScript 代码进行词法分析和语法分析，然后使用一系列插件对 AST 进行转换和处理，最终输出转换后的 JavaScript 代码。

2：可以让我们使用新的 JavaScript 语言特性，同时还能够保证代码在旧版浏览器和环境中的兼容性。

五：拓展

（一）：写代码的时候是 es6，浏览器运行的时候是 es5，在做代码转化的时候，webpack 做了什么

1：模块打包：打包成一个或多个文件（bundle），以便浏览器能够加载和执行。

2：代码转换：通过使用 Babel 等工具，Webpack 可以将 ES6+ 代码转换成 ES5 代码，以确保在不支持 ES6 的浏览器中也能运行。具体步骤包括：

                       解析代码：Babel 解析你的 ES6+ 代码，生成抽象语法树（AST）。

                       转换代码：Babel 根据预设（presets）和插件（plugins）将 AST 转换成 ES5 代码。

                       生成代码：Babel 将转换后的 AST 重新生成代码。

3：加载器（Loaders）： 使用加载器来处理不同类型的文件。例如，babel-loader 可以处理 JavaScript 文件并使用 Babel 转换代码。

4：插件（Plugins）：可以扩展 Webpack 的功能，例如压缩代码、优化性能等

5：代码拆分：将代码拆分成多个 chunk，以实现按需加载和优化性能

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出路径
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有 .js 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader', // 使用 babel-loader
          options: {
            presets: ['@babel/preset-env'] // 使用 @babel/preset-env 预设
          }
        }
      }
    ]
  }
};