在Svelte中使用外部库chessboard.js

Question

我很难在Svelte中加载chessboard.js库并实现这些事件。例如，REPL是这里。

1. 我正在加载chessboard.js，如下面的片段所示。加载js文件时，将调用函数initBoard()。在此函数中，将实例化板对象。

​

<svelte:head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.js" on:load={initBoard}> </script>
</svelte:head>

​

在initBoard()函数中，我试图按照示例实例化一个棋盘对象。但是，即使调用了initBoard()函数，板也不会出现。

1. 像onDrop() in chessboard.js这样的事件如何最好地在App.svelte中实现？

Answer 1

下面是一个基于来自文档的REPL的“工作”onDrop实例。

您的尝试失败的主要原因是您没有导入jQuery。

上面的REPL仍然使用CDN链接，但理想情况下，您可以将jQuery和Chessboardjs作为模块导入，而不是依赖CDN版本。您还需要解析项目中的图像资产位置。