@babel/generator @babel/parser

TIP

@babel/parser 转成ast @babel/generator 生成代码code

@babel/parser

TIP

把一段代码转成ast, 使用如下：

import { parse } from '@babel/core';

const code = `const a = 123;`

const parseCode = parse(code, {
  sourceType: 'unambiguous' // "script", "module", or "unambiguous". Defaults to "script".
})

console.log(parseCode);

输出：

bash

Node {
  type: 'File',
  start: 0,
  end: 14,
  loc: SourceLocation {
    start: Position { line: 1, column: 0, index: 0 },
    end: Position { line: 1, column: 14, index: 14 },
    filename: undefined,
    identifierName: undefined
  },
  errors: [],
  program: Node {
    type: 'Program',
    start: 0,
    end: 14,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: undefined
    },
    sourceType: 'script',
    interpreter: null,
    body: [ [Node] ],
    directives: []
  },
  comments: []
}

可以去astexplorer 查看具体AST

@babel/generator

TIP

咱们继续接着上面写，把上面一段ast给转化成code，使用方式如下：

import { parse } from '@babel/core';
import generate from '@babel/generator';

const code = `const a = 123;`;

const parseCode = parse(code, {
  sourceType: 'unambiguous' // "script", "module", or "unambiguous". Defaults to "script".
})

const { code: generateCode } = generate(parseCode);
console.log(generateCode,'generateCode')

输出：

bash

const a = 123; generateCode

@babel/generator @babel/parser ​

@babel/parser ​

@babel/generator ​

@babel/generator @babel/parser

@babel/parser

@babel/generator