babel 概览

@babel/parser

• 一个解析器，它将 JavaScript 源代码字符串转换成抽象语法树（AST）。AST 是程序代码的一种结构化表示，便于进一步的分析和转换。

import parser from "@babel/parser";

const code = `function add(a, b) { return a + b; }`;
const ast = parser.parse(code);

@babel/core

• Babel 的核心库，提供了转换 JavaScript 代码的功能。
• 它使用@babel/parser 解析代码，然后通过插件系统对 AST 进行转换，并使用@babel/generator 将其转换回 JavaScript 代码。

import { transformSync } from "@babel/core";
import presetEnv from "@babel/preset-env";

const code = "const example = () => 'Hello World';";
const { code: transformedCode } = transformSync(code, {
  presets: [presetEnv],
});

@babel/generator

• 此模块用于从 AST 生成 JavaScript 代码字符串。

import generator from "@babel/generator";
import * as t from "@babel/types";

const ast = t.arrowFunctionExpression(
  [t.identifier("a"), t.identifier("b")],
  t.binaryExpression("+", t.identifier("a"), t.identifier("b"))
);
const generatedCode = generator.default(ast).code;
console.log(generatedCode); // 输出："(a, b) => a + b"

@babel/code-frame

• 提供了一个创建代码帧的方法，通常用于错误报告时显示代码上下文。

import codeFrame from "@babel/code-frame";

const rawLines = `... your source code ...`;
const errorLine = 10;
const errorColumn = 20;
const frame = codeFrame(rawLines, errorLine, errorColumn);
console.error(frame);

@babel/runtime

• 提供了一些辅助函数和 polyfills，以支持在编译后的代码中使用某些 ES6+特性，例如迭代器、生成器、Promise 等等。

@babel/template

• 用于根据字符串模板创建 AST 节点，简化基于 AST 的代码生成任务。

import template from "@babel/template";

const buildRequire = template(`
  var IMPORT_NAME = require(SOURCE);
`);

const ast = buildRequire({
  IMPORT_NAME: t.identifier("myModule"),
  SOURCE: t.stringLiteral("my-module"),
});

// 然后可以将这个ast插入到其他代码中

@babel/traverse

• 提供了遍历和操作 AST 的能力，使得开发者能够访问和修改代码的各个部分。

import traverse from "@babel/traverse";
import * as t from "@babel/types";

traverse(ast, {
  enter(path) {
    if (t.isIdentifier(path.node, { name: "myVar" })) {
      path.node.name = "newVar";
    }
  },
});

@babel/types

• 包含了创建 AST 节点的各种方法，方便构建和修改 AST

参考文献

• https://babel.nodejs.cn/docs/babel-parser