我不完全确定这是否可行，但我想在运行时在 Svelte 中动态加载组件的模板。基本上下载一些用户定义的模板并使用它在运行时构建组件。这实际上可能吗？
最佳答案
您必须包含 Svelte 编译器并使用它来编译模板。您可以查看REPL's repository如何设置它。
REPL 执行两个主要步骤:
- 将代码转换为仍引用
'svelte/internal'的原始组件 - 捆绑组件，以便通过 Rollup 包含所有引用的代码
第一步很简单，只需执行以下操作:
import { compile } from 'svelte/compiler';
const { js, css } = compile(template, {
filename: 'Component.svelte',
format: 'esm',
});
console.log(js.code, css.code);
捆绑有点复杂(请参阅其 worker's code )。但是，您可以使内部可供导入使用，然后直接运行代码。
例如使用 unpkg.com 进行测试并将代码放入 iframe.srcdoc:
const code = `
${js.code.replace(
'svelte/internal',
'https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9be8edfef7effedba8b5afa2b5ab" rel="noreferrer noopener nofollow">[email protected]</a>/internal/index.mjs',
)}
new Component({ target: document.body });
`;
srcdoc = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Svelte App</title>
<${''}style>${css.code}</${''}style>
</head>
<body>
<${''}script type="module">${code}</${''}script>
</body>
</html>
`;
(标签使用 ${} 进行分割，否则 Svelte 解析器将会崩溃。)
您还可以通过新的模块脚本将代码直接插入文档中，您只需以某种方式识别目标元素，例如通过生成唯一的随机 ID。
您可以执行以下操作来直接使用生成的代码:从 Blob 动态导入脚本。
const componentSrc = URL.createObjectURL(
new Blob([code], { type: 'text/javascript' })
);
const { default: Component } = await import(componentSrc);
URL.revokeObjectURL(componentSrc);
new Component({ target: ... });
如果您在沙盒 iframe 之外使用该组件，您应该意识到您面临的 XSS 风险。
关于javascript - 在 Svelte 组件中动态加载模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73338240/