babel原理

babel原理

• ES6 -> ES5

• Babel主要工作是对代码进行转译

• 三个阶段

  • 解析(Parse): 将代码解析生成抽象语法🌲AST(词法分析+语法分析)
  • 转换(Transform): 对语法树进行变换方面的一系列操作。通过babel-traverse, 进行遍历并作添加、更新、删除等操作
  • 生成(Generate), 通过babel-generator将变换后的AST转换为JS代码

如何写一个babel插件

npm i babel-types babel-core --save-dev

index.js

const t = require("babel-types");

const visitor = {
  BinaryExpression(path) {
    const node = path.node;

    let result;

    if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {
      switch (node.operator) {
        case "+":
          result = node.left.value + node.right.value;
          break;
        case "-":
          result = node.left.value - node.right.value;
          break;
        case "*":
          result = node.left.value * node.right.value;
          break;
        case "/":
          result = node.left.value / node.right.value;
          break;
        default:
          break;
      }
    }

    if (result !== undefined) {
      path.replaceWith(t.numericLiteral(result));

      let parentPath = path.parentPath;
      parentPath && visitor.BinaryExpression.call(this, parentPath);
    }
  },
};

module.exports = function (babel) {
  return {
    visitor,
  };
};

test-babel.js

const babel = require("babel-core");

const result = babel.transform("const result = 1 + 2", {
  plugins: [require("./babel.js")],
});

console.log(result.code);