如何开发一个跨框架组件()

前言 你有这种感觉吗?几个大的前端框架把世界割裂了。
我们会为你用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。

    推荐阅读