节点v8.5.0 +

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

然后，有两种方法可以使用它：

为了避免在每个import中添加json-loader，您可以将此行添加到webpack.config：
```
loaders: [
  { test: /\.json$/, loader: 'json-loader' },
  // other loaders 
]
```
然后导入json这样的文件
```
import suburbs from '../suburbs.json';
```
直接在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 .....
]}

Answer 3

这适用于React＆amp; React Native

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

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


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

Answer 4

当我无法使用json-file加载ES6 TypeScript 2.6时找到此帖子。我一直收到这个错误：

TS2307（TS）找不到模块＆＃39; json-loader！./ suburbs.json＆＃39;

为了让它工作，我必须先声明模块。我希望这可以为某人节省几个小时。

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

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

如果我尝试从loader中省略json-loader，我从webpack收到以下错误：

突然变化：不再允许省略＆＃39; -loader＆＃39;后缀使用装载机时。你需要指定＆＃39; json-loader＆＃39;而不是＆＃39; json＆＃39;，见https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Answer 5

安装了json-loader后，现在您可以简单地使用

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

或者甚至更简单

import suburbs from '../suburbs';

Answer 6

节点v8.5.0 +

您不需要JSON加载程序。 Node为ECMAScript Modules (ES6 Module support)提供了--experimental-modules标志，您可以像这样使用它

node --experimental-modules myfile.mjs

那非常简单

import myJSON from './myJsonFile.json';
console.log(myJSON);

然后，将其绑定到变量myJSON。

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

6 个答案:

节点v8.5.0 +