babel基础知识

BinaryExpression(path) {
  if (path.node.operator !== '**') return;
}

// 替换一个节点
BinaryExpression(path) {
  path.replaceWith(
    t.binaryExpression("**", path.node.left, t.numberLiteral(2))
  );
}

// 用多节点替换单节点
ReturnStatement(path) {
  path.replaceWithMultiple([
    t.expressionStatement(t.stringLiteral("Is this the real life?")),
    t.expressionStatement(t.stringLiteral("Is this just fantasy?")),
    t.expressionStatement(t.stringLiteral("(Enjoy singing the rest of the song in your head)")),
  ]);
}
// *当用多个节点替换一个表达式时，它们必须是   声明。 这是因为Babel在更换节点时广泛使用启发式算法，这意味着您可以做一些非常疯狂的转换，否则将会非常冗长*

// 用字符串源码替换节点
FunctionDeclaration(path) {
  path.replaceWithSourceString('function add(a, b) { return a + b; }');
}
// 不建议使用这个API，除非您正在处理动态的源码字符串，否则在访问者外部解析代码更有效率。

// 插入兄弟节点
FunctionDeclaration(path) {
  path.insertBefore(t.expressionStatement(t.stringLiteral("Because I'm easy come, easy go.")));
  path.insertAfter(t.expressionStatement(t.stringLiteral("A little high, little low.")));
}
// 这里同样应该使用声明或者一个声明数组。 这个使用了在用多个节点替换一个节点中提到的相同的启发式算法。

// 插入到容器（container）中
// 如果您想要在AST节点属性中插入一个像body.0那样的数组。 它与insertBefore/insertAfter 类似, 但您必须指定 listKey (通常是 正文).
ClassMethod(path) {
  path.get('body').unshiftContainer('body', t.expressionStatement(t.stringLiteral('before')));
  path.get('body').pushContainer('body', t.expressionStatement(t.stringLiteral('after')));
}

// 删除一个节点
FunctionDeclaration(path) {
  path.remove();
}

// 替换父节点
// 只需使用parentPath,调用 replaceWith即可
BinaryExpression(path) {
  path.parentPath.replaceWith(
    t.expressionStatement(t.stringLiteral("Anyway the wind blows, doesn't really matter to me, to me."))
  );
}

// 删除父节点
BinaryExpression(path) {
  path.parentPath.remove();
}

// 检查本地变量是否被绑定
FunctionDeclaration(path) {
  if (path.scope.hasBinding("n")) {
    // ...
  }
}
// 这将遍历范围树并检查特定的绑定。

// 您也可以检查一个作用域是否有自己的绑定：
FunctionDeclaration(path) {
  if (path.scope.hasOwnBinding("n")) {
    // ...
  }
}

// 创建一个 UID，这将生成一个标识符，不会与任何本地定义的变量相冲突。
FunctionDeclaration(path) {
  path.scope.generateUidIdentifier("uid");
  // Node { type: "Identifier", name: "_uid" }
  path.scope.generateUidIdentifier("uid");
  // Node { type: "Identifier", name: "_uid2" }
}

// 提升变量声明至父级作用域，有时你可能想要推送一个VariableDeclaration，这样你就可以分配给它。
FunctionDeclaration(path) {
  const id = path.scope.generateUidIdentifierBasedOnNode(path.node.id);
  path.remove();
  path.scope.parent.push({ id, init: path.node });
}
// - function square(n) {
// + var _square = function square(n) {
//     return n * n;
// - }
// + };

// 重命名绑定及其引用
FunctionDeclaration(path) {
  path.scope.rename("n", "x");
}

// 如果您想让您的用户自定义您的Babel插件的行为您可以接受用户可以指定的插件特定选项，如下所示：
{
  plugins: [
    ["my-plugin", {
      "option1": true,
      "option2": false
    }]
  ]
}

// 这些选项会通过`状态对象传递给插件访问者
export default function({ types: t }) {
  return {
    visitor: {
      FunctionDeclaration(path, state) {
        console.log(state.opts);
        // { option1: true, option2: false }
      }
    }
  }
}

// 插件可以具有在插件之前或之后运行的函数。它们可以用于设置或清理/分析目的。
export default function({ types: t }) {
  return {
    pre(state) {
      this.cache = new Map();
    },
    visitor: {
      StringLiteral(path) {
        this.cache.set(path.node.value, 1);
      }
    },
    post(state) {
      console.log(this.cache);
    }
  };
}

// 插件可以启用babel plugins，以便用户不需要安装/启用它们。 这可以防止解析错误，而不会继承语法插件。
export default function({ types: t }) {
  return {
    inherits: require("babel-plugin-syntax-jsx")
  };
}

// 如果您想用babel-code-frame和一个消息抛出一个错误：
export default function({ types: t }) {
  return {
    visitor: {
      StringLiteral(path) {
        throw path.buildCodeFrameError("Error message here");
      }
    }
  };
}

// 请注意，有时在节点上可以定制的属性比``构建器</>数组包含的属性更多。 这是为了防止生成器有太多的参数。 在这些情况下，您需要手动设置属性。 
// Example
// because the builder doesn't contain `async` as a property
var node = t.classMethod(
  "constructor",
  t.identifier("constructor"),
  params,
  body
)
// set it manually after creation
node.async = true;

function isAssignment(node) {
  return node && node.operator === opts.operator + "=";
}

function buildAssignment(left, right) {
  return t.assignmentExpression("=", left, right);
}

import pluginTester from 'babel-plugin-tester';
import identifierReversePlugin from '../identifier-reverse-plugin';

pluginTester({
  plugin: identifierReversePlugin,
  fixtures: path.join(__dirname, '__fixtures__'),
  tests: {
    'does not change code with no identifiers': '"hello";',
    'changes this code': {
      code: 'var hello = "hi";',
      output: 'var olleh = "hi";',
    },
    'using fixtures files': {
      fixture: 'changed.js',
      outputFixture: 'changed-output.js',
    },
    'using jest snapshots': {
      code: `
        function sayHi(person) {
          return 'Hello ' + person + '!'
        }
      `,
      snapshot: true,
    },
  },
});