ES6模块的实现，如何加载json文件

Question

我正在从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, e.g.:
  //   ['Mentone', 'Mill Park', 'Mordialloc']

  setTimeout(() => callback(null, suggestions), 300);
}

该示例中的复制粘贴代码（有效）在我的项目中出现错误：

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

如果我删除前缀json !:

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

这样，我在编译时不会出错（导入已完成）。但是执行时出现错误：

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

如果我调试它，我可以看到郊区是一个对象，而不是一个数组，因此未定义过滤器功能。

但是在示例中，注释建议是一个数组。如果我重写这样的建议，那么一切都会起作用：

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

所以…什么json！前缀是在导入吗？

为什么不能将其放入代码中？一些babel配置？

Answer 1

首先，您需要安装json-loader：

npm i json-loader --save-dev

然后，有两种使用方式：

1. 为了避免添加json-loader每个，import您可以添加webpack.config到此行：

   loaders: [
   

   { test: /.json$/, loader: ‘json-loader’ },
   // other loaders
   ]
   

然后json像这样导入文件

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

1. json-loader直接在您的中使用import，如您的示例所示：

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

注意： 在 webpack 2.* 代替关键字时loaders需要使用
rules 。，

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

• .json文件现在不受json-loader支持。您仍然可以使用它。这不是一个重大变化。

v2.1.0-beta.28