使用Svelte开发VUE和React都支持的自定义cell组件上一节我们学习了如何使用Svelte封装WebComponents来实现跨页面使用电子表格组件。Svelte封装的组件可以跨框架复用，好处也很明显：1.使用框架开发，更容易维护2.发布后没有框架依赖，其他场景可以使用3.发布的Web组件体积小，这一独特的优势使得Svelte在组件封装方面有着特殊的优势。之前我们学习了如何在不同页面之间自由使用电子表格组件。那么如果真的要跨不同的框架使用同一个表格组件，该怎么办呢？那么接下来我们会按照上一节的内容，继续为大家介绍电子表格组件封装后，如何让电子表格组件在原生环境以及跨框架的各种框架中可用。跨框架组件开发1.使用Svelte开发AutoCompleteWebComponentSvelte如今生态丰富。通过搜索，我们可以找到一个Svelte开发的AutoComplete组件。地址是：https://github.com/pstanoev/simple-svelte-autocomplete。我们一起fork这个项目，做一些简单的修改，让他生成一个WebComponent（这里需要大家注意三方构建协议的内容是否包括运行、修改和发布）。1、修改src/SimpleAutocomplete.svelte，在header中添加：，修改代码中的items，添加一些默认信息：//用户可以选择的items列表从出口让项目=[];items=["白色","红色","黄色","绿色","蓝色","黑色"];2.修改rollup.config.js中plugins中配置customElement设置的结果For:importcommonjsfrom'@rollup/plugin-commonjs';从“@rollup/plugin-node-resolve”导入解析；从“rollup-plugin-svelte”导入svelte；从'./package.json'导入pkg；exportdefault[{input:'src/SimpleAutocomplete.svelte',output:[{file:pkg.module,format:'es'},{file:pkg.main,format:'umd',name:'Autocomplete'}],插件:[svelte({customElement:true,}),commonjs(),resolve()]}];3.运行npmrunbuild打包生成WebComponent运行后会在根目录生成index.js和index.mjs两个文件，js是umd的支持，mjs是ES版本，我们直接使用UMD稍后支持的index.js文件。二、无框框架面板测试
引入生成的index.js创建AutoComplateCellType，在cell中设置，效果如图：3.导入AutoComplateWebComponent这里注意打包的index.js引入后会报关于TS的错误，删除文件中以下内容即可//eslint-disable-next-line@typescript-eslint/no-non-null-assertion在React中也是一样的，这里不再赘述。如果大家有其他的想法和实现思路，欢迎大家评论交流。
