基于svelte开发一款框架无关的npm组件一款问题反馈插件，基于 Svelte + Typescript 开发，支持个

前沿

在公司做项目的过程中，针对可复用的业务逻辑，我们往往会抽取公共组件，对于高度复用无业务耦合的功能性组件，我们会开发npm组件的形式，但是一般我们会针对开发者的框架来开发对应的组件版本，比如：Antd 不仅提供的有React版本，同时针对Vue用户还会提供Vue版本的组件。

最近我做了一款用户反馈组件feedback，起初是开发的React版本，但是考虑到有的项目是用的Vue框架，后来我干脆直接把整个React框架都集成进去了，这样的好处是，不论你是什么框架，都可以通过非常简单的sdk集成到项目中，但是，很快，问题就出现了，因为React包太大了，因为一个非常小的功能，而导致加载过慢，所以，我又从新思考，这个组件如何实现，难道真的要开发两个组件包分别给React和Vue项目用吗？

最终我选择了svelte来开发这个组件，最终打包后，只有6.88kb，体积直接缩小n倍，加载及其顺滑，今天分享一下这个组件。

效果

初始化sdk后，会在页面右侧生成一个反馈图标，点击图标会滑出一个反馈模块。

代码仓库

开源地址：github.com/JackySoft/f…

NPM地址：www.npmjs.com/package/ife…

使用

为了满足开发者个性化的需求，我们针对图标、主题、提交接口、上传接口全部做了配置，可以按需添加。

在 Vue 或 React 入口导入模块和样式

import feedback from 'ifeedback'
import 'ifeedback/dist/style.css'

初始化

feedback.init({
  // 定制悬浮图片样式
  style?: string;
  // 悬浮图片
  icon?: {
    url: string
    width: number;
    height: number
  }
  //上传配置
  uploadOption: {
    api: 'http://www.xxx.com/api/upload',
    fileSize: 5,
    data: {
      a: '1001'
    }
  },
  // 提交配置
  submitOption:{
    api: 'http://www.xxx.com/api/submit',
    data:{
      name: 'jack'
    }
  },
  // 初始化钩子
  onMount?: () => void
  // 点击icon事件
  onClickIcon?: () => void
  // 点击关闭按钮
  onClickClose: () => void,
  // 点击提交回调
  onClickSubmit?: () => void
})

注意：style只能为字符串格式，例如：style:"right:15px;bottom:60px"

主题说明：

如果需要定制主题色，需要定义如下变量：

:root{
    --feed-theme-color: #1e80ff;
    --feed-theme-hover-color: #1171ee;
}

思考

我们希望开发的组件与框架无关，最终只需要初始化sdk就能直接使用，同时开发的过程中还能尽可能享受一些框架带来的优势。如果用传统的DOM和JS去实现，那对于数据赋值这些，都比较繁琐，然后svelte框架的模板渲染语法非常简单，而且它的编译发生在构建阶段，最终会编译成纯javascript，所以运行的过程中，开销极小，跟我的期望值非常匹配。

简洁语法

<script>
    let name = 'world';
</script>

<h1>Hello world!</h1>

开发体感还是非常舒服的，非常简洁的语法。