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

简介

传送门node

antmove

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

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

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

Amove 编译流程图

amove

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

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

更多可参考 amove 文档介绍。安全

https://ant-move.github.io/am...微信

wx-compiler

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

如何使用

最新版本的 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 也能够做为其它编译难题的解决方案,好比代码迁移,脚手架生成等。

相关文章
相关标签/搜索