Antmove 2.0 展望，不同的代碼編譯解決方案

簡介

傳送門

• amove 編譯器 - 代碼編譯通用解決方案
• wx2my - 基於 amove 重構的微信小程序轉支付寶版本

Antmove 小程序轉換器，去年 5 月開始立項，7 月份左右正式開源，到目前爲止已經幫助上百個小程序實現轉換遷徙。在不斷更新維護的過程當中，隨着轉換平臺的增多和用戶自定義需求的增加，Antmove 須要處理的問題和邏輯變得越加複雜，爲了應對支持平臺的擴張和轉換功能邏輯的複雜化，團隊進行了 2.0 版本重構，旨在提供一套可伸縮插件化的通用代碼編譯解決方案。

Amove - 爲代碼快速編譯實現的底層編譯器工具

代碼編譯轉換是一個複雜的應用場景，爲了應對大型項目的代碼編譯，咱們須要一種安全可靠，同時又足夠便利的架構模型，Amove 也所以而誕生，通過長時間的迭代，目前 Amove 已經沉澱除了一套代碼編譯的最佳實踐解決方案。除了 Antmove 以外，還支撐了團隊多個項目的代碼遷徙轉換工做。

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 的整個編譯流程中插入自定義操做，從而實現定製化轉換工具。

如何使用

最新版本的 antmove 已經集成 wx2my 命令，即 wx-compiler 轉支付寶小程序能力，微信轉其它平臺功能會逐步推出。

• 快速指南

Antmove 編譯原子拆分

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 也能夠做爲其它編譯難題的解決方案，好比代碼遷移，腳手架生成等。