前言你有这样的感觉吗？几大前端框架瓜分天下。我们会争论你用Vue我用React，甚至产生鄙视链。吵架的原因有很多。本文主要从组件的角度进行讲解。需求如果你在一个中台部门，需要为各个业务方提供一些组件，你是如何完成这个任务的？如果你封装了一个Vue2的组件，而一些业务方使用的是Vue3，最终会因为兼容性问题无法导入你的组件。反之，如果你封装了一个Vue3组件，有的业务方还在使用Vue2，对方就无法引入Vue3组件，你也无法要求业务方再次引入Vue3。即使没有版本问题，如果你封装了Vue组件，有的业务方使用了React，你也会遇到对方无法使用你的组件的问题。换句话说，基于特定前端框架开发的组件只能供使用相同技术栈的业务方使用。那么，为了应对业务端不同的技术架构，我们应该怎么做呢？显然，你不应该同时封装一个Vue2组件和一个Vue3或React组件。解决方案是涉及大量DOM操作的原始JS实现。缺点：可能长期使用框架，不熟悉DOM操作的API。开发效率低。Web组件的缺点：不是所有的浏览器都兼容；API不是很熟悉；优点：有stencil之类的工具，帮助我们处理兼容性问题，最后将组件打包成web组件的形式，而且是一套非常成熟的方法，从开发到构建。其他类似的工具lit.js和skate.js也不错。有组件框架之间转换的工具，比如将Vue组件打包成React可用的产品，但因为我研究较少，略过。基于Svelte.js开发组件Svelte.js是一种新型的框架，游鱼溪在最近的一些前端会议上也提到了。可以将组件打包成js类的形式。这自然满足了我们的需求。我们可以使用svelte.js开发跨框架组件。（因为它的打包产品是无框架的。）换句话说，基于Svelte.js开发的组件可以直接被使用Vue/React/Angular/Svelte技术栈的团队使用，而无需引入Svelte.js，并且可能存在一些导入错误。基于Svelte.js的跨框架组件库起步器其实我们可以使用svelte重写elementui中的所有组件或者antd构建一个跨框架的组件库。虽然这部分工作应该已经完成??了。考虑到跨框架具体业务组件的开发还是很普遍的，所以我写了一个基于Svelte.js的跨框架组件库模板项目。直接gitclone仓库即可，里面已经配置了很多东西。比如build配置项，csspreprocessing少安装了，unocss也引入了。希望是一个开箱即用的跨框架组件库模板，对开发者有帮助；附上地址svelte-ui-template最后，我还录制了一段关于这个模板工程和跨框架组件库的使用视频，发在了B站，大家可以看看。视频地址我是飞野，欢迎关注我的哔哩哔哩和GitHub。
