[
  { type: 'Keyword', value: 'var' },
  { type: 'Identifier', value: 'a' },
  { type: 'Punctuator', value: '=' },
  { type: 'Numeric', value: '2' },
]

{
  ...
  "type": "VariableDeclarator",
  "id": {
    "type": "Identifier",
    "name": "a"
  },
  ...
}

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

const code = 'function fn(a) {}';
// 解析代码转为ast
const ast = parser.parse(code);
const myVisitor = {
    FunctionDeclaration(path) {
        // path.node.id.name = 'test';
        // 替换id
        path.node.id = type.identifier('test');
        // console.log(path.node.params);
        // 追加函数参数
        // path.node.params.push(type.identifier('b'), type.identifier('c'));
        // 更改函数参数
        path.node.params = [type.identifier('b'), type.identifier('c')];
    }
};

traverse(ast, myVisitor);
const res = generator(ast);
// console.log(res);
console.log(res.code);

const MyVisitor = {
  Identifier() {
    console.log("Called!");
  }
};

function square(n) {
  return n * n;
}

Called!
Called!
Called!
Called!

- FunctionDeclaration
  - Identifier (id)
  - Identifier (params[0])
  - BlockStatement (body)
    - ReturnStatement (body)
      - BinaryExpression (argument)
        - Identifier (left)
        - Identifier (right)

const MyVisitor = {
  Identifier: {
    enter() {
      console.log("Entered!");
    },
    exit() {
      console.log("Exited!");
    }
  }
};

const esprima = require('esprima');
const estraverse = require('estraverse');
const code = 'function ast(a) {}';
// 将代码转为AST
const ast = esprima.parse(code);
// 转换 AST，只会遍历 type 属性
// traverse 方法中有进入和离开两个钩子函数
estraverse.traverse(ast, {
    enter(node) {
        console.log('enter', node.type);
    },
    leave(node) {
        console.log('leave', node.type);
    }
});
// console.log(ast);

{
  type: "FunctionDeclaration",
  id: {
    type: "Identifier",
    name: "square"
  },
  params: [{
    type: "Identifier",
    name: "n"
  }],
  body: {
    type: "BlockStatement",
    body: [{
      type: "ReturnStatement",
      argument: {
        type: "BinaryExpression",
        operator: "*",
        left: {
          type: "Identifier",
          name: "n"
        },
        right: {
          type: "Identifier",
          name: "n"
        }
      }
    }]
  }
}

// .babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

const babel = require('@babel/core')
const code = `const fn = (a, b) => a + b`
// babel 有 transform 方法会帮我们自动遍历，使用相应的预设或者插件转换相应的代码
const r = babel.transform(code, {
  presets: ['@babel/preset-env'],
})
console.log(r.code)
// 打印结果如下
// "use strict";
// var fn = function fn() { return a + b; };

const r = babel.transform(code, {
  plugins: ['@babel/plugin-transform-arrow-functions'],
})
console.log(r.code)
// 打印结果如下
// const fn = function () { return a + b; };

// 源代码为：
const fn = (a, b) => a + b
// 转换后的结果如下：
var fn = function fn(a, b) {
  return a + b;
};

visitor: {
    Identifier(path, state) { // 当节点类型为identifier时，就会执行该方法
        console.log('Called!');
    }
}

── 属性
  - node   当前节点
  - parent  父节点
  - parentPath 父path
  - scope   作用域
  - context  上下文
  - ...
── 方法
  - get   当前节点
  - findParent  向父节点搜寻节点
  - getSibling 获取兄弟节点
  - replaceWith  用AST节点替换该节点
  - replaceWithMultiple 用多个AST节点替换该节点
  - insertBefore  在节点前插入节点
  - insertAfter 在节点后插入节点
  - remove   删除节点
  - ...

visitor: {
  ArrowFunctionExpression: (path, state) => {}
}

t.functionExpression(id, params, body, generator, async)

visitor: {
  VariableDeclaration: (path, state) => {}
}

visitor: {
  VariableDeclaration: (path, state) => {
      const {node} = path;
      if (node.kind === 'const' || node.kind === 'let') {
          node.kind = 'var'; // 方式1：直接替换
      }
  }
}

visitor: {
  VariableDeclaration: (path, state) => {
      const {node} = path;
      if (node.kind === 'const' || node.kind === 'let') {
          // 基于@babel/types的VariableDeclaration方法构造一个variableDeclaration节点
          const variableDeclaration = type.VariableDeclaration('var', node.declarations)
          // replaceWith为替换节点的方法
          path.replaceWith(variableDeclaration);
      }
  }
}

const babel = require('@babel/core');
const type = require('@babel/types');

const transformArrowFunction = {
    // 该visitor包含两个节点监听方法VariableDeclaration和ArrowFunctionExpression
    visitor: {
        // 将const和let转换为var
        // 每个节点都有一个type字段，type值为VariableDeclaration会被匹配成功
        VariableDeclaration: (path, state) => {
            const {node} = path;
            if (node.kind === 'const' || node.kind === 'let') {
                // node.kind = 'var'; // 方式1：直接替换
                // 方式2：采用replaceWith
                // 基于@babel/types的VariableDeclaration方法构造一个variableDeclaration节点
                const variableDeclaration = type.VariableDeclaration('var', node.declarations)
                // replaceWith为替换节点的方法
                path.replaceWith(variableDeclaration);
            }
        },
        // Visitor中的每个函数接收2个参数：path和state
        // path是表示两个节点之间连接的对象
        ArrowFunctionExpression: (path, state) => {
            // console.log(path);
            // node就是ArrowFunctionExpression匹配到的当前节点
            // parent是当前节点的父节点
            const {node, parent} = path;
            const id = parent.id;
            const params = node.params; // 获取参数
            // 判断是不是 blockStatement，不是的话让他变成 blockStatement
            if (!t.isBlockStatement(node.body)) {
                // 将BinaryExpression转换为BlockStatement
                const body = type.blockStatement([
                    // node.body原来是a+b，即BinaryExpression
                    type.returnStatement(node.body)
                ]);
            }
            // 生成对应的functionExpression
            const functionExpression = type.functionExpression(id, params, body, false, false);
            // 节点替换，将匹配到的ArrowFunctionExpression替换为新生成的FunctionExpression
            path.replaceWith(functionExpression);
        }
    }
};

const code = 'const fn = (a, b) => a + b';
const result = babel.transform(code, {
    plugins: [
        transformArrowFunction
    ]
});

console.log(result.code);

const babel = require('@babel/core');
const type = require('@babel/types');
const code = 'const num = 2 * 3 * 4 * 5';

const preCalculatePlugin = {
    visitor: {
        BinaryExpression: (path, state) => {
            const node = path.node;
            const {left, right, operator} = node;
            if (!isNaN(left.value) && !isNaN(right.value)) {
                let result = eval(left.value + operator + right.value);
                result = type.numericLiteral(result);
                path.replaceWith(result);
                // 如果当前节点的父节点也是表达式的话，需要递归计算
                if (path.parentPath.node.type === 'BinaryExpression') {
                    preCalculatePlugin.visitor.BinaryExpression.call(null, path.parentPath);
                }
            }
        }
    }
}

const res = babel.transform(code, {
    plugins: [preCalculatePlugin]
});

console.log(res.code); // const num = 120;

// 判断是否是默认导入
types.isImportDefaultSpecifier(specifiers[0]))

const types = require('@babel/types');

const visitor = {
    // 这里的ref是ImportDeclaration的第二个参数，值是.babelrc中的{"library": "lodash"}
    ImportDeclaration(path, ref = {opts: {}}) {
        const {opts} = ref;
        const node = path.node; // 拿到当前节点
        const specifiers = node.specifiers;
        // isImportDefaultSpecifier判断是否是默认导入，是的话不做处理
        if (opts.library === node.source.value && !types.isImportDefaultSpecifier(specifiers[0])) {
            const newImportSpecifiers = specifiers.map(specifier => (
                    types.importDeclaration([types.ImportDefaultSpecifier(specifier.local)],
                    types.stringLiteral(`${node.source.value}/${specifier.local.name}`
                ))
            ));
            path.replaceWithMultiple(newImportSpecifiers);
        }
    }
}

module.exports = () => {
    return {visitor};
}

// .babelrc配置：
{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "dynamic-import",
            {
                "library": "lodash" // 引用哪个库的时候使用我们写的这个插件
            }
        ]
    ]
}

yarn run v1.16.0
$ webpack --mode development
Hash: 8e4da5b2edbe6c47dd1c
Version: webpack 4.41.2
Time: 325ms
Built at: 2019-11-13 19:45:03
    Asset     Size  Chunks             Chunk Names
bundle.js  552 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/index.js] 37 bytes {main} [built]
    + 1 hidden module
✨  Done in 1.53s.

yarn run v1.16.0
$ webpack --mode development
Hash: 58ece130df8aef56b95d
Version: webpack 4.41.2
Time: 105ms
Built at: 2019-11-13 19:46:28
    Asset      Size  Chunks             Chunk Names
bundle.js  20.9 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/index.js] 110 bytes {main} [built]
    + 15 hidden modules
✨  Done in 0.67s.

// 这里手动指定环境变量为development，在命令行执行如下命令：
NODE_ENV=development npx babel index.js
// 转换结果如下：
if ("development" === 'development') {
  console.log('开发环境');
}

babylon.parse(code, {
  sourceType: "module", // default: "script"
  plugins: ["jsx"] // default: []
});