作者｜携程前端框架团队为携程集团各业务线提供优秀的web解决方案。目前主要围绕：新一代研发模式探索、Rust构建工具链接升级、Serverless应用框架开发、在线文档系统开发、低代码平台搭建、老龄化无障碍探索等。1.摘要与携程接入小程序平台的增加，前端需要负责的终端越来越多，研发成本也将成倍增长。为解决一套代码多终端运行的需求，携程小程序框架不断调整升级，携程Taro跨终端解决方案逐渐形成。2.背景2.1小程序现状近年来，业界推出了各种小程序平台，每个小程序平台都会提供专门的原生小程序DSL。这些DSL之间或多或少存在差异，这意味着一类小程序DSL编写的代码不能直接在其他小程序平台上复用，导致开发和维护成本成倍增加。2.2业务现状目前，携程支持的小程序业务涉及多个小程序平台。如果全部使用平台自带的DSL开发，开发者需要同时开发和维护至少5个活跃版本。开发任务重，代码维护困难。另外，每增加一个新类型的小程序入口，开发者都要重新编写原有的业务逻辑，不仅重复了工作内容，也严重影响了业务执行的速度。为此，一套代码运行在多终端上的需求迫在眉睫。值得注意的是，携程已经打通了多个平台的小程序，使用多端统一开发框架从头开始开发小程序代码，既浪费研发资源，也不现实。我们需要考虑如何在携程现有小程序代码的基础上，利用跨终端框架开发新服务，逐步切换原有代码，实现多终端统一开发方案的平滑融合。2.3解决方案为了解决以上问题，我们开发了携程的Taro跨终端解决方案。开发者只需使用Taro框架编写一套代码，即可获得多平台良好运行的小程序项目。此外，程序还提供了仓库管理、辅助脚手架、编译功能扩展和流程优化等功能。3.Taro跨终端方案设计3.1技术选择为了在保留原有代码的前提下实现一套代码多终端运行，我们对市面上的跨终端开发框架进行了研究，最终决定使用Taro3作为携程小程序的跨端框架。主要原因是Taro3有以下四大优势：框架稳定性高支持平台广泛支持React语法规范开发支持Taro和原生混合开发3.2整体架构设计携程小程序随着业务发展，多平台化趋势以及跨端技术的不断演进，逐渐形成了一套多平台多路复用的Taro跨端解决方案。图1项目工程结构图携程小程序的项目工程结构图如图1所示，上半部分为跨端复用层。本层项目代码基于Taro框架开发。多个Taro模块可以灵活组合成一个完整的Taro项目；从图片的下半部分可以看出，Taro项目是完整的小程序项目的模块之一，Taro项目的运行需要依赖小程序原有的shell项目。整个Taro项目按照插件化的设计思路组织代码，由多个独立的Taro模块和一个Taro基础shell项目组成。3.3Taro模块的插件设计首先，携程小程序是多个团队共同开发的项目，跨团队协同开发时经常会出现代码冲突、文件覆盖等问题。因此，需要思考如何通过合理的项目结构从根本上解决这些问题，保证多团队并行开发的效率。考虑到可以采用模块化的理念，将项目代码按照业务线的类型拆解成多个子模块，约定文件放置和引用规则，保证每个子模块的源代码文件-模块可以完全隔离。但是，采用模块化的开发方案，所得到的Taro项目几乎没有可扩展性，Taro模块也无法快速方便地复用。如何提高Taro模块的灵活性，让任意一个或多个Taro模块组合起来得到一个完整的Taro工程，并能合并到小程序原有的shell工程中正常运行？为了解决以上问题，我们将插件化的设计思想进一步应用到Taro跨端方案中，提供了定制化的Taro基础shell工程和一套开发规范。开发者需要以Taro基础shell项目为开发模板，按照规范进行业务开发。Taro所有模块在本地开发或发布时均按照统一标准编译集成，在不破坏原有项目结构的情况下实现灵活性。组合使用的目标。接下来，我们将从项目组成及开发规范、仓库管理、开发架构、运营方案等方面详细讲解Taro的跨终端解决方案。3.4项目结构及开发规范Taro基础shell项目由Taro官方模板项目扩展而来，并在内部添加自定义编译配置、Plugins和基础组件类。如图2所示，Taro基础shell工程只包含了常用基础功能相关的文件，可以抽象为三类内容：编译配置文件、扩展编译流程的Plugins、页面基类。图2Taro基本shell工程结构示意图开发者在开发Taro模块时，需要关注三块内容（扩展配置、工程文件、页面文件，见图2），并遵循以下规范进行开发：1）主包的大小直接影响小程序的启动性能，所以我们提出了“非必要不进入主包”的原则：除了启动小程序需要的文件外，tabBar页面和公共基本文件，所有其他文件应该拆分到子包中间。Taro模块也必须遵循这个原则。开发者应将所有业务代码放在自己的分包目录下，只在项目文件app.config.js中添加分包页面配置。2）为避免合并项目时业务线之间文件重叠或页面路径冲突，分包页面路径前缀统一约定为“pages/业务线英文缩写”，结合原则使用“如无必要，请勿进入主包”，可以有效隔离各业务线的源代码文件。3）为了保证Taro模块的业务相关内容（包括依赖包）完全放在子包路径下，不占用主包大小，我们提供了commonModule的解决方案：在引用第三方依赖之前包，开发者需要在本地预安装。编译操作将需要引用的内容打包成一个或多个放在分包中的commonModule文件，然后从预编译产物（commonModule）中引用需要的模块。另外，还可以通过commonOrigin方案获取依赖包的源码。这时候需要的依赖包会被复制到开发者指定的文件夹中。3.5仓库管理首先，Taro项目采用仓库开发的模式，将各个业务线的Taro模块存放在单独的git仓库中。将Taro模块存放在不同的仓库中，可以保持各个业务仓库的代码提交操作独立。其次，我们使用gitsubmodule工具，将Taro各个模块所在的仓库和Taro基础shell工程仓库作为子目录包含到整个Taro项目的发布仓库中，并为发布仓库和发布仓库建立父子仓库关联。多业务仓库。建立仓库关联后，Taro项目可以借助gitsubmodule的子模块获取功能，快速克隆自己需要的Taro模块源码，随时拉取各个业务仓库的最新代码。再次，由于gitsubmodule允许一个仓库为多个仓库的子目录，也就是说可以选择不同的Taro模块，可以将它们的仓库组合成一个新的发布仓库，结合携程小程序中各个小程序需要的Taro模块managementplatform的配置可以配合使用，达到根据配置动态导入Taro模块的效果。后续通过组合多个Taro模块，可以快速得到包含多个业务线的各种Taro项目，从而提高Taro模块在不同场景下的复用性。图3仓库管理和模块复用然后，将Taro项目作为完整小程序的bundle，将Taro项目的编译产物与小程序的原始shell项目合并，得到Tarohybrid开发的完整小程序代码。如图3所示，通过组合Taro模块可以得到不同功能的Taro项目，再将Taro项目与不同类型的小程序原生shell项目组合，可以轻松得到多个Taro混合开发的小程序项目。3.6开发运行框架开发者只需安装miniTools脚手架，执行初始化命令行，即可快速获取Taro模块开发模板和小程序原始shell工程，完成工程初始化。开发者在开发Taro模块时，需要按照开发规范，在分包目录下添加文件，编写业务代码。编写过程中，只需要执行编译命令，将本地开发的源代码编译集成到小程序原有的shell工程中，得到包含Taro模块内容的完整小程序代码。图4本地开发流程结合以上本地开发流程，Taro跨终端解决方案提供的具体功能和优化工作如下：1）Taro模块直接引用小程序原生shell工程中的模块。提供@/miniapp标识，用于引用小程序的完整项目根目录。同时，编译时会识别代码中的标识符，动态计算和修改引用路径。开发Taro模块时，只需用@/miniapp拼接文件的相对路径，即可直接引用小程序完整项目根目录下的文件。2)扩展页面配置项，提供设置自定义组件嵌套层级的功能。开发者可以在页面配置文件中添加自定义组件的嵌套层级配置。编译时会调取页面配置文件的内容，总结并设置Taro项目中使用的自定义组件的嵌套层级。3）根据分包路径动态生成splitChunks。为了防止公共文件打入主包（占用主包大小），编译时会读取Taro模块配置的分包路径，动态生成splitChunks。该方案可以将分包中使用的公共文件分离到分包中，然后为分包中的所有页面添加对分包公共文件的引用。4)提供扩展配置文件，允许自己添加alias和externals配置，方便开发者自定义不需要打包的目录别名和依赖。5)提供模块分析功能，开发者可以更方便的查看每个chunk中包含了哪些文件6)使用混合模式进行打包，然后自动将编译后的产品移动到小程序原有的shell工程中，并将分包配置添加到中小程序项目配置。这一步是将Taro项目编译产物与携程原有的小程序代码结合成一个完整的Taro混合小程序项目。在开发规范的作用下，Taro模块的分包路径按照各个业务线进行隔离，每个Taro模块的文件都严格放在自己的分包路径中，所以只需要将公共的基础文件放在项目根目录下，分包内容迁移到各自分包目录下，代码合并即可顺利完成。3.7项目发布我们使用webhooks实现Taro项目的流水线迭代开发。当Taro模块提交修改时，会触发Taro项目发布仓库的pipeline。Taro项目发布仓库流水线的主要工作流程如下：首先，Taro项目会拉取所有子仓库的最新代码。接下来，小程序管理平台会获取Taro模块列表和当前Taro项目使用的对应的release版本号，并根据需要拉取各个Taro模块的release代码到docker中。至此，Taro项目所需的源码已经全部获取。图5自动化CI/CD接下来合并Taro项目：将各个Taro模块的代码切换到指定版本，获取各个Taro模块中配置的分包路径，合并分包目录下的相关配置文件和业务。代码合并到Taroshell项目中。Taro项目合并后，会编译成指定小程序类型的代码。值得一提的是，Tarobasicshell项目既是Taro项目的shell，也是开发模板。它提供了统一的Taro工程结构和编译方式，这也是Taro模块可以灵活组合的原因。最后，将Taro工程的编译产物与对应类型小程序的native代码合并，即可得到完整的Taro小程序工程。将项目代码上传到小程序后台，标志着一整套项目发布流程圆满完成。4.总结目前，Taro的跨端解决方案已经支持一套代码运行在5类小程序（微信、支付宝、字节跳动、百度、快手）平台上。使用该方案开发的Taro小程序项目具有高度的灵活性和可复用性，可以根据需要选择Taro模块组成一个完整的Taro项目。此外，我们还提供配套的脚手架工具、仓库管理、版本管理、流水线自动化解决方案，大大提高小程序开发、测试、发布的效率。未来，我们将持续完善小程序生态，孵化更多解决业务痛点的解决方案。
