其他
携程跨端解决方案的新选择：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的开发者交流意见。
“携程技术”公众号
分享，交流，成长