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

Я реализующий пример из https://github.com/moroshko/react-autosuggest ES6 реализация модулей, как загрузить файл JSon

важный код, как это:

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

Если я достаньте preffix !:

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! префикс делает в импорте?

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

источник

2015-11-11 user2670996

133

Прежде всего вам необходимо установить json-loader:

npm i json-loader --save-dev

Тогда, есть два способа, как вы можете использовать его:

Для того, чтобы избежать добавления json-loader в каждом import вы можете add to webpack.config Эта строка:
```
loaders: [ 
    { test: /\.json$/, loader: 'json' }, 
    // other loaders 
] 
```
Затем импортировать json файлы как этот
```
import suburbs from '../suburbs.json'; 
```
Использование json-loader непосредственно в import, как в вашем примере:
```
import suburbs from 'json!../suburbs.json'; 
```

Примечание: В webpack 2.* вместо ключевого слова loaders необходимо использовать rules ,,

также webpack 2.* использует json-loader по умолчанию

*.json files are now supported without the json-loader. You may still use it. It's not a breaking change.

v2.1.0-beta.28

источник

2015-11-11 12:23:10

Спасибо так много! Документация для json-loader фактически показывала настройки для webpack v2, поэтому ничто не работало для меня (используя v1!). Так что для всех вас, используйте загрузчики, а не правила! Кроме того, измените «использование» внутри этого объекта как «загрузчика», точно так же, как этот ответ! – nbkhope

Как упоминалось в @ alexander-t, теперь вы можете импортировать json-файлы без json-loader, но если вы столкнулись с проблемой, когда json-loader не распознается, вы должны просто добавить суффиксу '-loader' в загрузчиках config следующим образом: '{test: /\.json$/, loader: 'json-loader'}' – cvetanov

Почему импортированный json не копируется в outDir, если он импортируется через машинопись? – FrankerZ

JSON-погрузчик не загружает 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 ..... 
]}

источник

2017-02-03 20:43:14 DmitrySemenov

Ницца, не думал об этом! –

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

TS2307 (TS) Cannot find module '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: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'json-loader' instead of 'json', see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

источник

2017-12-25 22:53:05 Ogglas

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

ответ

Смежные вопросы