如何在 JSON 文件中导出对象数组，然后使用 es6 导入 [重复]

Question

我在 json 文件中有一个对象数组。我正在尝试将此文件导入另一个文件，以便可以在一个简单的 react 项目中引用数据。

我尝试了导出默认和命名导出的各种组合，但是当我保存 JSON 文件时，它总是报错。这是我想要实现的目标：

（文件1.json）

    [
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      }
    ]

文件2.js

import data from '.\file1.json'

console.log(data.id);

我遇到的问题是我的 JS 文件中没有看到任何错误，但 data.id 值没有显示。但是在我的 JSON 文件中，我在导出它以供使用时遇到问题。

问题：如何使用 es6 导入带有 objects 文件的“.json”文件（不是“.js”）？

更新我设法让它在 create-react-app 环境中工作，我将 json 文件作为对象数组保留，然后在 js我使用的文件“从'./xyz'导入xyx；”

这对我有用，重复标记的帖子中没有提到这个答案，所以我认为它应该有自己的答案 - 希望这对其他人有帮助。

Answer 1

由于您存储为 JSON extension，因此您不应使用 export const data = ...

你应该直接存储数据

xyz.json

[
      {
        "userId": 1,
        "id": 1,
        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
      }
    ]

JSON

For demo you can see this

或者您可以将扩展名设置为.js

const export data = ...some data

在需要的地方

import {data} from '../filepath'

Answer 2

默认 HTML 标准禁止导入不作为*/javascript 的文件的一种解决方法是使用fetch() 获取文件，然后export 结果为default 和import data URL

<script type="module">
  (async() => {
    let {default:sample} = await import(`data:application/javascript,${encodeURIComponent('export default ')}${JSON.stringify(await(await fetch('file.json')).json())}`);
    console.log(sample);
  })()
</script>

plnkr

另见ES6 modules in local files - The server responded with a non-JavaScript MIME type