?作者｜攜程前端框架團隊，為攜程集團各業務線提供優秀的Web解決方案，當前主要專注：新一代研發模式探索，Rust構建工具鏈路升級、Serverless應用框架開發、在線文檔系統開發、低代碼平臺搭建、適老化與無障礙探索等。

一、摘要

隨著攜程接入小程序平臺類型的增加，前端需要負責的端越來越多，研發成本也隨之成倍增加。為了解決一套代碼多端運行的訴求，攜程小程序框架不斷調整、升級，逐漸形成了攜程Taro跨端解決方案。

二、背景

2.1 小程序現狀

近幾年業界推出了各種小程序平臺，每個小程序平臺都會提供一個專屬的原生小程序DSL， 這些DSL之間或多或少存在一些差異，這意味著使用某一類型小程序DSL編寫的代碼，無法直接復用到其他小程序平臺上，造成開發和維護成本成倍增加。

2.2 業務現狀

目前攜程支持的小程序業務涉及多個小程序平臺，如果全部只使用平臺自身的DSL開發，開發人員至少需要同時開發及維護5個活躍版本，開發任務繁重，代碼維護困難。此外，每新增一類小程序入口，開發人員必須將原有業務邏輯重寫一遍，不僅工作內容重復，而且嚴重影響業務落地速度。為此，一套代碼多端運行的訴求迫在眉睫。

值得注意的是，攜程已經接入了多個平臺的小程序，使用多端統一開發框架從零開始開發小程序代碼既浪費研發資源又不現實。我們需要考慮如何在攜程當前已有的小程序代碼的基礎上使用跨端框架開發新業務、逐步切換原有代碼，實現多端統一開發方案的平滑接入。

2.3 解決方案

為了解決上述問題，我們研發了攜程Taro跨端解決方案，開發者只需使用Taro框架書寫一套代碼，便可獲得在多個平臺皆運行良好的小程序項目。此外，該方案還提供了倉庫管理、輔助腳手架、編譯功能擴展及過程優化等功能。

三、Taro跨端解決方案設計

3.1 技術選型

為了在保留原有代碼的前提下實現一套代碼多端運行，我們對市面上的跨端開發框架進行了調研，最終決定使用Taro 3 作為攜程小程序的跨端框架。主要是考慮到Taro 3具有以下4項優點：

• 框架穩定性高
• 支持的平臺種類多
• 支持使用React 語法規范進行開發
• 支持Taro和原生混合開發

3.2 整體架構設計

攜程小程序隨著業務的發展、多平臺化趨勢和跨端技術的不斷演進，逐漸形成了一套多平臺復用的Taro跨端解決方案。

圖1 項目工程架構圖

攜程小程序的項目工程架構圖如圖1所示。上半部分是跨端復用層，這一層的項目代碼是基于Taro框架進行開發的，多個Taro模塊可以靈活組合成一個完整的Taro項目；從下半張圖可以看出，Taro項目是完整小程序項目的其中一個模塊，Taro項目的運行需要依賴小程序原生殼工程。整個Taro項目是依據插件化的設計思想組織代碼的，由多個獨立的Taro模塊和一個Taro基礎殼工程構成。

3.3 Taro模塊的插件化設計

首先，攜程小程序是由多個團隊協同開發的項目，跨團隊協作開發時常常會出現代碼沖突、文件覆蓋等問題。因此，需要思考如何通過合理的項目架構從根本上解決這些問題，保證多團隊并行開發的效率。考慮到可以采用模塊化的概念，根據業務線類型將項目代碼拆解成多個子模塊，并約定文件放置以及引用規則，從而確保各個子模塊的源碼文件能夠完全隔離。

然而，使用模塊化開發方案，得到的Taro項目幾乎不具有擴展性，Taro模塊也無法快速便捷的被復用。怎樣才能提高Taro模塊的靈活性，使得任取一個或多個Taro模塊進行組合都能得到一個完整的Taro項目，且合并到小程序原生殼工程中能夠正常運行？為解決以上問題，我們進一步將插件化的設計思想應用在Taro跨端解決方案上，提供了定制化的Taro基礎殼工程以及一套開發規范。

開發者需使用Taro基礎殼工程作為開發模版，并遵循規范進行業務開發，所有Taro模塊在本地開發或發布時按照統一的標準進行編譯、融合，從而達到在不破壞原有項目結構的前提下靈活組合使用的目標。下面我們將從項目構成與開發規范、倉庫管理、開發架構，運行方案等方面詳細講解Taro跨端解決方案。

3.4 項目結構與開發規范

Taro基礎殼工程是由Taro官方的模版項目拓展而來，內部增加了定制化的編譯配置、Plugins和基礎組件類。如圖2所示，Taro基礎殼工程內僅包含與公共基礎功能相關的文件，這些文件可抽象成3類內容：編譯配置文件、用于擴展編譯過程的Plugins，以及頁面基類。

圖2 Taro基礎殼工程結構示意圖

開發Taro模塊時，開發者需要關注3塊內容（擴展配置、項目文件、頁面文件，參見圖2），并遵守以下幾項規范進行開發：

1）主包的大小直接影響著小程序啟動性能，為此我們提出“非必要不打入主包”原則：除小程序啟動時需要用到的文件、tabBar頁面及公共基礎文件外，其他文件應全部拆入分包中。Taro模塊也須遵循該原則，開發者應將業務代碼全部放置在自己的分包目錄下，項目文件app.config.js中只增加分包頁面配置。

2）為了避免合并項目時出現業務線之間文件相互覆蓋或頁面路徑沖突，統一約定分包頁面路徑的前綴為“pages/業務線英文縮寫”，結合“非必要不打入主包”原則使用，可以有效隔離各業務線的源碼文件。

3）為確保Taro模塊的業務相關內容（包括依賴包）完全放置在分包路徑下，不占用主包的大小，我們提供了commonModule方案：在引用第三方依賴包前，需要開發者本地進行預編譯操作，將需要引用的內容打包成放置在分包中的一個或多個commonModule文件，隨后從預編譯產物（commonModule）中引用所需的模塊。除此之外，還可以通過commonOrigin方案獲取依賴包的源碼，此時會將所需依賴包的原樣復制到開發者指定的文件夾目錄下。

3.5 倉庫管理

首先，Taro項目采用分倉開發的模式，將每個業務線的Taro模塊存放在一個單獨的git倉庫中。將Taro模塊分別存放在不同的倉庫，可以保持各個業務倉庫提交代碼操作的獨立。

其次，我們借助gitsubmodule 工具將各個Taro模塊所在的倉庫以及Taro基礎殼工程倉庫作為子目錄包含到整個Taro項目的發布倉庫中，為發布倉庫和多業務倉建立起父子倉庫的關聯。建立倉庫間的關聯后，Taro項目可以借助git submodule 的獲取子模塊功能快速克隆自己所需的Taro模塊源碼，并且可以隨時拉取各個業務倉庫的最新代碼。

再次，由于gitsubmodule允許一個倉庫作為多個倉庫的子目錄，這意味著可以選取不同的Taro模塊，將他們的倉庫組合成新的發布倉庫，結合攜程小程序管理平臺中各個小程序所需Taro模塊的配置一起使用，可實現根據配置動態引入Taro模塊的效果。

隨后，通過對多個Taro模塊進行組合，可以快速獲得各種包含多個業務線的Taro項目，從而提高Taro模塊在不同場景中的復用。

圖3 倉庫管理及模塊復用

然后，將Taro項目作為完整小程序的一個bundle，將Taro項目的編譯產物與小程序原生殼項目進行合并，即可獲取到Taro混合開發的完整小程序代碼。

如圖3所示，通過組合Taro模塊可以獲取到包含不同功能的Taro項目，接著將Taro項目與不同類型的小程序原生殼項目結合，便可以輕松獲取多個Taro混合開發的小程序項目。

3.6 開發及運行架構

開發者只需安裝miniTools腳手架并執行初始化命令行，即可快速獲取Taro模塊的開發模版和小程序原生殼工程，完成項目初始化。開發Taro模塊時，開發者需要遵循開發規范，在分包目錄下添加文件并編寫業務代碼。編寫過程中，只需執行編譯指令，便可將本地開發的源碼編譯并融合到小程序原生殼工程中，得到包含Taro模塊內容的完整小程序代碼了。

圖4 本地開發過程

結合上述本地開發過程，Taro跨端解決方案具體提供的功能以及優化工作說明如下：

1）Taro模塊直接引用小程序原生殼項目內的模塊。提供@/miniapp標識符，用于指代小程序完整項目根目錄。同時，編譯過程中會識別代碼中的標識符，動態計算并修改引用路徑。開發Taro模塊時只需使用@/miniapp拼接文件的相對路徑，便可以直接引用小程序完整項目根目錄內的文件。

2）擴展頁面配置項，提供設置自定義組件嵌套層級的功能。開發者可以在頁面配置文件中增加自定義組件的嵌套層級配置，編譯時將檢索頁面配置文件的內容，匯總并設置Taro項目用到的自定義組件的嵌套層級。

3）根據分包路徑，動態生成splitChunks。為了防止公共文件被打到主包中（占用主包的大小），編譯時會讀取Taro模塊配置的分包路徑，動態生成splitChunks。該方案可以將分包用到的公共文件單獨抽離到分包中，隨后為分包中的所有頁面添加對分包公共文件的引用即可。

4）提供擴展配置文件，允許自行添加alias和externals 配置，便于開發者自定義目錄別名以及不需要打包的依賴。

5）提供模塊分析功能，開發者可以更加便捷地查看每個chunk內包含哪些文件

6）使用混合模式進行打包，隨后自動將編譯產物移動到小程序原生殼工程中，同時將分包配置添加到小程序項目配置內。這一步是為了將Taro項目編譯產物與攜程原有的小程序代碼合并成一個完整的Taro混合小程序項目。在開發規范的作用下，Taro模塊的分包路徑是根據各業務線隔離的，每個Taro模塊的文件都嚴格放置在自己的分包路徑內，因此只需將公共基礎文件放置到項目根目錄，分包內容遷移至各自的分包目錄下，便可順利完成代碼合并。

3.7 項目發布

我們利用webhooks 實現Taro項目的流水線式迭代開發，當Taro模塊提交修改時，會觸發Taro項目發布倉庫的pipeline。Taro項目發布倉庫pipeline的主要工作流程如下：

首先，Taro項目會拉取所有子倉庫的最新代碼。接著，將從小程序管理平臺獲取當前Taro項目使用的Taro模塊列表及相應的發布版本號，并據此按需將各個Taro模塊的發布代碼拉取到docker中。至此，Taro項目所需發布的所有源碼已經獲取完畢。

圖5 自動化CI/CD

接下來，將進行Taro項目的合并工作：將各個Taro模塊的代碼切換至指定版本，獲取各個Taro模塊中配置的分包路徑，并將相關配置文件和分包目錄下業務代碼合并到Taro殼工程中。

Taro項目合并完成后，便會編譯成指定小程序類型的代碼。值得一提的是，Taro基礎殼工程既是Taro項目殼又是開發模版，它提供了統一的Taro項目結構和編譯方式，也是Taro模塊能靈活組合的原因所在。

最后，將Taro項目的編譯產物與相應類型的小程序原生代碼進行合并，即可獲得完整的Taro小程序項目。將項目代碼上傳到小程序后臺，則標志著一整套項目發布流程的順利完成。

四、總結

目前，Taro跨端解決方案已支持一套代碼運行在5類小程序（微信、支付寶、字節跳動、百度、快手）平臺。使用此方案進行開發的Taro小程序項目靈活度和復用性很高，可以按需選用Taro模塊組合成一個完整的Taro項目。

此外，我們還提供了配套的腳手架工具、倉庫管理、版本管理以及pipeline自動化方案，極大提升了小程序的開發、測試和發布效率。今后我們將繼續完善小程序生態系統，為解決業務痛點不斷孵化出更多的解決方案。