Question

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

我尝试了导出默认值和命名导出的各种组合，但是保存时JSON文件总是在抱怨。这是我要实现的目标：

（File1.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"
      }
    ]

File2.js

import data from '.\file1.json'

console.log(data.id);

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

问题：如何使用es6将“ .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

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

2 个答案: