懂編譯真的可以為所欲為|不同前端框架下的程式碼轉換

背景

整個前端領域在這幾年迅速發展，前端框架也在不斷變化，各團隊選擇的解決方案都不太一致，此外像小程式這種跨端場景和以往的研發方式也不太一樣。在日常開發中往往會因為投放平臺的不一樣需要進行重新編碼。

前段時間我們需要在淘寶頁面上投放閒魚元件，淘寶前端研發DSL(React/Rax)和閒魚前端研發DSL(Vue/Weex)不一致，有沒有辦法直接將已有的Vue元件轉化為React元件呢，閒魚技術團隊從程式碼編譯的角度提出了一種解決方案。

編譯器的工作原理

日常工作中我們接觸最多的編譯器就是Babel，Babel可以將最新的Javascript語法編譯成當前瀏覽器相容的JavaScript程式碼，Babel工作流程分為三個步驟，由下圖所示：

01

抽象語法樹AST是什麼

在電腦科學中，抽象語法樹（Abstract Syntax Tree，AST），或簡稱語法樹（Syntax tree），是原始碼語法結構的一種抽象表示。它以樹狀的形式表現程式語言的語法結構，樹上的每個節點都表示原始碼中的一種結構，詳見維基百科。這裡以 consta=1轉成 vara=1操作為例看下Babel是如何工作的。

02

將程式碼解析成抽象語法樹

Babel提供了@babel/parser將程式碼解析成AST。

const parse = require('@babel/parser').parse;

const ast = parse('const a = 1');

03

經過遍歷和分析轉換對AST進行處理

Babel提供了@babel/traverse對解析後的AST進行處理。 @babel/traverse能夠接收AST以及visitor兩個引數，AST是上一步parse得到的抽象語法樹，visitor提供訪問不同節點的能力，當遍歷到一個匹配的節點時，能夠呼叫具體方法對於節點進行處理。@babel/types用於定義AST節點，在visitor裡做節點處理的時候用於替換等操作。在這個例子中，我們遍歷上一步得到的AST，在匹配到變數宣告（ VariableDeclaration）的時候判斷是否 const操作時進行替換成 var。 t.variableDeclaration(kind,declarations)接收兩個引數 kind和 declarations，這裡kind設為 var，將 consta=1解析得到的AST裡的 declarations直接設定給 declarations。

const traverse = require('@babel/traverse').default;
const t = require('@babel/types');

traverse(ast, {
  VariableDeclaration: function(path) { //識別在變數宣告的時候
    if (path.node.kind === 'const') { //只有const的時候才處理
      path.replaceWith(
        t.variableDeclaration('var', path.node.declarations) //替換成var
      );
    }
    path.skip();
  }
});

04

將最終轉換的AST重新生成程式碼

Babel提供了@babel/generator將AST再還原成程式碼。

const generate = require('@babel/generator').default;

let code = generate(ast).code;

Vue和React的異同

我們來看下Vue和React的異同，如果需要做轉化需要有哪些處理，Vue的結構分為style、script、template三部分

01   style 

樣式這部分不用去做特別的轉化，Web下都是通用的

02   script

Vue某些屬性的名稱和React不太一致，但是功能上是相似的。例如 data需要轉化為 state， props需要轉化為 defaultProps和 propTypes， components的引用需要提取到元件宣告以外， methods裡的方法需要提取到元件的屬性上。還有一些屬性比較特殊，比如 computed，React裡是沒有這個概念的，我們可以考慮將 computed裡的值轉化成函式方法，上面示例中的 length，可以轉化為 length()這樣的函式呼叫，在React的 render()方法以及其他方法中呼叫。

Vue的生命週期和React的生命週期有些差別，但是基本都能對映上，下面列舉了部分生命週期的對映

• created -> componentWillMount

• mounted -> componentDidMount

• updated -> componentDidUpdate

• beforeDestroy -> componentWillUnmount 

  在Vue內函式的屬性取值是透過 this.xxx的方式，而在Rax內需要判斷是否 state、 props還是具體的方法，會轉化成 this.state、 this.props或者 this.xxx的方式。因此在對Vue特殊屬性的處理中，我們對於 data、 props、 methods需要額外做標記。

03  template

針對文字節點和元素節點處理不一致，文字節點需要對內容 {{title}}進行處理，變為 {title}。

Vue裡有大量的增強指令，轉化成React需要額外做處理，下面列舉了部分指令的處理方式

• 事件繫結的處理， @click -> onClick

• 邏輯判斷的處理， v-if="item.show" -> {item.show&&……}

• 動態引數的處理， :title="title" -> title={title}

還有一些是正常的html屬性，但是React下是不一樣的，例如 style -> className。 指令裡和 model裡的屬性值需要特殊處理，這部分的邏輯其實和script裡一樣，例如需要 {{title}}轉變成 {this.props.title}

Vue程式碼的解析

以下面的Vue程式碼為例

<template>
  <div>
    <p class="title" @click="handleClick">{{title}}</p>
    <p class="name" v-if="show">{{name}}</p>
  </div>
</template>

<style>
.title {font-size: 28px;color: #333;}
.name {font-size: 32px;color: #999;}
</style>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "title"
    }
  },
  data() {
    return {
      show: true,
      name: "name"
    };
  },
  mounted() {
    console.log(this.name);
  },
  methods: {
    handleClick() {}
  }
};
</script>

我們需要先解析Vue程式碼變成AST值。這裡使用了Vue官方的 vue-template-compiler來分別提取Vue元件程式碼裡的template、style、script，考慮其他DSL的通用性後續可以遷移到更加適用的html解析模組，例如 parse5等。透過 vue-template-compiler的 parseComponent方法得到了分離的template、style、script。 style不用額外解析成AST了，可以直接用於React程式碼。template可以透過 vue-template-compiler的 compile方法轉化為AST值。script用 @babel/parser來處理，對於script的解析不僅僅需要獲得整個script的AST值，還需要分別將 data、 props、 computed、 components、 methods等引數提取出來，以便後面在轉化的時候區分具體屬於哪個屬性。以 data的處理為例：

const traverse = require('@babel/traverse').default;
const t = require('@babel/types');

const analysis = (body, data, isObject) => {
  data._statements = [].concat(body); // 整個表示式的AST值

  let propNodes = [];
  if (isObject) {
    propNodes = body;
  } else {
    body.forEach(child => {
      if (t.isReturnStatement(child)) { // return表示式的時候
        propNodes = child.argument.properties;
        data._statements = [].concat(child.argument.properties); // 整個表示式的AST值
      }
    });
  }

  propNodes.forEach(propNode => {
    data[propNode.key.name] = propNode; // 對data裡的值進行提取，用於後續的屬性取值
  });
};

const parse = (ast) => {
  let data = {
  };

  traverse(ast, {
    ObjectMethod(path) {
      /*
      物件方法
      data() {return {}}
      */
      const parent = path.parentPath.parent;
      const name = path.node.key.name;

      if (parent && t.isExportDefaultDeclaration(parent)) {
        if (name === 'data') {
          const body = path.node.body.body;

          analysis(body, data);

          path.stop();
        }
      }
    },
    ObjectProperty(path) {
      /*
      物件屬性，箭頭函式
      data: () => {return {}}
      data: () => ({})
      */
      const parent = path.parentPath.parent;
      const name = path.node.key.name;

      if (parent && t.isExportDefaultDeclaration(parent)) {
        if (name === 'data') {
          const node = path.node.value;

          if (t.isArrowFunctionExpression(node)) {
            /*
            箭頭函式
            () => {return {}}
            () => {}
            */
            if (node.body.body) {
              analysis(node.body.body, data);
            } else if (node.body.properties) {
              analysis(node.body.properties, data, true);
            }
          }
          path.stop();
        }
      }
    }
  });

  /*
    最終得到的結果
    {
      _statements, //data解析AST值
      list //data.list解析AST值
    }
  */
  return data;
};

module.exports = parse;

最終處理之後得到這樣一個結構：

app: {
script: {
ast,
components,
computed,
data: {
_statements, //data解析AST值
list //data.list解析AST值
},
props,
methods
},
style, // style字串值
template: {
ast // template解析AST值
}
}

React程式碼的轉化

最終轉化的React程式碼會包含兩個檔案（css和js檔案）。用style字串直接生成index.css檔案，index.js檔案結構如下圖， transform指將Vue AST值轉化成React程式碼的偽函式。

import { createElement, Component, PropTypes } from 'React';
import './index.css';

export default class Mod extends Component {
  ${transform(Vue.script)}

  render() {
    ${transform(Vue.template)}
  }
}

script AST值的轉化不一一說明，思路基本都一致，這裡主要針對Vue data繼續說明如何轉化成React state，最終解析Vue data得到的是 {_statements:AST}這樣的一個結構，轉化的時候只需要執行如下程式碼

const t = require('@babel/types');

module.exports = (app) => {
  if (app.script.data && app.script.data._statements) {
    // classProperty 類屬性 identifier 識別符號 objectExpression 物件表示式
    return t.classProperty(t.identifier('state'), t.objectExpression(app.script.data._statements));
  } else {
    return null;
  }
};

針對template AST值的轉化，我們先看下Vue template AST的結構：

{  tag: 'div',  children: [{    tag: 'text'  },{    tag: 'div',    children: [……]  }]}

轉化的過程就是遍歷上面的結構針對每一個節點生成渲染程式碼，這裡以 v-if的處理為例說明下節點屬性的處理，實際程式碼中會有兩種情況：

• 不包含 v-else的情況， <divv-if="xxx"/>轉化為 {xxx&&<div/>}

• 包含 v-else的情況， <divv-if="xxx"/><textv-else/>轉化為 {xxx?<div/>:<text/>}

經過 vue-template-compiler解析後的template AST值裡會包含 ifConditions屬性值，如果 ifConditions的長度大於1，表明存在 v-else，具體處理的邏輯如下：

if (ast.ifConditions && ast.ifConditions.length > 1) {
  // 包含v-else的情況
  let leftBlock = ast.ifConditions[0].block;
  let rightBlock = ast.ifConditions[1].block;

  let left = generatorJSXElement(leftBlock); //轉化成JSX元素
  let right = generatorJSXElement(rightBlock); //轉化成JSX元素

  child = t.jSXExpressionContainer( //JSX表示式容器
    // 轉化成條件表示式
    t.conditionalExpression(
      parseExpression(value),
      left,
      right
    )
  );
} else {
  // 不包含v-else的情況
  child = t.jSXExpressionContainer( //JSX表示式容器
    // 轉化成邏輯表示式
    t.logicalExpression('&&', parseExpression(value), t.jsxElement(
      t.jSXOpeningElement(
        t.jSXIdentifier(tag), attrs),
      t.jSXClosingElement(t.jSXIdentifier(tag)),
      children
    ))
  );
}

template裡引用的屬性/方法提取，在AST值表現上都是識別符號( Identifier)，可以在traverse的時候將 Identifier提取出來。這裡用了一個比較取巧的方法，在template AST值轉化的時候我們不對這些識別符號做判斷，而在最終轉化的時候在render return之前插入一段引用。以下面的程式碼為例

<text class="title" @click="handleClick">{{title}}</text><text class="list-length">list length:{{length}}</text><div v-for="(item, index) in list" class="list-item" :key="`item-${index}`">  <text class="item-text" @click="handleClick" v-if="item.show">{{item.text}}</text></div>

我們能解析出template裡的屬性/方法以下面這樣一個結構表示：

{  title,  handleClick,  length,  list,  item,  index}

在轉化程式碼的時候將它與app.script.data、app.script.props、app.script.computed和app.script.computed分別對比判斷，能得到title是props、list是state、handleClick是methods，length是computed，最終我們在return前面插入的程式碼如下：

let {title} = this.props;let {state} = this.state;let {handleClick} = this;let length = this.length();

最終示例程式碼的轉化結果

import { createElement, Component, PropTypes } from 'React';

export default class Mod extends Component {
  static defaultProps = {
    title: 'title'
  }
  static propTypes = {
    title: PropTypes.string
  }
  state = {
    show: true,
    name: 'name'
  }
  componentDidMount() {
    let {name} = this.state;
    console.log(name);
  }
  handleClick() {}
  render() {
    let {title} = this.props;
    let {show, name} = this.state;
    let {handleClick} = this;

    return (
      <div>
        <p className="title" onClick={handleClick}>{title}</p>
        {show && (
          <p className="name">{name}</p>
        )}
      </div>
    );
  }
}

總結與展望

本文從Vue元件轉化為React元件的具體案例講述了一種透過程式碼編譯的方式進行不同前端框架程式碼的轉化的思路。我們在生產環境中已經將十多個之前的Vue元件直接轉成React元件，但是實際使用過程中研發同學的編碼習慣差別也比較大，需要處理很多特殊情況。

這套思路也可以用於小程式互轉等場景，減少編碼的重複勞動，但是在這類跨端的非保準Web場景需要考慮更多，例如小程式環境特有的元件以及API等，閒魚技術團隊也會持續在這塊做嘗試。