svelte

Question

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

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

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

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

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

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

我该如何解决这个问题？

Answer 1

你有两个选择。

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

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

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

将文件保存在您的 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}

Answer 2

导出对象并将文件从 .json 重命名为 .json.js。

port.json.js

export let myJson = {
    name: "hello world"
}

组件：

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

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

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

svelte - reading json file from local folder

json

rollup