VUE 组件转换为微信小程序组件的方法

traverse(ast, {
enter(path) {},
ObjectProperty(path) {},
ObjectMethod(path) {},
//......
ExportDefaultDeclaration(path) {
//...
}
})

如果你想在 AST 开始处与结尾处插入，可使用 path 操作：

path.insertBefore(
 t.expressionStatement(t.stringLiteral("start.."))
);
path.insertAfter(
 t.expressionStatement(t.stringLiteral("end.."))
);

注：关于微信小程序不支持 computed , 与 watch，我们具体的初期采用的方案是挂载 computed 和 watch 方法到每一个微信小程序组件，让小程序组件也支持这两个功能。

六，VUE 组件转换为微信小程序组件中 的 Data 部分的处理：

关于 Data 部分的处理实际上就是：函数表达式转换为对象表达式 （FunctionExpression 转换为 ObjectExpression）

转换之前的 JavaScript 代码

export default {
  data(){//函数表达式
   return {
    num: 10000,
    arr: [1, 2, 3],
    obj: {
     d1: "val1",
     d2: "val2"
    }
   }
  }
}

处理后我们得到的

export default {
 data: {//对象表达式
  num: 10000,
  arr: [1, 2, 3],
  obj: {
   d1: "val1",
   d2: "val2"
  }
 }
};

通过如上的代码对比，我们看到了我们的转换前后代码的变化：

转换前后 AST 树对比图明确转换目标：

我们对 JavaScript 动了什么手脚(亦可封装成babel插件):

const ast = babylon.parse(code, {
 sourceType: "module",
 plugins: ["flow"]});
//AST 转换node、nodetype很关键
traverse(ast, {
 enter(path) {
  //打印出node.type
  console.log("enter: " + path.node.type);
 }
})

我们的转换部分都尽量在一个 Traverse 中处理，减少 AST 树遍历的性能消耗

//Data 函数表达式 转换为 Object
ObjectMethod(path) {
 // console.log("path.node ",path.node )// data, add, textFn
 if (path.node.key.name === "data") {
  // 获取第一级的 BlockStatement，也就是 Data 函数体
  path.traverse({
   BlockStatement(p) {
    //从 Data 中提取数据属性
    datas = p.node.body[0].argument.properties;
   }
  });
  //创建对象表达式
  const objectExpression = t.objectExpression(datas);
  //创建 Data 对象并赋值
  const dataProperty = t.objectProperty(
   t.identifier("data"),
   objectExpression
  );
  //插入到原 Data 函数下方
  path.insertAfter(dataProperty);
  //删除原 Data 函数节点
  path.remove();
 }
}