babel

Babel 是一个广泛使用的 JavaScript 编译器，主要作用是将采用最新语法（如 ES6+）编写的代码转换为向后兼容的 JavaScript 版本，以便在旧版浏览器或环境中运行。

作用

1. 语法转换：将现代 JavaScript 语法（如箭头函数、类、模板字符串等）转换为旧版 JavaScript 语法。

// 转换前（ES6 箭头函数）
const add = (a, b) => a + b;

// 转换后（ES5 函数）
var add = function(a, b) { return a + b; };

2. Polyfill：提供对新 API 的支持 对于新语法之外的 新 API（如 Promise、Array.prototype.includes），Babel 本身不转换，但可通过 @babel/polyfill（已过时，现为 core-js 和 regenerator-runtime）模拟这些 API 的实现，让旧环境支持。

3. 源码转换

除了语法转换，Babel 还可用于其他源码处理，例如： - 转换 JSX（React 的语法）为普通 JavaScript。 - 移除代码中的注释、压缩代码（配合其他工具）

工作原理

Babel 的转换过程分为三个阶段，类似编译器的工作流程：

1. 解析（Parse）：

将源代码解析为抽象语法树（AST，一种结构化的代码表示形式）。这一步骤分为两个阶段：

• 词法分析（Lexical Analysis）：
  • 将代码字符串分解为有意义的 token（标记）。
  • 例如，代码 const x = 1; 会被拆分为 const、x、=、1、; 等 token。
• 语法分析（Syntactic Analysis）：
  • 根据 JavaScript 语法规则，将 tokens 转换为 AST 节点。
  • 每个节点包含类型（如 VariableDeclaration）和属性（如变量名、值）

例如，下面是const x = 1 的简化AST结构

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "kind": "const",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": { "type": "Identifier", "name": "x" },
          "init": { "type": "Literal", "value": 1 }
        }
      ]
    }
  ]
}

2. 转换（Transform）：

Babel 遍历 AST，通过 插件（Plugins） 修改节点。每个插件定义了如何处理特定类型的节点。例如：

• 将 ES6 的箭头函数转换为 ES5 的普通函数。
• 将 JSX 元素转换为 React.createElement() 调用。

3. 生成（Generate）：

根据修改后的 AST，Babel 生成新的代码字符串，并可选择生成 source map（用于调试）。这一步骤包括：

• 将 AST 转换为代码字符串。
• 添加必要的空格、缩进和注释。
• 处理特殊情况（如保留原代码中的引号风格）。

核心babel

@babel/core

• 作用：Babel的核心编译器，负责解析、转换和生成代码（AST处理）
• 地位：所有的Babel工具都依赖此包

@babel/cli

作用：命令行工具，允许在终端直接运行 Babel 转换。

# 示例：将 src 目录下的文件编译到 dist 目录
npx babel src --out-dir dist

@babel/preset-env

• 作用：智能预设，根据目标浏览器 / 环境自动确定需要转换的语法。 babel.config.json 配置示例

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

@babel/polyfill（已弃用）

• 替代方案：core-js + regenerator-runtime
• 作用：提供新 API 的垫片（如 Promise、Array.prototype.includes）。

// 按需引入 polyfill
import "core-js/stable";
import "regenerator-runtime/runtime";

Babel预设

1. @babel/preset-react
   • 作用：转换 React 的 JSX 语法和 React 特定特性（如 Fragment）。
2. @babel/preset-typescript
   • 作用：转换 TypeScript 代码为 JavaScript（仅处理类型擦除，不负责类型检查）。

Babel 插件（Plugins）

1. @babel/plugin-transform-runtime
   • 作用：避免 polyfill 全局污染，复用 Babel 辅助函数（如 _extends）。
2. @babel/plugin-proposal-class-properties
   • 作用：转换类属性语法（如 class A { prop = 1 }）。
3. @babel/plugin-proposal-decorators
   • 作用：转换装饰器语法（如 @decorator class A {}）。

babel集成工具

1. @babel/register

   • 作用：在 Node.js 中动态编译代码，通常用于测试或开发环境。

2. babel-loader

   • 作用：Webpack 的加载器，用于在构建过程中转换 JavaScript 文件。
   • 配置示例（webpack.config.js）：

// webpack.config.js 配置示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};