不同前端框架下的代码转换

背景

整个前端领域在这几年迅速发展，前端框架也在不断变化，各团队选择的解决方案都不太一致，此外像小程序这种跨端场景和以往的研发方式也不太一样。在日常开发中往往会因为投放平台的不一样需要进行重新编码。

前段时间我们需要在淘宝页面上投放闲鱼组件，淘宝前端研发DSL(React/Rax)和闲鱼前端研发DSL(Vue/Weex)不一致，有没有办法直接将已有的Vue组件转化为React组件呢，闲鱼技术团队从代码编译的角度提出了一种解决方案。

编译器的工作原理

日常工作中我们接触最多的编译器就是Babel，Babel可以将最新的Javascript语法编译成当前浏览器兼容的JavaScript代码，Babel工作流程分为三个步骤，由下图所示： 0 1  抽象语法树AST是什么

在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构，详见维基百科。这里以 consta=1 转成 vara=1 操作为例看下Babel是如何工作的。

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

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();
 }
});

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

2. let code = generate(ast).code;

Vue和React的异同

我们来看下Vue和React的异同，如果需要做转化需要有哪些处理，Vue的结构分为style、script、template三部分

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 需要额外做标记。

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 ，具体处理的逻辑如下：

1. if (ast.ifConditions && ast.ifConditions.length > 1) {

2. // 包含v-else的情况

3. let leftBlock = ast.ifConditions[0].block;

4. let rightBlock = ast.ifConditions[1].block;

5. let left = generatorJSXElement(leftBlock); //转化成JSX元素

6. let right = generatorJSXElement(rightBlock); //转化成JSX元素

7. child = t.jSXExpressionContainer( //JSX表达式容器

8. // 转化成条件表达式

9. t.conditionalExpression(

10. parseExpression(value),

11. left,

12. right

13. )

14. );

15. } else {

16. // 不包含v-else的情况

17. child = t.jSXExpressionContainer( //JSX表达式容器

18. // 转化成逻辑表达式

19. t.logicalExpression('&&', parseExpression(value), t.jsxElement(

20. t.jSXOpeningElement(

21. t.jSXIdentifier(tag), attrs),

22. t.jSXClosingElement(t.jSXIdentifier(tag)),

23. children

24. ))

25. );

26. }

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等，闲鱼技术团队也会持续在这块做尝试。