es6模块的实现，如何加载一个json文件

我正在从https://github.com/moroshko/react-autosuggest实施一个例子

重要的代码是这样的：

import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, eg: // ['Mentone', 'Mill Park', 'Mordialloc'] setTimeout(() => callback(null, suggestions), 300); } 

这个复制粘贴的代码（工作），在我的项目中有一个错误：

 Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components 

如果我拿出preffix json !:

 import suburbs from '../suburbs.json'; 

这样我在编译时就没有错误（导入完成）。 但是，当我执行它时，我得到错误：

 Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function 

如果我debugging它，我可以看到郊区是一个objectc，而不是一个数组，所以过滤function没有定义。

然而在这个例子中，注释build议是一个数组。 如果我重写这样的build议，一切工作：

  const suggestions = suburbs var suggestions = [ { 'suburb': 'Abbeyard', 'postcode': '3737' }, { 'suburb': 'Abbotsford', 'postcode': '3067' }, { 'suburb': 'Aberfeldie', 'postcode': '3040' } ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) 

所以…什么json！ preffix是在做导入？

为什么我不能把它放在我的代码中？ 一些巴贝尔configuration？

Answer 1

首先你需要安装json-loader ：

 npm i json-loader --save-dev 

那么，如何使用它有两种方法：

1. 为了避免在每个import添加json-loader ，你可以添加到webpack.config这一行：

    loaders: [ { test: /\.json$/, loader: 'json' }, // other loaders ] 

   然后像这样导入json文件

    import suburbs from '../suburbs.json'; 

2. 直接在你的import使用json-loader ，如你的例子：

    import suburbs from 'json!../suburbs.json'; 

注：在webpack 2.*而不是关键字loaders需要使用rules 。

也是webpack 2.*默认使用json-loader

* .json文件现在不支持json-loader。 你仍然可以使用它。 这不是一个突破性的变化。

v2.1.0-beta.28

Answer 2

json-loader不加载json文件，如果是数组，在这种情况下，你需要确保它有一个键，例如

 { "items": [ { "url": "https://api.github.com/repos/vmg/redcarpet/issues/598", "repository_url": "https://api.github.com/repos/vmg/redcarpet", "labels_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/labels{/name}", "comments_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/comments", "events_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/events", "html_url": "https://github.com/vmg/redcarpet/issues/598", "id": 199425790, "number": 598, "title": "Just a heads up (LINE SEPARATOR character issue)", }, ..... other items in array ..... ]}