阅读 1245

Antmove 2.0 展望,不一样的代码编译解决方案

简介

传送门:

antmove

Antmove 小程序转换器,去年 5 月开始立项,7 月份左右正式开源,到目前为止已经帮助上百个小程序实现转换迁徙。在不断更新维护的过程中,随着转换平台的增多和用户自定义需求的增长,Antmove 需要处理的问题和逻辑变得越加复杂,为了应对支持平台的扩张和转换功能逻辑的复杂化,团队进行了 2.0 版本重构,旨在提供一套可伸缩插件化的通用代码编译解决方案。

Amove - 为代码快速编译实现的底层编译器工具

代码编译转换是一个复杂的应用场景,为了应对大型项目的代码编译,我们需要一种安全可靠,同时又足够便利的架构模型,Amove 也因此而诞生,经过长时间的迭代,目前 Amove 已经沉淀除了一套代码编译的最佳实践解决方案。除了 Antmove 之外,还支撑了团队多个项目的代码迁徙转换工作。

Amove 编译流程图

amove

从上图可以看到,Amove 的编译流程分为编译和二次编译两个阶段,同时通过可预测的编译模型,可以简单的实现热编译功能。

除了编译流程的把控外,Amove 提供了灵活的插件机制(可参考 babel 的插件化工作机制),Amove 的插件设计比 babel 更加灵活,可以和其它编译器工具结合使用。比如 基于 amove 重构的 Antmove 版本 js 代码编译部分就结合 babel 来处理的。

更多可参考 amove 文档介绍。

ant-move.github.io/amove/#amov…

wx-compiler

wx-compiler 是 Antmove 2.0 重构的第一步,它是一个完全插件化的微信小程序转其它小程序版本,基于该版本,用户可以在 wx-compiler 的整个编译流程中插入自定义操作,从而实现定制化转换工具。

如何使用

最新版本的 antmove 已经集成 wx2my 命令,即 wx-compiler 转支付宝小程序能力,微信转其它平台功能会逐步推出。

Antmove 编译原子拆分

antmove wx-compiler amove atoms

wx-compiler 目前实现版本大概由 50 个左右的编译原子组成,分为如下三个模块

  • @amove/wx - 微信小程序数据解析模块
  • @amove/wx-utils - 微信小程序通用处理编译原子集合
  • @amove/wx-alipay - 微信小程序转支付宝编译原子集合

基于上述结构,我们只要扩充一下 @amove/wx-alipay 模块就可以得到微信小程序转其它平台的转换版本。

编译插件编写?

插件的编写非常简单,只需编写一个简单的函数就可以,如下所示:

  • 更改导航栏背景色

新建一个 js 文件,copy 如下代码,在编译前执行该文件即可生效。

useReducer({
    AppJsonWindow (node) {
        node.body.window.navigationBarBackgroundColor = '#000000';
    }
});
复制代码

AppJsonWindow 是 Antmove 内置的一个编译原子,也即 Antmove 的一个编译流程节点,按如上方式可以简单的对该阶段的功能进行定制化操作。

  • 组件引入路径处理
useReducer({
    AppJson (node) {
        node.body.window.navigationBarBackgroundColor = '#000000';
    },
    UsingComponent (node) {
        console.log(node.body);
	  // 比如将 vCard => v-card
	  // 或者给某一个组件指定引入路径
    }
});
复制代码

总结

在 Antmove 2.0 中,我们希望 Antmove 转换器能成为一个小程序编译的通用解决方案,让更多有定制化需要的用户可以充分使用 Antmove 的能力,同时又能扩充自己的转换需求。 除了基本 Antmove 扩展,为 Antmove 提供插件为,Amove 也可以作为其它编译难题的解决方案,比如代码迁移,脚手架生成等。

关注下面的标签,发现更多相似文章
评论