如何在Svelte组件中使用jQuery插件（以Footable.js为例）

1. 静态资源存放规则 #

你用到的jquery.js、footable相关js和css文件，全部放到项目根目录的public/assets文件夹下即可，不需要放到src源码目录。rollup默认会把public下的所有静态资源原样输出到打包产物根目录，不需要额外配置rollup。

2. 修复jQuery未定义报错 #

Svelte组件默认会把所有未在模块内声明的变量当作未定义变量处理，哪怕你已经在全局挂载了jQuery，也需要在组件内显式指定从window上取，同时可以增加加载判断解决时序问题：

<script>
import { onMount } from 'svelte';

let el; // table元素
let table; // 声明footable实例变量
// 显式从全局window取jQuery，告诉编译器这是全局变量
const jQuery = window.jQuery;

onMount(() => {
    // 增加加载判断，避免jQuery未加载完成就执行初始化
    if (jQuery) {
        table = jQuery(el).footable();
    } else {
        // 未加载完成时轮询判断
        const timer = setInterval(() => {
            if (window.jQuery) {
                clearInterval(timer);
                table = window.jQuery(el).footable();
            }
        }, 100);
    }
})
</script>

<!-- 别忘了将el绑定到对应的table元素上 -->
<table bind:this={el}>
<!-- 表格内容 -->
</table>

3. 可选优化方案（彻底解决时序问题） #

你可以给app.svelte里的外部脚本标签加上defer属性，确保脚本在文档解析完成后按顺序执行：

<head>
    <link rel="stylesheet" href="assets/footable.metro.css">
    <script src="assets/jquery.js" defer></script>
    <script src="assets/footable-albu.js" defer></script>
</head>

你也可以选择直接通过npm安装依赖的方式引入jQuery和footable，无需手动管理静态资源：

<script>
import { onMount } from 'svelte';
import $ from 'jquery';
window.jQuery = $;
// 导入footable会自动挂载到jQuery实例上
import 'footable';
import 'footable/dist/footable.metro.css';

let el;
let table;

onMount(() => {
    table = $(el).footable();
})
</script>

内容的提问来源于stack exchange，提问作者Alain BUFERNE