Svelte: application/ld+json

Question

使用以下代码：

<svelte:head>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://filestar.com",
"logo": "https://filestar.com/logo-512.png"
}
</script>
</svelte:head>

获取：

[svelte-preprocess] Error transforming 'ld+json'.
Message:
Cannot find module './transformers/ld+json'
Stack:
Error: Cannot find module './transformers/ld+json'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Promise.resolve.then (C:ReposFilestar-Websiteweb-vnextnode_modulessvelte-preprocessdistutils.js:112:61)

我在这个github线程中尝试了这些建议，得到了相同的结果：https://github.com/sveltejs/svelte/issues/2438

Answer 1

看起来这与svelte预处理有关。尝试添加preserve: ['ld+json']选项。

Answer 2

对于任何登陆这里的人，Rich的答案都会为您指明正确的资源。

Sapper对我有用的地方：

// rollup.config.js
// ...
import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
preserve: ['ld+json'],
// ...
});
export default {
client: {
plugins: [
svelte({
preprocess,
// ...
}),
},
server: {
plugins: [
svelte({
preprocess,
// ...
}),
],
},
};

<!-- index.svelte -->
<script>
let jsonld = {
"@context": "http://schema.org",
"@type": "...",
"...": "..."
};
jsonld = JSON.stringify(jsonld);
</script>
<svelte:head>
{@html `<script type="application/ld+json">${jsonld}</script>`}
</svelte:head>

附加说明：使用prettier和prettier-plugin-svelte，svelte组件会得到不需要的更改。执行以下操作解决了我的问题。

<!-- index.svelte -->
<script>
let jsonld = {
"@context": "http://schema.org",
"@type": "...",
"...": "..."
};
jsonld = JSON.stringify(jsonld);
let jsonldScript = `<script type="application/ld+json">${jsonld +
"<"}/script>`;
</script>
<svelte:head>
{@html jsonldScript}
</svelte:head>

Answer 3

根据这个注释，这里有另一种方法。

<script>
const schema = {
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://filestar.com",
"logo": "https://filestar.com/logo-512.png"
}
</script>
<svelte:head>
{@html 
`
<script type="application/ld+json">
${JSON.stringify(schema)}
</script>
`
}
</svelte:head>