implementazione di moduli es6, come caricare un file json

Sto implementando un esempio da https://github.com/moroshko/react-autosuggest

Il codice importante è come questo:

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

Questo codice copia-incolla dell’esempio (che funziona) ha un errore nel mio progetto:

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

Se prendo il preffix json !:

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

In questo modo non ho avuto errori in fase di compilazione (l’importazione è stata fatta). Tuttavia ho ottenuto errori quando lo eseguo:

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

Se eseguo il debug, posso vedere che suburbs è un objectc, non un array, quindi la funzione filter non è definita.

Tuttavia nell’esempio i suggerimenti commentati sono un array. Se riscrivo suggerimenti come questo, tutto funziona:

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

Quindi … che cosa! sta facendo il prefisso nell’importazione?

Perché non posso inserirlo nel mio codice? Qualche configurazione babel?

Prima di tutto è necessario installare json-loader :

 npm i json-loader --save-dev 

Quindi, ci sono due modi in cui puoi usarlo:

  1. Per evitare di aggiungere json-loader in ogni import è ansible aggiungere a webpack.config questa riga:

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

    Quindi importare file json come questo

     import suburbs from '../suburbs.json'; 
  2. Usa json-loader direttamente nella tua import , come nel tuo esempio:

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

Nota: nel webpack 2.* invece dei loaders di parole chiave è necessario utilizzare le rules .,

anche webpack 2.* usa json-loader di default

* I file .json ora sono supportati senza il json-loader. Potresti ancora usarlo. Non è un cambio di rottura.

v2.1.0-beta.28

json-loader non carica file json se è array, in questo caso devi assicurarti che abbia una chiave, per esempio

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

Funziona solo su 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 }; }); 

Trovato questo thread quando non ho potuto caricare un json-file con ES6 TypeScript 2.6 . Ho continuato a ricevere questo errore:

TS2307 (TS) Imansible trovare il modulo ‘json-loader! ./ suburbs.json’

Per farlo funzionare ho dovuto dichiarare prima il modulo. Spero che questo salverà alcune ore per qualcuno.

 declare module "json-loader!*" { let json: any; export default json; } ... import suburbs from 'json-loader!./suburbs.json'; 

Se ho provato ad omettere il loader da json-loader ho ricevuto il seguente errore dal webpack :

BREAKING CHANGE: Non è più consentito omettere il suffisso ‘-loader’ quando si usano i caricatori. Devi specificare ‘json-loader’ invece di ‘json’, vedi https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Aggiornare:

Con json-loader installato, ora puoi semplicemente usarlo

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

o anche, ancora più semplicemente

 import suburbs from '../suburbs';