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

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

需求

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

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

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

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

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

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

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

解决方案

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

缺点：

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

缺点：

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

优点：

stencil.js

倒是有stencil这样的工具，帮我们处理了兼容性问题，将组件最终打包成web components的形式，而且它是一个挺成熟的一整套方法，从开发到构建。

组件框架间转换

比如把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​​。