如何开发一个跨框架组件？

前言

你有这种感觉吗？几个大的前端框架把世界割裂了。
我们会为你用Vue，我用React而争吵，甚至有鄙视链情况发生。
争吵的原因有很多，我这篇文章主要是从组件的角度阐述。

需求

如果你身处一个中台部门，需要提供一些组件给各业务方用，
那么，你如何完成这一任务呢？

如果你封装一个Vue2的组件出来，有的业务方用的Vue3，
最终会因兼容问题无法引入你的组件。

相反的，如果你封装的是一个Vue3组件，
而部分业务方还在使用Vue2，对方无法引入Vue3组件，你也不能要求业务方再引入一下Vue3吧。

即使没有版本问题，如果你封装的是Vue组件，而部分业务方使用的是React，
你也会遭遇对方无法使用你的组件的问题。

也就是说，基于特定前端框架开发的组件，只能让使用相同技术栈的业务方使用。

因此，为了应对业务方不同的技术架构，该怎么办呢？

很明显不应该既封装一个Vue2组件，又封装一个Vue3或者React组件。

解决方案

原始JS实现，涉及大量DOM操作。

缺点：

• 大家可能框架用久了，对DOM操作的API已经不熟悉了。
• 开发效率较低

web components

缺点：

• 还不是所有浏览器都兼容；
• API也没那么熟悉；

优点：

• 倒是有stencil这样的工具，帮我们处理了兼容性问题，将组件最终打包成web components的形式，
  而且它是一个挺成熟的一整套方法，从开发到构建。
• 其他类似工具lit.js和skate.js也不错。

组件框架间转换

比如把Vue组件打包成React可用的产物之类的工具，但是因为我研究较少，跳过。

基于Svelte.js开发组件

Svelte.js是一款新型框架，youyuxi在最近的一些前端大会上也提到了，它可以把组件打包成js class的形式。
这就天然满足了我们的需求。

我们可以用svelte.js开发跨框架组件。（因为它的打包产物是无框架的。）

也就是说，基于Svelte.js开发的组件，可以直接给使用Vue/React/Angular/Svelte技术栈的团队用，
而不需要引入Svelte.js，以及有一些可能的引入报错。

基于Svelte.js的跨框架组件库starter

实际上我们可以用svelte把element ui或antd里面的组件都重写一遍，构建一个跨框架组件库出来。
虽然这部分工作应该已经有人做了。

考虑到开发一个跨框架的特定业务组件，还是需求很普遍的，所以我写了一个
基于Svelte.js的跨框架组件库模板项目，你可以直接git clone该仓库，
里面已经配置好了很多东西，比如build的配置项，css预处理已安装好了less，
也引入了unocss等。

希望它是一个开箱即用，对开发者有帮助的跨框架组件库模板；

附上地址svelte-ui-template

最后

我也为这个模板项目的使用，以及跨框架组件库录制了一个视频，发在B站。
大家可以去看一下。

视频地址

我是飞叶，欢迎关注我的B站和GitHub。