作者簡介
李羽，攜程進階前端研發工程師，專注前端跨平台架構領域的開發與研究。
Hyme，攜程前端研發經理，專注前端小程式/H5領域的開發與研究。
Chao，攜程前端研發經理，關注前端跨平台領域與前端研發效率提升。
一、項目背景
随着小程式使用者的增長，APP和小程式在需求疊代上呈齊頭并進的趨勢。與此同時，前端研發人員面對多套平台代碼的維護與開發，研發投入上耗時耗力。目前攜程内部急需一種跨平台的開發架構，來節約不必要的多套開發量。
二、架構介紹
Taro-CRN是幫助攜程開發者基于Taro開發CRN項目的架構，實作一套代碼在小程式和APP上的跨端開發，也為後續攜程的跨端開發生态打下基礎。Taro-CRN由攜程機票團隊與火車票團隊共建而成。Taro本身是業内比較成熟的跨平台解決方案，目前已經支援轉換到多平台小程式、H5、RN頁面，并且有很好的社群支援。
在攜程内部，Taro也擁有同樣廣泛的使用基礎。多個業務線應用Taro來實作多平台小程式的開發，也有大量的H5業務頁面是由Taro-H5轉換而成。然而，Taro-RN作為Taro跨端開發方案的最後一塊拼圖，在攜程内部卻很少有團隊應用，其根本原因在于其難以與攜程的CRN架構結合使用。CRN是适用于攜程APP業務開發的React Native架構，在攜程系APP上有極為廣泛的應用。CRN會在建構過程中，進行一些針對攜程業務的分包、混淆、引入公共包等優化政策。這一點與Taro-RN那種直接打出bundle包的方案難以融合。
由此我們确定了Taro-CRN架構的設計方向：
1）低成本接入，實作用Taro開發CRN頁面。
2）貼近Taro官方方案，享受Taro強大社群支援。
3）接入CRN的建構與打包，适用攜程業務開發。
4）低學習成本，提升開發者體驗。
三、架構介紹
Taro-CRN架構主要由3部分組成：平台插件、Metro Config插件、基礎元件及API庫。
Taro-CRN的平台插件提供了根據Taro來建構CRN工程的能力，這個建構出的CRN工程可以直接用來進行攜程内部的MCD釋出。同時平台插件也在CRN工程中引入了metro config的插件，通過對metro的配置做到引用的轉向和transformer的支援，同時也在這裡配置了Taro-CRN元件庫的映射。在CRN的集中建構過程中，已經抹平差異的元件庫與API庫就被引入并做了替換。這樣就做到了在Taro的業務工程上開發，低成本地打成CRN的bundle包并執行釋出。
3.1 Taro-CRN 平台插件
Taro為了讓開發者拓展更多定制化功能，引入了插件化機制。Taro-CRN的平台插件基于此，會按Taro工程的檔案結構，基于内置的CRN模闆檔案，生成CRN工程所需的頁面入口及目錄結構，緊接着原本的Taro業務代碼會被插件按目錄塞到這個CRN的殼工程中。
同時平台插件也通過`ctx.registerPlatform`，将CRN與其他平台并作一起，可以像小程式或H5一樣按Taro官方的指令進行開發與建構，提升了Taro開發者的開發體驗。
3.2 Metro Config 插件
那麼怎樣将這樣一個殼子是CRN結構、内嵌Taro業務代碼的項目，打成CRN的最終産物呢？我們選擇在metro建構過程中來處理。CRN架構本身為業務方的metro配置提供了擴充的途徑，我們由此通過metro-config-plugin插入對Taro-CRN項目的額外建構配置。
平台插件在生成殼工程的同時，就會向項目裡植入metro-config-plugin。在metro的解析階段，插件會根據“引用鍊”分析Taro的元件及API的引用，并轉向引用對應的Taro-CRN的元件及API庫。得益于Taro支援完整的React開發體驗，引用轉向後就可以看做一個完整的CRN項目了。與此同時，Taro的架構代碼與依賴就這樣被隔離到打包的CRN項目之外，規避了其他跨端方案普遍存在的包size增大的弊端，這保證了Taro-CRN架構生成項目的性能與直接用RN開發的項目無差異。
除此之外，metro-config-plugin也做了很多友善業務開發的配置。比如Taro開發者熟悉的檔案平台字尾，我們在這一層也實作了根據.crn.xxx的字尾來支援不同端上的業務差異代碼。還有一些攜程内部平台的差異支援，Metro Config插件中也保留了擴充能力。
對于RN與Taro在樣式等寫法風格的轉換，我們選擇在transformer的部分直接繼承Taro-RN樣式相關的transformer，配合我們開發的'code-transformer'一起實作babel轉換與樣式轉譯。這種方案最大的好處就是在開發調試階段，開發者可以直接調試原始Taro代碼，而非轉後的CRN代碼，極大提升開發效率。
3.3 Taro-CRN元件及API庫
對于基礎元件和API，我們嚴格按照Taro官方文檔一一對應提供，這樣極大降低開發門檻，Taro開發者甚至不需要學習RN即可使用。對于現有的Taro項目也可以不用做元件上的改動而直接轉成CRN項目，拓展了架構的使用場景。
大多元件是直接沿用Taro-RN的實作，部分CRN有過優化的元件及API，我們用CRN對應Taro的參數進行了實作。對于部分RN中存在，但在Taro中不存在的元件，我們也開發提供相應的元件為使用者提供便利。
攜程體系下的多平台小程式，做了非常多基于業務上的Taro優化，并提供了相應的API。為了友善攜程主機闆的開發者，Taro-CRN也對部分API做了抹平，進一步降低了使用門檻。
3.4 其他支援
`@ctrip/plugin-publish-crn`是Taro-CRN提供的釋出插件。CRN的釋出是需要指定CRN的代碼倉庫，是以平台插件産出的CRN殼工程需要有獨立的倉庫或分支來存放。引入釋出插件後，可以簡單配置指定所需釋出倉庫或者是開發倉庫下的釋出分支，無需手動轉移，提升釋出效率。
四、接入使用
4.1 Taro項目中接入Taro-CRN
無論是接入建立Taro項目還是現有項目，都可以低成本轉成CRN的項目來進行開發與調試。
a. 引入Taro-CRN平台插件
在Taro項目中引入前面提到的平台插件，`@ctrip/plugin-platform-crn`。另外如果也需要釋出插件的話也可以接入`@ctrip/plugin-publish-crn`。
在Taro的目錄結構中，config是Taro官方提供擴充配置的目錄，在plugins中配置相關的插件依賴。
b. 配置CRN平台參數
在config目錄下，除了插件依賴配置項之外，還有各平台的相關參數配置。CRN作為待轉的平台之一，可以像其他平台一樣，支援在這裡擴充配置。
crn: {
projectName: 'YourProjectName', // 項目名
partner: 'ct', // 内部多平台配置項
publish: {
target: '[email protected]:Group/Project.git',
branch: 'specBranch',
localDir: 'specDir'
}, // 釋出插件相關配置
dependencies: {
"react-native-svg": "~12.1.1",
"babel-plugin-inline-import": "^3.0.0"
}, // 項目所需額外依賴
enableSvgTransform: true // 項目是否需要支援SVG
// 更多其他擴充配置
}
c. 調試與建構
接下來，開發者就可以按照Taro的開發習慣，直接用`taro build --type crn`來建構，或者通過watch來進行開發調試。
這樣使用者在模拟器中，打開紅框對應的位址就可以開啟調試了
d. 攜程主機闆分包小程式的接入
攜程目前的小程式生态為各業務線提供了針對Taro項目的擴充配置，這部分的接入也在Taro-CRN提供了額外的支援，隻需要換成引入`@ctrip/plugin-platform-crn-tarox`版本的平台插件，并增加對應的分包配置，即可按前面的流程進入開發。
4.2 CRN項目中接入Taro-CRN業務元件
在業務開發過程中，有很多場景并不需要完整頁面全部支援跨端，元件上的跨端支援則更為靈活。比如對于一些業務子產品卡片，Taro-CRN支援Taro開發元件并輸出，提供給CRN項目或者Taro項目直接引入，做到元件級的跨端開發。這樣在被接入的CRN項目中隻需要引入對應Taro-CRN的依賴，然後接入額外的metro配置即可。
const TaroCRNMetroConfig = require("@ctrip/metro-taro-crn");
const configBu = {
resolver: TaroCRNMetroConfig.resolver,
transformer: TaroCRNMetroConfig.transformer,
};
module.exports = configBu;
五、架構總結
對于跨端開發，業内其實有提供很多方案，開發者隻有了解各自方案的使用場景，才能做出适合項目的選型。Taro-CRN的适合的場景：
1）适用于已有CRN支援的APP接入Taro方案；
2）适用于需要提供業務子產品同時支援APP與小程式的場景；
3）适用于缺少RN開發經驗的團隊實踐跨端開發。
當然，Taro-CRN架構仍是需要持續地打磨與優化。尤其為應對更加複雜的業務場景，在基礎元件之上可以開發更多适配多平台的業務元件，來進一步的提升開發效率。這也是後續我們與攜程内部多方合作優化的方向之一，以便于更好的促進Taro技術生态在攜程的落地，給與開發者更多選擇的空間。歡迎感興趣的Taro或RN的開發者交流意見。
【推薦閱讀】
- 耗時縮短2/3，Taro編譯打包優化實踐
- 攜程小程式生态之Taro跨端解決方案
- Taro性能優化之複雜清單篇
- 小程式跨端架構實踐之Remax篇
“攜程技術”公衆号
分享，交流，成長