2

我正在尝试将一个 SvelteKit 应用程序中的一个苗条组件调用到另一个应用程序，以便我可以在调用者应用程序的 DOM 中呈现它。我创建了一个端点来获取组件，呈现它并将响应发送给调用者，如下所示：

export async function get({ query, page }) {
    const ASSET = (await import("../../assets/myasset.svelte")).default;

    if (ASSET) {
        let renderedAsset = ASSET.render();
        return {
            body: { asset: renderedAsset }
        };
    } else {
        return {
            status: data.status,
            error: new Error(`Could not load ${response}`)
        }
    }
}
组件内容：

<svelte:head>
    <script>
        let div = document.querySelector('.my-class');
        div.addEventListener('click', function () {
            window.alert('IT Works');
        });
    </script>
</svelte:head>
<h1 class="my-class">HELLO</h1>

<style>
    h1 {
        color: blue;
    }
</style>

我在调用方得到这个对象：

{
    "asset": {
        "html": "\n<h1 class=\"my-class s-ZmOKpGJa32Cj\">HELLO</h1>",
        "css": {
            "code": "h1.s-ZmOKpGJa32Cj{color:blue}.s-ZmOKpGJa32Cj{}",
            "map": null
        },
        "head": "<script class=\"s-ZmOKpGJa32Cj\" data-svelte=\"svelte-muoug1\">let div = document.querySelector('.my-class');\n        div.addEventListener('click', function () {\n            window.alert('IT Works');\n        });\n    </script>"
    }
}

我将它注入到调用者的 DOM 中，如下所示：

{@html `<${''}style>${Final.asset.css.code }</${''}style>` }

{@html Final.asset.html}
{@html Final.asset.head}
这很好用，但是当我像这样使用 svelte 的功能时：

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

    onMount(() => {
        let div = document.querySelector('.my-class');
        div.addEventListener('click', function () {
            window.alert('IT Works');
        });
    });
</script>
</svelte:head>
<h1 class="my-class">HELLO </h1>
<style>
h1 {
color: blue;
}
</style>
它抛出错误说：Uncaught SyntaxError: Cannot use import statement outside a module。如何使用 svelte 的功能（svelte 代码/内置功能/水化部分）并将其导出以供另一个应用程序使用？

4

0 回答 0