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

一、摘要

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

二、背景

2.1 小程序現(xiàn)狀

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

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

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

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

2.3 解決方案

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

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

3.1 技術(shù)選型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.5 倉庫管理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.7 項(xiàng)目發(fā)布

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

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

圖5 自動(dòng)化CI/CD

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

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

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

四、總結(jié)

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

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