RN-Taro语法转换分享

一.整体流程

文件输入-->解析-->转换-->生成-->文件输出

image.png

• 解析

  将代码解析成抽象语法树（AST），每个js引擎（比如Chrome浏览器中的V8引擎）都有自己的AST解析器，而Babel是通过Babylon实现的。在解析过程中有两个阶段：词法分析和语法分析，词法分析阶段把字符串形式的代码转换为令牌（tokens）流，令牌类似于AST中节点；而语法分析阶段则会把一个令牌流转换成 AST的形式，同时这个阶段会把令牌中的信息转换成AST的表述结构。

  • 转换

  在这个阶段，Babel接受得到AST并通过babel-traverse对其进行深度优先遍历，在此过程中对节点进行添加、更新及移除操作。这部分也是Babel插件介入工作的部分。

  • 生成

  将经过转换的AST通过babel-generator再转换成js代码，过程就是深度优先遍历整个AST，然后构建可以表示转换后代码的字符串。

二.抽象语法树

比如代码

function square(n) {
  return n * n;
}

经过babylon解析后生成的AST语法树结构如下：

- FunctionDeclaration: //函数声明
  - id:
    - Identifier://标识符
      - name: square
  - params [1]
    - Identifier
      - name: n
  - body:
    - BlockStatement //块语句节点
      - body [1]
        - ReturnStatement //返回声明
          - argument
            - BinaryExpression //二元运算表达式节点
              - operator: *
              - left
                - Identifier
                  - name: n
              - right
                - Identifier
                  - name: n

关于抽象语法树示例可以参考 13 个示例快速入门 JS 抽象语法树

三.RN-Taro工程

1.拆分的转换模块以及对应需要解析的节点

image.png

2 当前支持项

3.转换前后对比

查看代码

4.实践应用

商业地产楼盘动态的区域筛选组件从已有RN页面进行转换，转换率80%，因为都是基础组件所以转化率较高。以下是H5页面示例：

image.png

四.扩展和计划

1. 当前设计结构可以支持组件、生命周期、SDK快速扩展
2. 目前只涉及到文件转换，下一步可以思考工程角度转换
3. 统一规范，根据房产已有组件和SDK设计Taro的API，使得Taro向RN靠拢，降低转换成本