Babylon-AST初探-實(shí)戰(zhàn)

godiscoder 發(fā)布于2019-08-26 11:56 / 840人閱讀

摘要：生成屬性這一步，我們要先提取原函數(shù)中的的對(duì)象。所以這里我們還是主要使用來訪問節(jié)點(diǎn)獲取第一級(jí)的，也就是函數(shù)體將合并的寫法用生成生成生成插入到原函數(shù)下方刪除原函數(shù)程序輸出將中的屬性提升一級(jí)這里遍歷中的屬性沒有再采用，因?yàn)檫@里結(jié)構(gòu)是固定的。

??經(jīng)過之前的三篇文章介紹，AST的CRUD都已經(jīng)完成。下面主要通過vue轉(zhuǎn)小程序過程中需要用到的部分關(guān)鍵技術(shù)來實(shí)戰(zhàn)。

下面的例子的核心代碼依然是最簡(jiǎn)單的一個(gè)vue示例

const babylon = require("babylon")
const t = require("@babel/types")
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default

const code = `
export default {
  data() {
    return {
      message: "hello vue",
      count: 0
    }
  },
  methods: {
    add() {
      ++this.count
    },
    minus() {
      --this.count
    }
  }
}
`

const ast = babylon.parse(code, {
  sourceType: "module",
  plugins: ["flow"]
})

??經(jīng)過本文中的一些操作，我們將獲得最終的小程序代碼如下：

Page({
  data: (() => {
      return {
        message: "hello vue",
        count: 0
      }
  })(),
  add() {
    ++this.data.count
    this.setData({
      count: this.data.count
    })
  },
  minus() {
    --this.data.count
    this.setData({
      count: this.data.count
    })
  }
})

??注意:，跟我們之前介紹的一致，為了完成上述轉(zhuǎn)換，要把輸入和輸出均放入AST explorer，查看其先后的結(jié)構(gòu)對(duì)比。

vue代碼轉(zhuǎn)小程序

??對(duì)比文章一開始展示的兩份代碼，為了實(shí)現(xiàn)轉(zhuǎn)換，我們需要以下步驟：

將data函數(shù)轉(zhuǎn)data屬性，然后刪除data函數(shù)

將methods里的屬性提取出來，放到和data同一層級(jí)中，methods也要?jiǎng)h除

將所有的this.[data member]轉(zhuǎn)換為this.data.[data member]。注意這里只轉(zhuǎn)data中的屬性

在變更this.data的下面，插入this.setData來觸發(fā)數(shù)據(jù)變更

??下面將按照這一步驟，一步一步完成轉(zhuǎn)換，我覺得看到每一步的代碼變化還是很有成就感滴。

生成data屬性

??這一步，我們要先提取原data函數(shù)中的return的對(duì)象。結(jié)合AST explorer，可以很方便的找到這一路徑。

const dataObject = ast.program.body[0].declaration.properties[0].body.body[0].argument
console.log(dataObject)

??可是這段代碼的可讀性和魯棒性基本是0啊。它強(qiáng)依賴我們書寫的data函數(shù)是第一個(gè)屬性。所以這里我們還是主要使用traverse來訪問節(jié)點(diǎn)：

traverse(ast, {
  ObjectMethod(path) {
    if (path.node.key.name === "data") {
      // 獲取第一級(jí)的 BlockStatement，也就是data函數(shù)體
      let blockStatement = null
      path.traverse({  //將traverse合并的寫法
        BlockStatement(p) {
          blockStatement = p.node
        }
      })

      // 用blockStatement生成ArrowFunctionExpression
      const arrowFunctionExpression = t.arrowFunctionExpression([], blockStatement)
      // 生成CallExpression
      const callExpression = t.callExpression(arrowFunctionExpression, [])
      // 生成data property
      const dataProperty = t.objectProperty(t.identifier("data"), callExpression)
      // 插入到原data函數(shù)下方
      path.insertAfter(dataProperty)

      // 刪除原data函數(shù)
      path.remove()
      // console.log(arrowFunctionExpression)
    }
  }
})

console.log(generate(ast, {}, code).code)

程序輸出：

export default {
  data: (() => {
    return {
      message: "hello vue",
      count: 0
    };
  })(),
  methods: {
    add() {
      ++this.count;
    },

    minus() {
      --this.count;
    }

  }
};

將methods中的屬性提升一級(jí)

??這里遍歷methods中的屬性沒有再采用traverse，因?yàn)檫@里結(jié)構(gòu)是固定的。

traverse(ast, {
  ObjectProperty(path) {
    if (path.node.key.name === "methods") {
      // 遍歷屬性并插入到原methods之后
      path.node.value.properties.forEach(property => {
        path.insertAfter(property)
      })
      // 刪除原methods
      path.remove()
    }
  }
})

程序輸出：

export default {
  data: (() => {
    return {
      message: "hello vue",
      count: 0
    };
  })(),

  minus() {
    --this.count;
  },

  add() {
    ++this.count;
  }

};

this.member轉(zhuǎn)為this.data.member

??這一步，首先要從data屬性中提取數(shù)據(jù)屬性。這個(gè)有些依賴data中的函數(shù)到底寫成怎么樣，如果寫成：

  data: (() => {
    const obj = {}
    obj.message = "hello vue"
    obj.count = 0
    return obj
  })(),

??這將不符合我們這里的轉(zhuǎn)化方法。當(dāng)然我們可以通過求值來獲取最終的對(duì)象，但這里也有缺陷。另一個(gè)思路是遍歷其他成員函數(shù)，使用排除法。

??總之，我們需要一個(gè)方法來獲取this.data中的屬性。本文將繼續(xù)以代碼中的例子，通過data中的return方法來獲取。

// 獲取`this.data`中的屬性
const datas = []
traverse(ast, {
  ObjectProperty(path) {
    if (path.node.key.name === "data") {
      path.traverse({
        ReturnStatement(path) {
          path.traverse({
            ObjectProperty(path) {
              datas.push(path.node.key.name)
              path.skip()
            }
          })
          path.skip()
        }
      })
    }
    path.skip()
  }
})
console.log(datas)

程序輸出：

[ "message", "count" ]

??修改數(shù)據(jù)屬性至this.data.

traverse(ast, {
  MemberExpression(path) {
    if (path.node.object.type === "ThisExpression" && datas.includes(path.node.property.name)) {
      path.get("object").replaceWithSourceString("this.data")
    }
  }
})

至此程序輸出：

export default {
  data: (() => {
    return {
      message: "hello vue",
      count: 0
    };
  })(),

  minus() {
    --this.data.count;
  },

  add() {
    ++this.data.count;
  }

};

添加this.setData方法

??要想在變更this.data的下面，插入this.setData，我們首先要找到它插入的位置，即this.data的父節(jié)點(diǎn)，所以這就是我們的第一步操作：(MemberExpression就是上一步的，因?yàn)檫@一步的path與上一步相同)

traverse(ast, {
  MemberExpression(path) {
    if (path.node.object.type === "ThisExpression" && datas.includes(path.node.property.name)) {
      path.get("object").replaceWithSourceString("this.data")
    }
  }
  const expressionStatement = path.findParent((parent) =>   
    parent.isExpressionStatement()
  )
})

??找到插入的位置后，我們就要構(gòu)造要插入的函數(shù)，這時(shí)就用到了我們?cè)谶@個(gè)系列第一篇文章中介紹的(Create)[https://summerrouxin.github.i...]操作，忘記的可以去復(fù)習(xí)下哦，下面我們直接上代碼，大家看這段代碼一定要對(duì)照AST explorerh和babel-types的API，然后找到從外向內(nèi)一層一層的對(duì)照。這段代碼的邏輯大概如下：

找到要插入的代碼的位置，首先要判斷是不是賦值操作，如果是的話找到this.member的父結(jié)點(diǎn)

新建要插入的結(jié)點(diǎn)

插入節(jié)點(diǎn)

traverse(ast, {
  MemberExpression(path) {
    if (path.node.object.type === "ThisExpression" && datas.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)
      ) {
          // findParent
          const expressionStatement = path.findParent((parent) =>   
            parent.isExpressionStatement()
          )
          // create
          if(expressionStatement) {
            const finalExpStatement =
              t.expressionStatement(
                t.callExpression(
                  t.memberExpression(t.thisExpression(), t.identifier("setData")),
                  [t.objectExpression([t.objectProperty(
                    t.identifier(propertyName), t.identifier(`this.data.${propertyName}`)
                  )])]
                )
              )
            expressionStatement.insertAfter(finalExpStatement)
          }  
      }
    }
  }
})

程序輸出：

export default {
  data: (() => {
    return {
      message: "hello vue",
      count: 0
    };
  })(),

  minus() {
    --this.count;
    this.setData({
      count: this.data.count
    })
  },

  add() {
    ++this.count;
    this.setData({
      count: this.data.count
    })
  }

};

??以上就是我們實(shí)戰(zhàn)介紹，這邊只涉及到vue轉(zhuǎn)小程序的部分代碼，以后可以考慮繼續(xù)介紹其他模塊。