我一直在尝试将 ace 编辑器 ( https://ace.c9.io/ ) 加载到我的 Sapper 应用程序中。当我在 Sapper 路由中加载它时,我成功地将它加载到脚本标记中,但是当我尝试在 Svelte 组件中执行相同操作时,该组件再次由路由呈现,我收到错误:
ace 未定义
这是我拥有的代码,如果它是 Sapper 路线,则可以正常工作:
<div id="editor"> def main():
return sum(range(1,100))
</div>
<script src="https://pagecdn.io/lib/ace/1.4.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.resize()
</script>
最佳答案
当我第一次开始使用 Svelte2 并将其重构为 Svelte 3 时,我拼凑了一个组件来加载外部遗留 JS 库。
// LibLoader.svelte
<svelte:head>
<script bind:this={script} src={url} />
</svelte:head>
<script>
import { onMount, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let url;
let script;
onMount(async () => {
script.addEventListener('load', () => {
dispatch('loaded');
})
script.addEventListener('error', (event) => {
console.error("something went wrong", event);
dispatch('error');
});
});
</script>
// MyComponent.svelte
<LibLoader url="myExternalLib.js"
on:loaded="{onLoaded}" />
<script>
import LibLoader from './LibLoader.svelte';
function onLoaded() {
myExternalLib.doStuff();
}
</script>
这没有经过彻底测试,一次性可能不保证单独的组件;但基本上这种方法绕过了 Rich Harris 提到的时间问题。这些天
import
如果可用,显然是更好的选择。
关于javascript - 如何在 Svelte/Sapper 中加载外部 JS 库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59629947/