json - svelte - 从本地文件夹读取 json 文件

Question

我的 svelte 应用需要从公用文件夹中读取 json 文件。我完全按照 this link 中的 rollup 设置进行操作，然后将 json 添加到我的 app.svelte 中:

import * as port from '/port.json';

port.json 与 index.html 位于公用文件夹中。但我不断收到此错误:

main.js:11 Uncaught ReferenceError: port is not defined at main.js:11

我从 Terminal 收到这条消息，我不确定它是什么意思:

(!) Missing global variable name Use output.globals to specify browserglobal variable names corresponding to external modules /port.json(guessing 'port')

我该如何解决？

Answer 1

你有两个选择。

1. 将文件移动到您的 src/ 文件夹，并使用 Rollup 将其与应用程序的其余代码捆绑在一起。这是您需要 @rollup/plugin-json 来捆绑 json 文件的地方。然后您可以像这样导入它:

<script>
    import json from './port.json';
</script>

<p>{JSON.stringify(json)}</p>

1. 将文件保存在您的 public/ 文件夹中，并在运行时使用 fetch 检索它。

<script>
    let fetchJson = fetch('port.json').then(res => res.json());
</script>

{#await fetchJson}
    <p>Loading JSON</p>
{:then result}
    <p>{JSON.stringify(result)}</p>
{/await}