乾貨 | 攜程小程式生態之Taro跨端解決方案

作者簡介

攜程前端框架團隊，為攜程集團各業務線提供優秀的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所示。上半部分是跨端複用層，這一層的專案程式碼是基於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，以及頁面基類。

開發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模組在不同場景中的複用。

然後，將Taro專案作為完整小程式的一個bundle，將Taro專案的編譯產物與小程式原生殼專案進行合併，即可獲取到Taro混合開發的完整小程式程式碼。

如圖3所示，通過組合Taro模組可以獲取到包含不同功能的Taro專案，接著將Taro專案與不同型別的小程式原生殼專案結合，便可以輕鬆獲取多個Taro混合開發的小程式專案。

3.6 開發及執行架構

開發者只需安裝miniTools腳手架並執行初始化命令列，即可快速獲取Taro模組的開發模版和小程式原生殼工程，完成專案初始化。開發Taro模組時，開發者需要遵循開發規範，在分包目錄下新增檔案並編寫業務程式碼。編寫過程中，只需執行編譯指令，便可將本地開發的原始碼編譯並融合到小程式原生殼工程中，得到包含Taro模組內容的完整小程式程式碼了。

結合上述本地開發過程，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專案所需釋出的所有原始碼已經獲取完畢。

接下來，將進行Taro專案的合併工作：將各個Taro模組的程式碼切換至指定版本，獲取各個Taro模組中配置的分包路徑，並將相關配置檔案和分包目錄下業務程式碼合併到Taro殼工程中。

Taro專案合併完成後，便會編譯成指定小程式型別的程式碼。值得一提的是，Taro基礎殼工程既是Taro專案殼又是開發模版，它提供了統一的Taro專案結構和編譯方式，也是Taro模組能靈活組合的原因所在。

最後，將Taro專案的編譯產物與相應型別的小程式原生程式碼進行合併，即可獲得完整的Taro小程式專案。將專案程式碼上傳到小程式後臺，則標誌著一整套專案釋出流程的順利完成。

四、總結

目前，Taro跨端解決方案已支援一套程式碼執行在5類小程式（微信、支付寶、位元組跳動、百度、快手）平臺。使用此方案進行開發的Taro小程式專案靈活度和複用性很高，可以按需選用Taro模組組合成一個完整的Taro專案。

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

“攜程技術”公眾號

分享，交流，成長