前言

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