web-dev-qa-db-fra.com

es6 implémentation de modules, comment charger un fichier json

J'implémente un exemple de https://github.com/moroshko/react-autosuggest

Le code important est comme ceci:

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

Ce code copier-coller de l'exemple (qui fonctionne) a une erreur dans mon projet:

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

Si je sors le preffix json !:

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

De cette façon, je n'ai pas d'erreur lors de la compilation (l'importation est terminée) . Cependant, j'ai eu des erreurs quand je l'ai exécuté:

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

Si je le débogue, je peux voir que la banlieue est un objet, pas un tableau, donc la fonction de filtrage n'est pas définie.

Cependant, dans cet exemple, les suggestions commentées constituent un tableau. Si je réécris des suggestions comme celle-ci, tout fonctionne:

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

Alors ... quel json! preffix fait dans l'import? 

Pourquoi je ne peux pas le mettre dans mon code? Une configuration de babel?

javascriptjsonreactjswebpack
79
user2670996

Tout d’abord, vous devez installer json-loader :

npm i json-loader --save-dev

Ensuite, vous pouvez l'utiliser de deux manières:

  1. Afin d'éviter d'ajouter json-loader dans chaque import, vous pouvez ajouter à webpack.config cette ligne:

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

    Importez ensuite les fichiers json comme ceci

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

  2. Utilisez json-loader directement dans votre import, comme dans votre exemple:

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

Remarque: Dans webpack 2.* au lieu du mot clé loaders, vous devez utiliser rules ., 

aussi webpack 2.* utilise json-loader par défaut 

Les fichiers * .json sont maintenant supportés sans json-loader. Vous pouvez toujours l'utiliser. Ce n'est pas un changement radical.

v2.1.0-beta.28

140
Alexander T.

json-loader ne charge pas le fichier json s'il s'agit d'un tableau. Dans ce cas, vous devez vous assurer qu'il a une clé, par exemple.

{
    "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

Cela ne fonctionne que sur 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

Node v8.5.0 +

Vous n'avez pas besoin du chargeur JSON. Le noeud fournit Modules ECMAScript (prise en charge du module ES6) avec l'indicateur --experimental-modules, vous pouvez l'utiliser comme ceci

node --experimental-modules myfile.mjs

Alors c'est très simple

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

Ensuite, vous l'aurez lié à la variable myJSON.

0
Evan Carroll

Avec json-loader installé, vous pouvez maintenant simplement utiliser

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

ou aussi, encore plus simplement

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

J'ai trouvé ce fil lorsque je ne pouvais pas charger un json-file avec ES6 TypeScript 2.6. J'ai gardé cette erreur:

TS2307 (TS) Impossible de trouver le module 'json-loader! ./ suburbs.json'

Pour que cela fonctionne, je devais d'abord déclarer le module. J'espère que cela économisera quelques heures à quelqu'un.

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

...

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

Si j'ai essayé d'omettre loader de json-loader j'ai l'erreur suivante de webpack:

RUPTURE DE CHANGEMENT: Il n'est plus permis d'omettre le suffixe '-loader' lors de l'utilisation de chargeurs . Vous devez spécifier 'json-loader' au lieu de 'json', voir https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

0
Ogglas