携程小程序生态之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跨端解决方案

文章插图
图5 自动化CI/CD
接下来,将进行Taro项目的合并工作:将各个Taro模块的代码切换至指定版本,获取各个Taro模块中配置的分包路径,并将相关配置文件和分包目录下业务代码合并到Taro壳工程中 。
 
Taro项目合并完成后,便会编译成指定小程序类型的代码 。值得一提的是,Taro基础壳工程既是Taro项目壳又是开发模版,它提供了统一的Taro项目结构和编译方式,也是Taro模块能灵活组合的原因所在 。
 
最后,将Taro项目的编译产物与相应类型的小程序原生代码进行合并,即可获得完整的Taro小程序项目 。将项目代码上传到小程序后台,则标志着一整套项目发布流程的顺利完成 。
 
四、总结
 
目前,Taro跨端解决方案已支持一套代码运行在5类小程序(微信、支付宝、字节跳动、百度、快手)平台 。使用此方案进行开发的Taro小程序项目灵活度和复用性很高,可以按需选用Taro模块组合成一个完整的Taro项目 。
 
此外,我们还提供了配套的脚手架工具、仓库管理、版本管理以及pipeline自动化方案,极大提升了小程序的开发、测试和发布效率 。今后我们将继续完善小程序生态系统,为解决业务痛点不断孵化出更多的解决方案 。
 
【作者简介】
携程前端框架团队,为携程集团各业务线提供优秀的Web解决方案,当前主要专注:新一代研发模式探索,Rust构建工具链路升级、Serverless应用框架开发、在线文档系统开发、低代码平台搭建、适老化与无障碍探索等 。




推荐阅读