為什么需要 wepy 轉 VUE

“轉轉二手”是我司用 wepy 開發(fā)的功能與 APP 相似度非常高的小程序，實現(xiàn)了大量的功能性頁面，而新業(yè)務 H5 項目在開發(fā)過程中有時也經(jīng)常需要一些公共頁面和功能，但新項目又有自己的獨特點，這些頁面需求重新開發(fā)成本很高，但如果把小程序代碼轉換成 VUE 就會容易的多，因此需要這樣一個轉換工具。

本文將通過實戰(zhàn)帶你體驗 HTML、css、JavaScript 的 AST 解析和轉換過程

如果你看完覺得有用，請點個贊~

AST 概覽

AST 全稱是叫抽象語法樹，網(wǎng)絡上有很多對 AST 的概念闡述和 demo，其實可以跟 XML 類比，目前很多流行的語言都可以通過 AST 解析成一顆語法樹，也可以認為是一個 JSON，這些語言包括且不限于：CSS、HTML、JavaScript、PHP、Java、SQL 等，舉一個簡單的例子:

這句簡單的 JavaScript 代碼通過 AST 將被解析成一顆“有點復雜”的語法樹：

這句話從語法層面分析是一次變量聲明和賦值，所以父節(jié)點是一個 type 為 VariableDeclaration（變量聲明）的類型節(jié)點，聲明的內(nèi)容又包括兩部分，標識符：a 和 初始值：1

這就是一個簡單的 AST 轉換，你可以通過 astexplorer(https:///)可視化的測試更多代碼。

AST 有什么用

AST 可以將代碼轉換成 JSON 語法樹，基于語法樹可以進行代碼轉換、替換等很多操作，其實 AST 應用非常廣泛，我們開發(fā)當中使用的 less/sass、eslint、TypeScript 等很多插件都是基于 AST 實現(xiàn)的。

本文的需求如果用文本替換的方式也可能可以實現(xiàn)，不過需要用到大量正則，且出錯風險很高，如果用 AST 就能輕松完成這件事。

AST 原理

AST 處理代碼一版分為以下兩個步驟：

詞法分析

詞法分析會把你的代碼進行大拆分，會根據(jù)你寫的每一個字符進行拆分（會舍去注釋、空白符等無用內(nèi)容），然后把有效代碼拆分成一個個 token。

語法分析

接下來 AST 會根據(jù)特定的“規(guī)則”把這些 token 加以處理和包裝，這些規(guī)則每個解析器都不同，但做的事情大體相同，包括：

• 把每個 token 對應到解析器內(nèi)置的語法規(guī)則中，比如上文提到的 var a = 1；這段代碼將被解析成 VariableDeclaration 類型。

• 根據(jù)代碼本身的語法結構，將 tokens 組裝成樹狀結構。

各種 AST 解析器

每種語言都有很多解析器，使用方式和生成的結果各不相同，開發(fā)者可以根據(jù)需要選擇合適的解析器。

JavaScript

• 最知名的當屬 babylon，因為他是 babel 的御用解析器，一般 JavaScript 的 AST 這個庫比較常用

• acron:babylon 就是從這個庫 fork 來的

HTML

• htmlparser2：比較常用

• parse5：不太好用，還需要配合 jsdom 這個類庫

CSS

• cssom、csstree 等

• less/sass

XML

• XmlParser

wepy 轉 VUE 工具

接下來我們開始實戰(zhàn)了，這個需求我們用到的技術有：

• node

• commander：用來寫命令行相關命令調(diào)用

• fs-extra：fs 類庫的升級版，主要提高了 node 文件操作的便利性，并且提供了 Promise 封裝

• XmlParser：解析 XML

• htmlparser2：解析 HTML

• less：解析 css（我們所有項目統(tǒng)一都是 less，所以直接解析 less 就可以了）

• babylon：解析 JavaScript

• @babel/types：js 的類型庫，用于查找、校驗、生成相應的代碼樹節(jié)點

• @babel/traverse：方便對 JavaScript 的語法樹進行各種形式的遍歷

• @babel/template：將你處理好的語法樹打印到一個固定模板里

• @babel/generator：生成處理好的 JavaScript 文本內(nèi)容

轉換目標

我們先看一段簡單的 wepy 和 VUE 的代碼對比：

//wepy版
<template>
  <view class='userCard'>
    <view class='basic'>
      <view class='avatar'>
        <image src='{{info.portrait}}'></image>
      </view>
      <view class='info'>
        <view class='name'>{{info.nickName}}</view>
        <view class='label' wx:if='{{info.label}}'>
          <view class='label-text' wx:for='{{info.label}}'>{{item}}</view>
        </view>
        <view class='onsale'>在售寶貝{{sellingCount}}</view>
        <view class='follow ' @tap='follow'>{{isFollow ? '取消關注' : '關注'}}</view>
      </view>
    </view>
  </view>
</template>
<style lang='less' rel='stylesheet/less' scoped>
.userCard {
  position:relative;
  background: #FFFFFF;
  box-shadow: 0 0 10rpx 0 rgba(162,167,182,0.31);
  border-radius: 3rpx;
  padding:20rpx;
  position: relative;
}
/* css太多了，省略其他內(nèi)容 */
</style>
<script>
import wepy from 'wepy'
export default class UserCard extends wepy.component {
  props = {
    info:{
      type:Object,
      default:{}
    }
  }
  data = {
    isFollow: false,
  }
  methods = {
    async follow() {
      await someHttpRequest()  //請求某個接口
      this.isFollow = !this.isFollow
      this.$apply()
    }
  }
  computed = {
    sellingCount(){
      return this.info.sellingCount || 1
    }
  }
  onLoad(){
    this.$log('view')
  }
}
</script>

轉換代碼實現(xiàn)

我們先寫個讀取文件的入口方法

const cwdPath = process.cwd()
const fse = require('fs-extra')

const convert = async function(filepath){
  let fileText = await fse.readFile(filepath, 'utf-8');
  fileHandle(fileText.toString(),filepath)
}
const fileHandle = async function(fileText,filepath){
  //dosth...
}
convert(`${cwdPath}/demo.wpy`)

在 fileHandle 函數(shù)中，我們可以得到代碼的文本內(nèi)容，首先我們將對其進行 XML 解析，把 template、css、JavaScript 拆分成三部分。 有同學可能問為什么不直接正則匹配出來，因為開發(fā)者的代碼可能有很多風格，比如有兩部分 style，可能有很多意外情況是使用正則考慮不到的，這也是使用 AST 的意義。

不同節(jié)點的處理邏輯，定義在一個叫做 typesHandler 的對象里面存放，接下來我們看下不同類型代碼片段的處理邏輯

因篇幅有限，本文只列舉一部分代碼轉換的目標，實際上要比這些更復雜

接下來我們對代碼進行轉換：

模板處理

轉換目標

• 模板標簽轉換：把 view 轉換成 div，把 image 標簽轉換成 img

• 模板邏輯判斷：wx:if='{{info.label}}' 轉換成 v-if='info.label'

• 模板循環(huán)：wx:for='{{info.label}}' 轉換成 v-for='(item,key) in info.label'

• 事件綁定：@tap='follow' 轉換成 @click='follow'

核心流程

• 首先把拿到的目標文本解析成語法樹，然后進行各項轉換，最后把語法樹轉換成文本寫入到文件

let templateContent = v.childNodes.toString(),
//初始化一個解析器
templateParser = new TemplateParser()

//生成語法樹
templateParser.parse(templateContent).then((templateAst)=>{
  //進行上述目標的轉換
  let convertedTemplate = templateConverter(templateAst)
  //把語法樹轉成文本
  templateConvertedString = templateParser.astToString(convertedTemplate)

  templateConvertedString = `<template>\r\n${templateConvertedString}\r\n</template>\r\n`
  fs.writeFile(targetFilePath,templateConvertedString, ()=>{
    resolve()
  });
}).catch((e)=>{
  reject(e)
})

• TemplateParser 是我封裝的一個簡單的模板 AST 處理類庫，（因為使用了 htmlparser2 類庫，該類庫的調(diào)用方式有點麻煩），我們看下代碼：

• 3、接下來我們看下具體替換過程：

//html標簽替換規(guī)則，可以添加更多
const tagConverterConfig = {
  'view':'div',
  'image':'img'
}
//屬性替換規(guī)則，也可以加入更多
const attrConverterConfig = {
  'wx:for':{
    key:'v-for',
    value:(str)=>{
      return str.replace(/{{(.*)}}/,'(item,key) in $1')
    }
  },
  'wx:if':{
    key:'v-if',
    value:(str)=>{
      return str.replace(/{{(.*)}}/,'$1')
    }
  },
  '@tap':{
    key:'@click'
  },
}
//替換入口方法
const templateConverter = function(ast){
  for(let i = 0;i<ast.length;i++){
    let node = ast[i]
    //檢測到是html節(jié)點
    if(node.type === 'tag'){
      //進行標簽替換
      if(tagConverterConfig[node.name]){
        node.name = tagConverterConfig[node.name]
      }
      //進行屬性替換
      let attrs = {}
      for(let k in node.attribs){
        let target = attrConverterConfig[k]
        if(target){
          //分別替換屬性名和屬性值
          attrs[target['key']] = target['value'] ? target['value'](node.attribs[k]) : node.attribs[k]
        }else {
          attrs[k] = node.attribs[k]
        }
      }
      node.attribs = attrs
    }
    //因為是樹狀結構，所以需要進行遞歸
    if(node.children){
      templateConverter(node.children)
    }
  }
  return ast
}

css 處理

轉換目標

• 將 image 替換為 img

• 將單位 rpx 轉換成 *@px

核心過程

• 1、我們要先對拿到的 css 文本代碼進行反轉義處理，因為在解析 xml 過程中，css 中的特殊符號已經(jīng)被轉義了，這個處理邏輯很簡單，只是字符串替換邏輯，因此封裝在 utils 工具方法里，本文不贅述。

• 2、根據(jù)節(jié)點屬性中的 type 來判斷是 less 還是普通 css

if(v.attributes){
  //檢測css是哪種類型
  for(let i in v.attributes){
    let attr = v.attributes[i]
    if(attr.name === 'lang'){
      type = attr.value
    }
  }
}

• 3、less 內(nèi)容的處理：使用 less.render()方法可以將 less 轉換成 css；如果是 css，直接對 styleText 進行處理就可以了

• 4、將 image 選擇器換成 img，這里也需要替換更多標簽，比如 text、icon、scroll-view 等，篇幅原因不贅述

const CSSOM = require('cssom')  //css的AST解析器
const replaceTagClassName = function(replacedStyleText){
  const replaceConfig = {}
  //匹配標簽選擇器
  const tagReg = /[^\.|#|\-|_](\b\w+\b)/g
  //將css文本轉換為語法樹
  const ast = CSSOM.parse(replacedStyleText),
              styleRules = ast.cssRules

  if(styleRules && styleRules.length){
    //找到包含tag的className
    styleRules.forEach(function(item){
    //可能會有 view image {...}這多級選擇器
    let tags = item.selectorText.match(tagReg)
      if(tags && tags.length){
        let newName = ''
        tags = tags.map((tag)=>{
          tag = tag.trim()
            if(tag === 'image')tag = 'img'
              return tag
            })
        item.selectorText = tags.join(' ')
      }
    })
    //使用toString方法可以把語法樹轉換為字符串
    replacedStyleText = ast.toString()
  }
  return {replacedStyleText,replaceConfig}
}

• 5、將 rpx 替換為*@px

• 6、將轉換好的代碼寫入文件

replacedStyleText = `<style scoped>\r\n${replacedStyleText}\r\n</style>\r\n`

fs.writeFile(targetFilePath,replacedStyleText,{
  flag: 'a'
},()=>{
  resolve()
});

JavaScript 轉換

轉換目標

• 去除 wepy 引用

• 轉換成 vue 的對象寫法

• 去除無用代碼:this.\$apply()

• 生命周期對應

核心過程

在了解如何轉換之前，我們先簡單了解下 JavaScript 轉換的基本流程：

借用其他作者一張圖片，可以看出轉換過程分為解析->轉換->生成 這三個步驟。

具體如下：

• 1、先把 xml 節(jié)點通過 toString 轉換成文本

• 2、再進行反轉義（否則會報錯的哦）

let javascriptContent = utils.deEscape(v.childNodes.toString())

• 3、接下來初始化一個解析器

這個解析器里封裝了什么呢，看代碼：

const Parser = require('./Parser')  //基類
const babylon = require('babylon')  //AST解析器
const generate = require('@babel/generator').default
const traverse = require('@babel/traverse').default

class JavascriptParser extends Parser {
  constructor(){
    super()
  }
  /**
   * 解析前替換掉無用字符
   * @param code
   * @returns
   */
  beforeParse(code){
    return code.replace(/this\.\$apply\(\);?/gm,'').replace(/import\s+wepy\s+from\s+['']wepy['']/gm,'')
  }
  /**
   * 文本內(nèi)容解析成AST
   * @param scriptText
   * @returns {Promise}
   */
  parse(scriptText){
    return new Promise((resolve,reject)=>{
      try {
        const scriptParsed = babylon.parse(scriptText,{
          sourceType:'module',
          plugins: [
            // 'estree', //這個插件會導致解析的結果發(fā)生變化，因此去除，這本來是acron的插件
            'jsx',
            'flow',
            'doExpressions',
            'objectRestSpread',
            'exportExtensions',
            'classProperties',
            'decorators',
            'objectRestSpread',
            'asyncGenerators',
            'functionBind',
            'functionSent',
            'throwExpressions',
            'templateInvalidEscapes'
          ]
        })
        resolve(scriptParsed)
      }catch (e){
        reject(e)
      }
    })
  }

  /**
   * AST樹遍歷方法
   * @param astObject
   * @returns {*}
   */
  traverse(astObject){
    return traverse(astObject)
  }

  /**
   * 模板或AST對象轉文本方法
   * @param astObject
   * @param code
   * @returns {*}
   */
  generate(astObject,code){
    const newScript = generate(astObject, {}, code)
    return newScript
  }
}
module.exports = JavascriptParser

值得注意的是：babylon 的 plugins 配置有很多，如何配置取決于你的代碼里面使用了哪些高級語法，具體可以參見文檔或者根據(jù)報錯提示處理

• 4、在解析之前可以先通過 beforeParse 方法去除掉一些無用代碼（這些代碼通常比較固定，直接通過字符串替換掉更方便）

• 5、再把文本解析成 AST

javascriptParser.parse(javascriptContent)

• 6、通過 AST 遍歷整個樹，進行各種代碼轉換

componentConverter 是轉換的方法封裝，轉換過程略復雜，我們先了解幾個概念。

假如我們拿到了 AST 對象，我們需要先對他進行遍歷，如何遍歷呢，這樣一個復雜的 JSON 結構如果我們用循環(huán)或者遞歸的方式去遍歷，那無疑會非常復雜，所以我們就借助了 babel 里的traverse這個工具，文檔：babel-traverse(https:///docs/en/babel-traverse)。

• traverse 接受兩個參數(shù)：AST 對象和 vistor 對象

• vistor 就是配置遍歷方式的對象

• 主要有兩種：

• 樹狀遍歷：主要通過在節(jié)點的進入時機 enter 和離開 exit 時機進行遍歷處理，進入節(jié)點之后再判斷是什么類型的節(jié)點做對應的處理

const componentVistor = {
  enter(path) {
    if (path.isIdentifier({ name: 'n' })) {
      path.node.name = 'x';
    }
  },
  exit(path){
    //do sth
  }
}

• 按類型遍歷：traverse 幫你找到對應類型的所有節(jié)點

本文代碼主要使用了樹狀遍歷的方式，代碼如下：

const componentVistor = {
  enter(path) {
    //判斷如果是類屬性
    if (t.isClassProperty(path)) {
      //根據(jù)不同類屬性進行不同處理，把wepy的類屬性寫法提取出來，放到VUE模板中
      switch (path.node.key.name){
        case 'props':
          vistors.props.handle(path.node.value)
          break;
        case 'data':
          vistors.data.handle(path.node.value)
          break;
        case 'events':
          vistors.events.handle(path.node.value)
          break;
        case 'computed':
          vistors.computed.handle(path.node.value)
          break;
        case 'components':
          vistors.components.handle(path.node.value)
          break;
        case 'watch':
          vistors.watch.handle(path.node.value)
          break;
        case 'methods':
          vistors.methods.handle(path.node.value)
          break;
        default:
          console.info(path.node.key.name)
          break;
      }
    }
    //判斷如果是類方法
    if(t.isClassMethod(path)){
      if(vistors.lifeCycle.is(path)){
        vistors.lifeCycle.handle(path.node)
      }else {
        vistors.methods.handle(path.node)
      }
    }
  }
}

本文的各種 vistor 主要做一個事，把各種類屬性和方法收集起來，基類代碼：

這里還需要補充講下@babel/types這個類庫，它主要是提供了 JavaScript 的 AST 中各種節(jié)點類型的檢測、改造、生成方法，舉例：

//類型檢測
if(t.isClassMethod(path)){
    //如果是類方法
}
//創(chuàng)造一個對象節(jié)點
t.objectExpression(...)

通過上面的處理，我們已經(jīng)把 wepy 里面的各種類屬性和方法收集好了，接下來我們看如何生成 vue 寫法的代碼

• 7、把轉換好的 AST 樹放到預先定義好的 template 模板中

看下 componentTemplateBuilder 這個方法如何定義：

const componentTemplateBuilder = function(ast,vistors){
  const buildRequire = template(componentTemplate);
  ast = buildRequire({
    PROPS: arrayToObject(vistors.props.getData()),
    LIFECYCLE: arrayToObject(vistors.lifeCycle.getData()),
    DATA: arrayToObject(vistors.data.getData()),
    METHODS: arrayToObject(vistors.methods.getData()),
    COMPUTED: arrayToObject(vistors.computed.getData()),
    WATCH: arrayToObject(vistors.watch.getData()),
  });
  return ast
}

這里就用到了@babel/template這個類庫，主要作用是可以把你的代碼數(shù)據(jù)組裝到一個新的模板里，模板如下：

*生命周期需要進行對應關系處理，略復雜，本文不贅述

• 8、把模板轉換成文本內(nèi)容并寫入到文件中

let codeText =  `<script>\r\n${generate(convertedJavascript).code}\r\n</script>\r\n`

fs.writeFile(targetFilePath,codeText, ()=>{
  resolve()
});

這里用到了@babel/generate類庫，主要作用是把 AST 語法樹生成文本格式

上述過程的代碼實現(xiàn)總體流程

上面就是 wepy 轉 VUE 工具的核心代碼實現(xiàn)流程了

通過這個例子希望大家能了解到如何通過 AST 的方式進行精準的代碼處理或者語法轉換

如何做成命令行工具

既然我們已經(jīng)實現(xiàn)了這個轉換工具，那接下來我們希望給開發(fā)者提供一個命令行工具，主要有兩個部分：

注冊命令

• 1、在項目的 package.json 里面配置 bin 部分

{
  'name': '@zz-vc/fancy-cli',
  'bin': {
    'fancy': 'bin/fancy'
  },
  //其他配置
}

• 2、寫好代碼后，npm publish 上去

• 3、開發(fā)者安裝了你的插件后就可以在命令行以fancy xxxx的形式直接調(diào)用命令了

編寫命令調(diào)用代碼

convert 命令對應的代碼：

const cwdPath = process.cwd()
const convert = async function(filepath){
  let fileText = await fse.readFile(filepath, 'utf-8');
  fileHandle(fileText.toString(),filepath)
}

module.exports = function(fileName){
  convert(`${cwdPath}/${fileName}`)
}

fileHandle 這塊的代碼最開始已經(jīng)講過了，忘記的同學可以從頭再看一遍，你就可以整個串起來這個工具的整體實現(xiàn)邏輯了

結語

至此本文就講完了如何通過 AST 寫一個 wepy 轉 VUE 的命令行工具，希望對你有所收獲。