реализация модулей es6, как загрузить файл json

79

Я реализую пример из 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

Если я его отлаживаю, я вижу, что пригород является объектом c, а не массивом, поэтому функция фильтра не определена.

Однако в приведенном примере предложения представляют собой массив. Если я переписываю такие предложения, все работает:

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

Итак... какой json! префикс делает в импорте?

Почему я не могу поместить его в свой код? Некоторая конфигурация Babel?

  • 0
    Пожалуйста, пожалуйста, пожалуйста, переоцените выбранный ответ, это на самом деле хотите, чтобы вы использовали модули ES6. Вам вообще ничего не нужно, просто JS, который понимает модули ES6. stackoverflow.com/a/53878451/124486
Теги:
webpack

6 ответов

133
Лучший ответ

Прежде всего вам необходимо установить 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. Вы можете все еще использовать это. Это не переломный момент.

v2.1.0-beta.28

Поделиться
  • 1
    Спасибо вам большое! Документация для json-loader фактически показывала настройки для webpack v2, поэтому у меня ничего не получалось (используя v1!). Так что для всех вас используйте загрузчики, а не правила! Кроме того, измените «use» внутри этого объекта на «loader», как этот ответ!
  • 5
    Как уже упоминалось @ alexander-t, теперь вы можете импортировать файлы json без json-loader, но, если вы столкнулись с проблемой, когда json-loader не распознается, вам просто нужно добавить суффикс '-loader' в конфигурацию loaders. как это: { test: /\.json$/, loader: 'json-loader' }
Показать ещё 1 комментарий
14

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 .....
]}
Поделиться
  • 0
    Хороший, не думал об этом!
2

Это просто работает на 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 };
});
Поделиться
0

Узел v8.5. 0+

Вам не нужен загрузчик JSON. Узел предоставляет модули ECMAScript (поддержка модулей ES6) с --experimental-modules, вы можете использовать его следующим образом

node --experimental-modules myfile.mjs

Тогда это очень просто

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

Тогда вы будете привязаны к переменной myJSON.

Поделиться
0

С установленным json-loader, теперь вы можете просто использовать

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

или еще проще

import suburbs from '../suburbs';
Поделиться
0

Нашел этот поток, когда я не смог загрузить json-file с помощью ES6 TypeScript 2.6. Я продолжал получать эту ошибку:

TS2307 (TS) Не удается найти модуль 'json-loader!./suburbs.json'

Чтобы заставить его работать, мне пришлось сначала объявить модуль. Надеюсь, это сэкономит несколько часов для кого-то.

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

...

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

Если я попытался пропустить loader из json-loader, я получил следующую ошибку из webpack:

BREAKING CHANGE: больше не разрешено опускать суффикс '-loader' при использовании погрузчиков.                  Вам нужно указать "json-loader" вместо "json",                  см. https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Поделиться
  • 0
    Если вы проголосовали, скажите, почему

Ещё вопросы

Сообщество Overcoder
Наверх
Меню