从 Wepy 到 UniApp 变形记( 二 ) _生活百科

2.3 方案对比

文章插图
通过团队对方案的深入讨论和技术预研，最终大家达成一致使用编译转换的方式（方案三）来进行本次的技术升级。最终，通过实现 wepy 到 uniapp 的编译转换器，使原本 25人/天的工作量，6s 完成。
如下动图所示：

文章插图

文章插图
三、架构设计3.1 wepy 和 uniapp 单文件组件转换通过对 wepy 和 uniapp 的学习，充分了解两者之间的差异性和相识点。wepy 的文件设计和 Vue 的单文件非常的相似，包含 template 和 script 和 style 的三部分组成。
如下图所示，

文章插图
所以我们将文件拆解为 script，template，style 样式三个部分，通过 transpiler 分别转换。同时这个过程主要是对 script 和 template 进行转换，样式和 Vue 可以保持一致性最终借助 Vue 进行转换即可。
同时 wepy 还有自己的 runtime运行时的依赖，为了确保项目对 wepy 做到最小化的依赖，方便后续完全和 wepy 的依赖进行完全解耦，我们抽取了一个 wepy-adapter 模块，将原先对于 wepy 的依赖转换为对wepy-adapter 的依赖。
整体转换设计，如下图所示：

文章插图
3.2 编译器流水线构建

文章插图
如上图所示，整个编译过程就是一条流水线的架构设计，在每个阶段完成不同的任务。主要流程如下：
3.2.1 项目资源分析不同的项目依赖资源不同的处理流程，扫描项目中的源码和资源文件进行分类，等待后续的不同的流水线处理。
静态资源文件（图片，样式文件等）不需要经过当中流水线的处理，直达目标 uniapp 项目的对应的目录。
3.2.2 AST抽象语法树转换针对 wepy 的源文件（app，page，component等）对 script，template 等部分，通过 parse 转换成相对应的AST抽象语法树，后续的代码转换都是基于对抽象语法树的结构改进。
3.2.3 代码转换实现 - Transform code根据 wepy 和 uniapp 的 Vue 的代码实现上的差异，通过对ast进行转换实现代码的转换。
3.2.4 代码生成 - code emitter根据步骤三转换之后最终的ast，进行对应的代码生成。
四、项目搭建整体项目结构如下图所示：

文章插图
4.1 单仓库的管理模式使用 lerna 进行单仓库的模块化管理，方便进行模块的拆分和本地模块之间依赖引用。另外单仓库的好处在于，和项目相关的信息都可以在一个仓库中沉淀下来，如文档，demo，issue 等。不过随着 lerna 社区不再进行维护，后续会将 lerna 迁移到 pnpm 的 workspace 的方案进行管理。
4.2 核心模块