其他
携程跨端解决方案的新选择:Taro-CRN
作者简介
李羽,携程高级前端研发工程师,专注前端跨平台框架领域的开发与研究。Hyme,携程前端研发经理,专注前端小程序/H5领域的开发与研究。Chao,携程前端研发经理,关注前端跨平台领域与前端研发效率提升。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也做了很多方便业务开发的配置。比如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`。
在config目录下,除了插件依赖配置项之外,还有各平台的相关参数配置。CRN作为待转的平台之一,可以像其他平台一样,支持在这里扩展配置。
crn: {
projectName: 'YourProjectName', // 项目名
partner: 'ct', // 内部多平台配置项
publish: {
target: 'git@Host: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的开发者交流意见。
“携程技术”公众号
分享,交流,成长