svelte - 渲染预编译的 svelte 组件

Question

如何渲染使用 svelte.compile() 手动编译的组件？我正在编译这样的组件:

<script type="module">
    import * as svelte from 'svelte/compiler';

    var { js: Awesome } = svelte.compile(svelteComponentCode, {
        generate: 'dom', //can use 'ssr' too
        hydratable: true,
        filename: 'Helloworld.svelte'
    });
</script>

我可以访问 Awesome.code，它是从 svelte 组件编译的 JS，我想用它来将组件渲染到 DOM。

Answer 1

我知道这是一个老问题了，但我认为您需要使用与 Svelte REPL 中相同的技术，您需要使用代码创建一个 Blob，然后加载并挂载它。

const { code } = svelte.compile(inputCode).js;

const blob = new Blob([code], { type: 'text/javascript' });
const url = URL.createObjectURL(blob);

import(url).then(({ default: Component }) => {
  new Component({
    target: document.body, // or whatever your target is
  });
});

编译通常在 webworker 中完成，以使其脱离主 UI 线程。

有一个关于构建准系统 REPL 的精彩视频，可以用作学习“在浏览器中”精简编译的好方法；这也使用汇总的浏览器版本。那是因为您的 svelte 组件可能会导入其他代码。

https://www.youtube.com/watch?v=S3j1fLzC8_E

还有另一个真正相关的答案 here虽然它更多地是关于节点构建步骤而不是浏览器构建体验，但它更加充实并解释了更多关于组件构建期间导入链接的信息。无论如何，它可能会有一些用处。

请记住，浏览器无法访问您的文件系统，因此在浏览器中构建/捆绑应用时需要从服务器加载导入。