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

Question

我的svelte应用程序需要json从公共文件夹中读取文件。我完全按照此链接rollup中的设置进行操作，然后添加到我的：jsonapp.svelte

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

port.json与 一起位于公共文件夹中index.html。但我不断收到此错误：

main.js:11 未捕获的引用错误：端口未在 main.js:11 处定义

我收到这条消息，但Terminal我不确定它的含义：

(!) 缺少全局变量名称使用output.globals指定与外部模块/port.json对应的浏览器全局变量名称（猜测'port'）

我该如何解决这个问题？

Answer 1

你有两个选择。

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

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

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

2. 将文件保存在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}