共计 1201 个字符，预计需要花费 4 分钟才能阅读完成。
前言
你有这种感觉吗？几个大的前端框架把世界割裂了。
咱们会为你用 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。