从 wepy 到 uniapp 变形记

transformImport() {  // 获取所有import标签  const imports = this.$('import')  for (let i = 0; i < imports.length; i++) {    const node = imports.eq(i)    if (!node.is('import')) return    const importPath = node.attr('src')    // 收集引入的路径信息    this.importPath.push(importPath)    // 将文件名统一转换成短横线风格    let compName = TransformTemplate.toLine(      path.basename(importPath, path.extname(importPath))    )    let template = node.next('template')    while (template.is('template')) {      const next = template.next('template')      if (template.attr('is')) {        const children = template.children()        // 生成新的组件标签例如        // <import src="components/list.wxml" />        // <template is="subList" />                => <list is="subList" />        const comp = this.$(`<${compName} />`)        .attr(template.attr())        .append(children)        comp.attr(TransformTemplate.toLine(this.compName), comp.attr('is'))        comp.removeAttr('is')        // 将当前标签替换为新生成的组件标签        template.replaceWith(comp)      }      template = next    }    node.remove()  }}

/** * * @param value 需要转换的属性值 */private transformValue(value: string): string {  const exp = value.match(TransformTemplate.dbbraceRe)[1]  try {    let seq = false    traverse(parseSync(`(${exp})`), {      enter(path) {        // 由于WXS支持对象键值相等的缩写{{a,b,c}}，故此处需要额外处理        if (path.isSequenceExpression()) {          seq = true        }      },    })    if (!seq) {      return exp    }    return `{${exp}}`  } catch (e) {    return `{${exp}}`  }}

<script>    export default {        globalData: {             text: 'text'         }        onLaunch: function() {            console.log('App Launch，app启动')        },        onShow: function() {            console.log('App Show，app展现在前台')        },        onHide: function() {            console.log('App Hide，app不再展现在前台')        },        methods: {          // .....        }    }<script>

let APP_EVENT = ['onLaunch', 'onShow', 'onHide', 'onError', 'onPageNotFound'] //.... // 实现wepy app到uniapp App.vue的转换 t.program([   ...body.filter((node: t.Node) => !t.isExportDeclaration(node)),   // 插入appClass   ...appClass,   ...body   .filter((node: t.Node) => t.isExportDeclaration(node))   .map((node: object) => {     // 对导出的app进行处理     if (t.isExportDeclaration(node)) {       // 提前config属性       const { appEvents, methods, props } = this.clzProperty       // 重新导出vue style的对象       return t.exportDefaultDeclaration(         t.objectExpression([           // mixins           ...mixins,           // props           ...Object.keys(props)           .filter((elem) => elem !== 'config')           .map((elem) =>                this.transformClassPropertyToObjectProperty(props[elem])               ),            // app events           ...appEvents.map((elem) =>                            this.transformClassMethodToObjectMethod(elem)                           ),            // methods           t.objectProperty(             t.identifier('methods'),             t.objectExpression([               ...methods.map((elem) =>                              this.transformClassMethodToObjectMethod(elem)                             ),             ])           ),         ])       )     }     return node   }), ]) // .....

import { NodePath, traverse, types } from '@babel/core' this.clzProperty = {  props: {},  notCompatibleMethods: [],  appEvents: [],  listenEvents: []} traverse() {    ClassProperty: (path) => {        const name = path.node.key.name        this.clzPropertyprops[name] = path.node      },    ClassMethod: (path) => {      const methodName = path.node.key.name      // 判断是否存在于生命周期白名单内      const isCompEvent = TOTAL_EVENT.includes(methodName)      if (isCompEvent) {        this.clzProperty.appEvents.push(path.node)      } else {        this.clzProperty.notCompatibleMethods.push(path.node)      }    },    ObjectMethod: (path: any) => {      if (path.parentPath?.container?.key?.name === 'events') {        this.clzProperty.listenEvents.push(path.node)      }    }  }

const body = this.ast.program.bodyconst { appEvents, notCompatibleMethods, props, listenEvents } =      this.clzProperty // 处理多个 created 生命周期重叠问题const createIndexs: number[] = []const sameList = ['created', 'attached', 'onLoad', 'onReady']appEvents.forEach((node, index) => {  const name: string = node.key.name  if (sameList.includes(name)) {    createIndexs.push(index)  }}) if (createIndexs.length > 1) {  // 取出源节点内代码块  const originIndex = createIndexs[0]  const originNode = appEvents[originIndex]  const originBodyNode = originNode.body.body  // 留下的剩余节点需要取出其代码块并塞入源节点中  // 塞入完成后删除剩余节点  createIndexs.splice(0, 1)  createIndexs.forEach((index) => {    const targetNode = appEvents[index]    const targetBodyNode = targetNode.body.body    // 将源节点内代码块塞入目标节点中    originBodyNode.push(...targetBodyNode)    // 删除源节点    appEvents.splice(index, 1)  })}

buildCompVueAst() {    const body = this.ast.program.body     return t.program([      ...body.map((node) => {          return t.exportDefaultDeclaration(            t.objectExpression([              ...Object.keys(props)                .map((elem) => {                  if (elem === 'methods') {                    const node = props[elem]                    // 1.events 内函数插入 methods 中                    // 2.与生命周期平级的函数抽离出来插入 methods 中                    node.value.properties.push(                      ...listenEvents,                      ...notCompatibleMethods                    )                  }                  return props[elem]                })            ])          )        })    ])  }

// 根据 events 中的 methods 构建事件监听的调用// 并塞入 created 中forEachListenEvents(targetNode: types.ObjectMethod) {  this.clzProperty.listenEvents.forEach((item) => {    const methodsNode: any = item    // 形如 this.$on('test', ()=>{})    if (methodsNode?.key?.name) {      // 创建 this 表达式      const thisEx = t.thisExpression()      // 创建 $on 表达式      const ide = t.identifier('$eventBus.$on')      // 合并 this.$on 表达式      const om = t.memberExpression(thisEx, ide)             // 创建事件名称参数节点      const eventNameIde = t.stringLiteral(        methodsNode.key.name.toString().trim()      )             // 获取方法体内代码内容节点      const meNode = t.memberExpression(        t.thisExpression(),        t.identifier(methodsNode.key.name.toString().trim())      )      const ceNode = t.callExpression(om, [eventNameIde, meNode])      const esNode = t.expressionStatement(ceNode)      // 将合成后的代码插入到 created 中      targetNode.body.body.push(esNode)    }  }) }

transform() {  const ast = this.buildCompVueAst()  const compVue = this.genCode(ast)   return { compVue, wxs: this.buildWxs() }}

<script>  import wepy from 'wepy';  import Counter from '../components/counter';     export default class Page extends wepy.page {    config = {};    components = {counter1: Counter};         data = {};    methods = {};         events = {};    onLoad() {};    // Other properties  }</script> <template lang="wxml"><view>  </view><counter1></counter1></template> <style lang="less">  /** less **/</style>

// merge pageConfig to app configconst rawPagesJson = fs.readFileSync(path.join(dest, 'src/pages.json'))// 数据操作fs.writeFileSync(  path.join(dest, 'src', 'pages.json'),  prettJson(pagesJson))

<template name="foo">  <view class="foo-content">    <text class="text1">{{item.text1}}</text>    <image class="pic" src="{{pic.url}}" mode="aspectFill"></image>  </view></template> <template name="bar">  <view class="bar-content">    <image class="bar" src="{{pic.url}}" mode="aspectFill"></image>    <text class="text2">{{item.text2}}</text>  </view></template> <view class="footer">  this is footer</view>              <!-- index.wepy --><!-- 引入文件 --><import src="somePath/fooBar.wxml" /><!-- 确定展示的template及传入属性 --><script is="foo" data="{{item, pic}}" /> <!-- or, 此时仅会展示<template/>以外的内容即footer --><include src="somePath/fooBar.wxml">

searchVars() {    const self = this    const domList = this.$('template *')    // 获取wxml文件中template节点下的所有text节点    const text = domList.text()    const dbbraceRe = new RegExp(TransformTemplate.dbbraceRe, 'g')    let ivar    // 拿到所有被{{}}包裹的动态表达式    while ((ivar = dbbraceRe.exec(text))) {      addVar(ivar[1])    }    // 遍历所有节点的属性，获取所有的动态属性    for (let i = 0; i < domList.length; i++) {      const dom = domList.eq(i)      const attrs = Object.keys(dom.attr())      for (let attr of attrs) {        const value = dom.attr(attr)        if (!TransformTemplate.dbbraceRe.test(value)) continue        const exp = value.match(TransformTemplate.dbbraceRe)[1]        try {          addVar(exp)        } catch (e) {          addVar(`{${exp}}`)        }      }    }     function addVar(exp: string) {      traverse(parseSync(`(${exp})`), { // 利用babel分析表达式中的所有变量        Identifier(path) {          if (            path.parentPath.isMemberExpression() &&            !path.parentPath.node.computed &&            path.parentPath.node.property === path.node          )            return          self.vars.add(path.node.name) // 收集变量        },      })    }  }

<template>  <!--...--></template><script>  export default {    props: ['data', 'compName'],    computed: {      item() {        return data.item      },      pic() {        return data.pic      }    }  }</script>

<!--TItem.vue--><template>  <view>    <template v-if="compName == 'foo'">      <view class="foo">        <!--...-->      </view>    </template>       <template v-if="compName == 'bar'">      <view class="bar">        <!--...-->      </view>    </template>  </view></template> <script>export default {  props: ['compName', 'data'],  computed: {     item() {       return this.data.item     },     pic() {       return this.data.pic     }  }}</script> <!--TItem-incl.vue--><template>  <view>    <view class="footer">      this is footer    </view>  </view></template>