React轉(zhuǎn)微信小程序：從React類定義到Component調(diào)用

　　React轉(zhuǎn)微信小程序：從React類定義到Component調(diào)用 。這是本系列的第二篇，過去兩周，已經(jīng)有相當成果出來。本文介紹其中一部分可靠的思路，這個比京東的taro更具可靠性。如果覺得看不過癮，可以看anu的源碼，里面包含了miniapp的轉(zhuǎn)換器。

　　微信小程序是面向配置對象編程，不暴露Page,App,Component等核心對象的原型，只提供三個工廠方法，因此無法實現(xiàn)繼承。App,Page,Component所在的JS的依賴處理也很弱智，你需要聲明在同一目錄下的json文件中。

　　比如說

　　Component({

　　properties: {},

　　data: {},

　　onClick: function(){}

　　})

　　properties與data都是同一個東西，properties只是用來定義data中的數(shù)據(jù)的默認值與類型，相當于React的defaultProps與propTypes。如何轉(zhuǎn)換呢?

　　import {Component} form "./wechat"

　　Class AAA extends Component{

　　constructor(props){

　　super(props);

　　this.state = {}

　　}

　　static propTypes = {}

　　static defaultProps = {}

　　onClick(){}

　　render(){}

　　}

　　export AAA;

　　首先我們要提供一個wechat.js文件，里面提供Component, Page, App 這幾個基類，現(xiàn)在只是空實現(xiàn)，但已經(jīng)足夠了，保證它在調(diào)試不會出錯。我們要的是`Class AAA extends Component`這個語句的內(nèi)容。學了babel，對JS語法更加熟悉了。這個語句在babel6中稱為ClassExpression，到babel7中又叫ClassDeclaration。babel有一個叫"babel-traverse"的包，可以將我們的代碼的AST，然后根據(jù)語法的成分進行轉(zhuǎn)換(詳見這文章 https://yq.aliyun.com/articles/62671)。ClassDeclaration的參數(shù)為一個叫path的對象，我們通過 path.node.superClass.name 就能拿到Component這個字樣。如果我們的類定義是下面的這樣，path.node.superClass.name 則為App。

　　Class AAA extends App{

　　constructor(props){

　　super(props);

　　this.state = {}

　　}

　　}

　　App, Page, Component對應的json差異很大，拿到這個可以方便我們區(qū)別對待。

　　然后我們繼續(xù)定義一個ImportDeclaration處理器，將import語句去掉。

　　定義ExportDefaultDeclaration與ExportNamedDeclaration處理器，將export語句去掉。

　　到這里我不得不展示一下我的轉(zhuǎn)碼器的全貌了。我是通過rollup得到所有模塊的路徑與文件內(nèi)容，然后通過babel進行轉(zhuǎn)譯。babel轉(zhuǎn)換是通過babel.transform。babel本來就有許多叫babel-plugin-transform-xxx的插件，它是專門處理那些es5無法識別的新語法。我們需要在這后面加上一個新插件叫miniappPlugin

　　// https://github.com/RubyLouvre/anu/blob/master/packages/render/miniapp/translator/transform.js

　　const syntaxClassProperties = require("babel-plugin-syntax-class-properties")

　　const babel = require('babel-core')

　　const visitor = require("./visitor");

　　var result = babel.transform(code, {

　　babelrc: false,

　　plugins: [

　　'syntax-jsx',

　　// "transform-react-jsx",

　　'transform-decorators-legacy',

　　'transform-object-rest-spread',

　　miniappPlugin,

　　]

　　})

　　function miniappPlugin(api) {

　　return {

　　inherits: syntaxClassProperties,

　　visitor: visitor

　　};

　　}

　　miniappPlugin的結(jié)構(gòu)異常簡單，它繼承一個叫syntaxClassProperties的插件，這插件原來用來解析es6 class的屬性的，因為我們的目標也是抽取React類中的defaultProps, propsTypes靜態(tài)屬性。

　　visitor的結(jié)構(gòu)很簡單，就是各種JS語法的描述。

　　const t = require("babel-types");

　　module.exports = {

　　ClassDeclaration: 抽取父類的名字與轉(zhuǎn)換構(gòu)造器,

　　ClassExpression: 抽取父類的名字與轉(zhuǎn)換構(gòu)造器,

　　ImportDeclaration(path) {

　　path.remove() //移除import語句，小程序會自動在外面包一層，變成AMD模塊

　　},

　　ExportDefaultDeclaration(path){

　　path.remove() //AMD不認識export語句，要刪掉，或轉(zhuǎn)換成module.exports

　　},

　　ExportNamedDeclaration(path){

　　path.remove() //AMD不認識export語句，要刪掉，或轉(zhuǎn)換成module.exports

　　}

　　}

　　我再介紹一下visitor的處理器是怎么用的，處理器其實會執(zhí)行兩次。我們的AST樹每個節(jié)點會被執(zhí)行兩次，如果學過DFS的同學會明白，第一次訪問后，做些處理，然后進行它內(nèi)部的節(jié)點，處理后再訪問一次。于是visitor也可以這樣定義。

　　ClassDeclaration:{

　　enter(path){},

　　exit(path){}

　　}

　　如果以函數(shù)形式定義，那么它只是作為enter來用。

　　AST會從上到下執(zhí)行，我們先拿到類名的名字與父類的名字，我們定義一個modules的對象，保存信息。

　　enter(path) {

　　let className = path.node.superClass ? path.node.superClass.name : "";

　　let match = className.match(/\.?(App|Page|Component)/);

　　if (match) {

　　//獲取類的組件類型與名字

　　var componentType = match[1];

　　if (componentType === "Component") {

　　modules.componentName = path.node.id.name;

　　}

　　modules.componentType = componentType;

　　}

　　},

　　我們在第二次訪問這個類定義時，要將類定義轉(zhuǎn)換為函數(shù)調(diào)用。即

　　Class AAA extends Component ---> Component({})

　　實現(xiàn)如下，將原來的類刪掉(因此才在exit時執(zhí)行)，然后新建一個函數(shù)調(diào)用語句。我們可以通過babel-types這個句實現(xiàn)。具體看這里。比如說：

　　const call = t.expressionStatement(

　　t.callExpression(t.identifier("Component"), [ t.objectExpression([])])

　　);

　　path.replaceWith(call);

　　就能產(chǎn)生如下代碼，將我們的類定義從原位置替換掉。

　　Component({})

　　但我們不能是一個空對象啊，因此我們需要收集它的方法。

　　我們需要在visitors對象添加一個ClassMethod處理器，收集原來類的方法。類的方法與對象的方法不一樣，對象的方法叫成員表達式，需要轉(zhuǎn)換一下。我們首先弄一個數(shù)組，用來放東西。

　　var methods = []

　　module.exports= {

　　ClassMethod: {

　　enter(path){

　　var methodName = path.node.key.name

　　var method = t.ObjectProperty(

　　t.identifier(methodName),

　　t.functionExpression(

　　null,

　　path.node.params,

　　path.node.body,

　　path.node.generator,

　　path.node.async

　　)

　　);

　　methods.push(method)

　　}

　　}

　　然后我們在ClassDeclaration或ClassExpression的處理器的exit方法中改成：

　　const call = t.expressionStatement(

　　t.callExpression(t.identifier("Component"), [ t.objectExpression(methods)])

　　);

　　path.replaceWith(call);

　　于是函數(shù)定義就變成

　　Component({

　　constructor:function(){},

　　render:function(){},

　　onClick: function(){}

　　})

　　到這里，我們開始另一個問題了。小程序雖然是抄React，但又想別出心裁，于是一些屬性與方法是不一樣的。比如說data對應state, setData對應setState，早期的版本還有forceUpdate之類的。data對應一個對象，你可以有千奇百怪的寫法。

　　this.state ={ a: 1}

　　this["state"] = {b: 1};

　　this.state = {}

　　this.state.aa = 1

　　你想hold住這么多奇怪的寫法是很困難的，因此我們可以對constructor方法做些處理，然后其他方法做些約束，來減少轉(zhuǎn)換的成本。什么處理constructor呢，我們可以定義一個onInit方法，專門劫持constructor方法，將this.state變成this.data。

　　function onInit(config){

　　if(config.hasOwnProperty("constructor")){

　　config.constructor.call(config);

　　}

　　config.data = config.state|| {};

　　delete config.state

　　return config;

　　}

　　Component(onInit({

　　constructor:function(){},

　　render:function(){},

　　onClick: function(){}

　　}))

　　具體實現(xiàn)參這里，本文就不貼上來了。

　　RubyLouvre/anu

　　那this.setState怎么轉(zhuǎn)換成this.setData呢。這是一個函數(shù)調(diào)用，語法上稱之為**CallExpression**。我們在visitors上定義同名的處理器。

　　CallExpression(path) {

　　var callee = path.node.callee || Object;

　　if ( modules.componentType === "Component" ) {

　　var property = callee.property;

　　if (property && property.name === "setState") {

　　property.name = "setData";

　　}

　　}

　　},

　　至少，將React類定義轉(zhuǎn)換成Component({})調(diào)用方式 成功了。剩下就是將import語句處理一下，因為要小程序中，如果這個組件引用了其他組件，需要在其json中添加useComponens對象，將這些組件名及鏈接寫上去。換言之，小程序太懶了，處處都要手動。有了React轉(zhuǎn)碼器，這些事可以省掉。

　　其次是render方法的轉(zhuǎn)換，怎么變成一個wxml文件呢，`{}單花括號的內(nèi)容要轉(zhuǎn)換成`"{{}}"`雙引號+雙花括號 ，wx:if, wx:for的模擬等等，且聽下回分解。