gogocode v1.0.55

GOGOCODE

全网最简单易上手，可读性最强的 AST 处理工具！

官网：https://gogocode.io

简介：阿里妈妈出的新工具，给批量修改项目代码减轻了痛苦

Install

    npm install gogocode

快速开始

对于下面的代码

const code = `
  const moment = require('moment');
  var a = 1;
  const b = 2;
  function log (x, y = 'World') {
    console.log('a')
    console.log(a, x, y);
  }
`;

创建一个 AST 实例

const $ = require('gogocode');
const AST = $(code);

• 小明想将 所有的 a 变量名替换为 c，只需要

$(code).replace('a', 'c')

• 小明改主意了，只想把 var a = 1 里的变量名改为 c，需要两步：

  • 取变量 a 的定义赋值，

    $(code).find('var a = 1');

  • 将 a 变量名替换为 c，并输出整体代码

    $(code)
      .find('var a = 1')
      .attr('declarations.0.id.name', 'c')
      .root()
      .generate();

这是直接操作AST的方式，有没有更简单的方法呢？有！

$(code).replace(`var a = 1`, `var c = 1`)

replace确实用起来爽，但当你在分析转换代码时遇到replace覆盖不到的场景时，请用GoGoCode提供的其他api来精准操作AST吧！

• 小明又改主意了，想把所有定义语句的 a 都改成 c，只需要将目标语句改一下写成：

$(code).replace(`var a = $_$`, `var c = $_$`)

看到这里，你应该已经理解 find和replace 的第一参有点类似‘jquery 选择器’，而这里的选择器是你需要查找的代码片段，无论想要匹配多么复杂的代码都可以匹配到，其中 $_$ 通配符可以匹配任意确定代码，代码选择器及通配符详细介绍 看这里

• 小明想试试将代码里的 var 改为 let，require 改为 import，他发现用 GoGoCode 真的可以像字符串的 replace 一样简单！

$(code)
.replace('var $_$1 = $_$2', 'let $_$1 = $_$2');
.replace('const $_$1 = require($_$2)', 'import $_$1 from $_$2')

关于如何书写选择器，以及replace详解，请见GoGoCode详细文档

API

获取节点

所有的节点获取操作都会返回一个新的AST实例，实例中可能包含多个AST节点路径，如find()、siblings()等，某些api返回的实例只会存在一个AST节点路径，如next()

AST.find(selector, options)

当selector中存在 $_$ 通配符时，返回的AST实例中存在 match 属性，也就是被 $_$ 匹配到的AST节点，按照$$紧接着的key做聚合 如：`$('const a = { key: 1, value: "gogo" }').find('const $$1 = $_$2')`

下图是是 $_$1 和 $_$2 分别匹配到的节点以及对应的输出

.parent(level)

获取某个父节点

.parents()

获取所有父节

.root()

获取根节点，对于js来说是type为'File'的节点，对于html来说是nodeType为'document'的节点 通常对AST进行操作之后需要获取root元素之后再输出

.siblings()

获取所有兄弟节点

.prev()

获取前一个节点

.prevAll()

获取当前节点之前的同级节点

.next()

获取后一个节点

.nextAll()

获取当前节点之后的同级节点

.each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

.eq(index)

获取当前链式操作中第N个AST对象

操作节点

.attr()

获取或修改AST节点的属性，入参可分三种情况：

1. 返回属性名称对应的节点或属性值

2. 修改属性名称对应的节点或属性值

3. 修改多个属性名称对应的节点或属性值

AST.attr('init', initNode)

AST.attr({ 
  init: initNode,
  'program.body.0.params.0.name': 'a'
})

AST.attr('program.body.0.params.0.name')

.has(selector, options)

判断是否有某个子节点，返回值为boolean类型 入参同.find()

.clone()

返回由当前节点深度复制的新节点

.replace(selector, replacer)

在当前节点内部用replacer替换selector匹配到的代码，返回当前节点

AST.replace(`Component`, `module.exports = Magix.View.extend`);

AST.replace(
  `export default function calculateData($_$1){$_$2}`, 
  `function calculateData($_$1){$_$2}`
)

AST.replace(
  `navigateToOutside({url: $_$})`, 
  `jm.attachUrlParams($_$)`, 
  options: { ignoreSequence: true }
)

.replaceBy(replacerAST)

用replacerAST替换当前节点，返回新节点

.after(ast)

在当前节点后面插入一个同级别的节点，返回当前节点

.before()

在当前节点前面插入一个同级别的节点，返回当前节点

.append(attr, ast)

在当前节点内部某个数组属性的末尾插入一个子节点，返回当前节点

• 为什么需要传入attr？

因为某些节点中多个属性都为数组，如函数，存在入参params和函数体body两个数组子节点，必须通过attr来判断插入节点的位置

AST
.find('function $_$() {}')
.append('params', 'b')
.prepend('body', 'b = b || 1;')

.prepend()

在当前节点内部某个数组属性的首位插入一个子节点，返回当前节点

.empty()

清空当前节点所有子节点，返回当前节点

.remove()

移除当前节点，返回根节点

.generate()

将AST对象输出为代码