跳到主要内容

认识

2023年12月29日
柏拉文
越努力，越幸运

一、认识​

@babel/parser、 @babel/traverse、@babel/generator 是 Babel 工具链的核心模块，用于解析 JavaScript/TypeScript 代码并遍历或修改其抽象语法树（AST）。在构建工具链、代码转换、静态分析、Linting、自动代码生成等场景中，这些模块被广泛应用。

  • @babel/parser：一个解析器模块，将源代码解析为 Babel 的 AST 格式。

  • @babel/traverse：一个遍历器模块，允许开发者访问和修改 AST 的每个节点，用于实现代码转换、重构等任务。

  • @babel/generator:

二、语法​

2.1 parser​

const babelParser = require("@babel/parser");

const { parse } = babelParser;

const sourceCode = `var a = lang("嘻嘻"); var b = lang("哈哈"); var c = () => { var d = 3; return d;};`;
const ast = parse(sourceCode, {
  sourceType: "module",
});
console.log(JSON.stringify(ast, null, 2));

2.2 traverse​

const babelParser = require("@babel/parser");
const babelTraverse = require("@babel/traverse");

const { parse } = babelParser;
const { default: traverse } = babelTraverse;

const sourceCode = `var a = lang("嘻嘻"); var b = lang("哈哈"); var c = () => { var d = 3; return d;};`;
const ast = parse(sourceCode, {
  sourceType: "module",
});

traverse(ast, {
  enter(path) {
    console.log("enter", path.node.type);
  },
  Identifier(path) {
    console.log("Identifier 节点类型", path.node.name);
  },
});

2.3 generator​

const babelParser = require("@babel/parser");
const babelTraverse = require("@babel/traverse");
const babelGenerator = require("@babel/generator");

const { parse } = babelParser;
const { default: traverse } = babelTraverse;
const { default: generate } = babelGenerator;

const sourceCode = `var a = lang("嘻嘻"); var b = lang("哈哈"); var c = () => { var d = 3; return d;};`;
const ast = parse(sourceCode, {
  sourceType: "module",
});

traverse(ast, {
  enter(path) {
    console.log("enter", path.node.type);
  },
  Identifier(path) {
    console.log("Identifier 节点类型", path.node.name);
  },
});

const { code } = generate(ast);
console.log("code", code)