如何导出对象的数组的JSON文件，然后导入使用ES6 [复制]

Question

这个问题已经在这里有一个答案：

• How to import a json file in ecmascript 6? 7个回答

我有一个对象在一个JSON文件的数组。我想这个文件导入到另一个文件，所以我可以引用一个简单的数据作出反应的项目。

我已经试过出口默认的各种组合，并命名为出口，但是当我将它保存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文件，我有出口它使用的问题。

问：如何导入“以.json”文件（不是“.js文件”）的对象文件使用ES6？

更新我已经成功地使其在创建反应的应用内环境中工作，我离开了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

导入不担任*/javascript是使用fetch()得到文件，然后export结果作为default和import一个data URL文件的默认HTML标准禁止一个解决办法

<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