webentwicklung-frage-antwort-db.com.de

es6 module implementierung, wie man eine json-datei lädt

Ich implementiere ein Beispiel aus https://github.com/moroshko/react-autosuggest

Wichtiger Code ist wie folgt:

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);
}

Dieser Copy-Paste-Code aus dem Beispiel (der funktioniert) hat einen Fehler in meinem Projekt:

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

Wenn ich das Prefix json herausnehme !:

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

Auf diese Weise habe ich keine Fehler beim Kompilieren erhalten (Import ist abgeschlossen) ..__ Ich habe jedoch Fehler erhalten, wenn ich es ausführte:

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

Wenn ich es debugge, kann ich sehen, dass Vororte ein Objekt sind, kein Array, daher ist die Filterfunktion nicht definiert.

In dem Beispiel sind jedoch kommentierte Vorschläge ein Array. Wenn ich solche Vorschläge umschreibe, funktioniert alles:

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

Also ... was json! Prefix macht der Import? 

Warum kann ich es nicht in meinen Code einfügen? Etwas Babel-Konfiguration?

javascriptjsonreactjswebpack
79
user2670996

Zunächst müssen Sie json-loader installieren:

npm i json-loader --save-dev

Dann gibt es zwei Möglichkeiten, wie Sie es verwenden können:

  1. Um zu vermeiden, dass json-loader in jede import eingefügt wird, können Sie diese Zeile zu webpack.config hinzufügen:

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

    Dann importieren Sie json-Dateien wie folgt

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

  2. Verwenden Sie json-loader direkt in Ihrer import, wie in Ihrem Beispiel:

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

Hinweis: In webpack 2.* muss anstelle von Schlüsselwort loadersrules verwendet werden., 

auch webpack 2.* verwendet standardmäßig json-loader 

* .json-Dateien werden jetzt ohne den Json-Loader unterstützt. Sie können es immer noch verwenden. Es ist keine brechende Veränderung.

v2.1.0-beta.28

140
Alexander T.

der json-loader lädt die json-Datei nicht, wenn es sich um ein Array handelt. In diesem Fall müssen Sie beispielsweise sicherstellen, dass es einen Schlüssel hat

{
    "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 .....
]}
14
DmitrySemenov

Dies funktioniert nur bei 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 };
});
2
Kiko Seijo

Knoten v8.5.0 +

Sie benötigen keinen JSON-Loader. Knoten bietet ECMAScript-Module (Unterstützung für ES6-Module) mit dem Flag --experimental-modules können Sie es so verwenden

node --experimental-modules myfile.mjs

Dann ist es sehr einfach

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

Dann haben Sie es an die Variable myJSON gebunden.

0
Evan Carroll

Wenn json-loader installiert ist, können Sie jetzt einfach verwenden

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

oder auch noch einfacher

import suburbs from '../suburbs';
0
Mowzer

Fand diesen Thread, wenn ich keinen json-file mit ES6 TypeScript 2.6 laden konnte. Ich habe immer diesen Fehler erhalten:

TS2307 (TS) Modul 'json-loader! ./ suburbs.json' kann nicht gefunden werden

Damit es funktioniert, musste ich das Modul zuerst deklarieren. Ich hoffe, das spart ein paar Stunden für jemanden.

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

...

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

Wenn ich versuchte, loader von json-loader wegzulassen, erhielt ich die folgende Fehlermeldung von webpack:

BREAKING CHANGE: Das Suffix "-loader" .__ darf nicht mehr weggelassen werden. bei der Verwendung von Ladern . Sie müssen 'json-loader' anstelle von 'json' angeben, siehe https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

0
Ogglas