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

一、摘要

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

二、背景

2.1 小程序現(xiàn)狀

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

2.2 業(yè)務(wù)現(xiàn)狀

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

值得注意的是，攜程已經(jīng)接入了多個平臺的小程序，使用多端統(tǒng)一開發(fā)框架從零開始開發(fā)小程序代碼既浪費研發(fā)資源又不現(xiàn)實。我們需要考慮如何在攜程當(dāng)前已有的小程序代碼的基礎(chǔ)上使用跨端框架開發(fā)新業(yè)務(wù)、逐步切換原有代碼，實現(xiàn)多端統(tǒng)一開發(fā)方案的平滑接入。

2.3 解決方案

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

三、Taro跨端解決方案設(shè)計

3.1 技術(shù)選型

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

• 框架穩(wěn)定性高
• 支持的平臺種類多
• 支持使用React 語法規(guī)范進行開發(fā)
• 支持Taro和原生混合開發(fā)

3.2 整體架構(gòu)設(shè)計

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

圖1 項目工程架構(gòu)圖

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

3.3 Taro模塊的插件化設(shè)計

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

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

開發(fā)者需使用Taro基礎(chǔ)殼工程作為開發(fā)模版，并遵循規(guī)范進行業(yè)務(wù)開發(fā)，所有Taro模塊在本地開發(fā)或發(fā)布時按照統(tǒng)一的標(biāo)準(zhǔn)進行編譯、融合，從而達到在不破壞原有項目結(jié)構(gòu)的前提下靈活組合使用的目標(biāo)。下面我們將從項目構(gòu)成與開發(fā)規(guī)范、倉庫管理、開發(fā)架構(gòu)，運行方案等方面詳細(xì)講解Taro跨端解決方案。

3.4 項目結(jié)構(gòu)與開發(fā)規(guī)范

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

圖2 Taro基礎(chǔ)殼工程結(jié)構(gòu)示意圖

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

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

2）為了避免合并項目時出現(xiàn)業(yè)務(wù)線之間文件相互覆蓋或頁面路徑?jīng)_突，統(tǒng)一約定分包頁面路徑的前綴為“pages/業(yè)務(wù)線英文縮寫”，結(jié)合“非必要不打入主包”原則使用，可以有效隔離各業(yè)務(wù)線的源碼文件。

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

3.5 倉庫管理

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

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

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

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

圖3 倉庫管理及模塊復(fù)用

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

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

3.6 開發(fā)及運行架構(gòu)

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

圖4 本地開發(fā)過程

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

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

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

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

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

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

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

3.7 項目發(fā)布

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

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

圖5 自動化CI/CD

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

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

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

四、總結(jié)

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

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