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

如果我调试它,我可以看到郊区是一个objectc,而不是一个数组,所以没有定义过滤器功能.

但是在示例中,评论建议是一个数组.如果我重写这样的建议,一切正常:

  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正在进行导入？

为什么我不能把它放在我的代码中？有些巴贝尔配置？

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';
   

2. 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

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 .....
]}

Answer 3

这仅适用于React和React Native

const data = require('./data/photos.json');

console.log('[-- typeof data --]', typeof data); // object


const fotos = data.xs.map(item => {
    return { uri: item };
});