网上有很多介绍这里就不介绍了,这一片主要讲解的如何入门,而不是只知道概念

const a = 1; // 目标代码

比如上面的代码生成的抽象树如下

{
  "type": "File",
  "start": 0,
  "end": 12,
  "loc": {
    "start": {
      "line": 1,
      "column": 0
    },
    "end": {
      "line": 1,
      "column": 12
    }
  },
  "program": {
    "type": "Program",
    "start": 0,
    "end": 12,
    "loc": {
      "start": {
        "line": 1,
        "column": 0
      },
      "end": {
        "line": 1,
        "column": 12
      }
    },
    "sourceType": "module",
    "interpreter": null,
    "body": [
      {
        "type": "VariableDeclaration",
        "start": 0,
        "end": 12,
        "loc": {
          "start": {
            "line": 1,
            "column": 0
          },
          "end": {
            "line": 1,
            "column": 12
          }
        },
        "declarations": [
          {
            "type": "VariableDeclarator",
            "start": 6,
            "end": 11,
            "loc": {
              "start": {
                "line": 1,
                "column": 6
              },
              "end": {
                "line": 1,
                "column": 11
              }
            },
            "id": {
              "type": "Identifier",
              "start": 6,
              "end": 7,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 6
                },
                "end": {
                  "line": 1,
                  "column": 7
                },
                "identifierName": "a"
              },
              "name": "a"
            },
            "init": {
              "type": "NumericLiteral",
              "start": 10,
              "end": 11,
              "loc": {
                "start": {
                  "line": 1,
                  "column": 10
                },
                "end": {
                  "line": 1,
                  "column": 11
                }
              },
              "extra": {
                "rawValue": 1,
                "raw": "1"
              },
              "value": 1
            }
          }
        ],
        "kind": "const"
      }
    ],
    "directives": []
  },
  "comments": []
}

而我们只需要关心body中的内容;

以下是干货

const code = ``    // 源代码
const a = 1; // 目标代码

如何将源代码 转换成 目标代码呢?

首先我们创建node工程

yarn add @babel/parser @babel/types @babel/generator @babel/traverse --dev

编辑index.js

const parser = require('@babel/parser');
const t = require('@babel/types');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;

const code = ``;

const ast = parser.parse(code);

//const a = 1;

const id = t.identifier('a');
const init = t.numericLiteral(1);
const declarations = t.variableDeclarator(id, init);

// 给body 加入 声明变量词法
const varDec = t.variableDeclaration('const', [declarations])

ast.program.body.push(varDec);

// 目标代码
const output = generator(ast, {}, code);

console.log('input', code);

console.log('output', output.code);

查看一下babel-types的相关支持