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

处理后我们得到的微信小程序组件 JavaScript 部分代码

export default {
 properties: {
  //组件的对外属性
  max: {
   type: Number,
   value: 99
  }
 },
 //组件的内部数据
 data(){
  return {
   num: 10000
  }
 },
 //组件的方法
 methods: {
  textFn() {
   this.setData({
    num: 2
   });
  },
  onMyButtonTap: function () {
   this.setData({
    num: 666
   });
  }
 }
};

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

//to AST
const ast = babylon.parse(code, {
 sourceType: "module",
 plugins: ["flow"]});
//AST 转换 node，nodetype很关键
traverse(ast, {
  enter(path) {
   //打印出node.type
   console.log("enter: " + path.node.type);
  }
})
ObjectProperty(path) {
  //props 替换为 properties
  if (path.node.key.name === "props") {
   path.node.key.name = "properties";
  }
}
//修改methods中使用到数据属性的方法中。this.prop至this.data.prop等 与 this.setData的处理。
MemberExpression(path) {
 let datasVals = datas.map((item,index) =>{
  return item.key.name //拿到data属性中的第一级
 })
 if (//含有this的表达式 并且包含data属性
  path.node.object.type === "ThisExpression" &&
  datasVals.includes(path.node.property.name)
 ) {
  path.get("object").replaceWithSourceString("this.data");
  //判断是不是赋值操作
  if (
   (t.isAssignmentExpression(path.parentPath) &&
    path.parentPath.get("left") === path) ||
   t.isUpdateExpression(path.parentPath)
  ) {
   const expressionStatement = path.findParent(parent =>
    parent.isExpressionStatement()
   );
   //......
  }
 }
}

转换之前的js代码的部分 AST 树：

具体的 API 使用，童鞋们看一下 babel 相关的文档了解一下。

五， VUE 组件转换为微信小程序组件中 Export Default 到 Component 构造器的转换 与 生命周期钩子函数，事件函数的处理

首先我们看一下要转换前后的语法树与代码如下（明确转换目标）：

转换之前的 AST 树与代码

export default {// VUE 组件的惯用写法用于导出对象模块
  data(){
  },
  methods:{
  },
  props:{
  }
}

转换之后的 AST 树与代码

components({//小程序组件的构造器
  data(){
  },
  methods:{
  },
  props:{
  }
})

通过以上转换之前和转换之后代码和 AST 的对比我们明确了转换目标就是 ExportDefault 到 Component构造器的转换，下面看一下我们是如何处理的：