module es6 thực hiện, làm thế nào để tải tệp json

Question

Tôi đang thực hiện một ví dụ từ https://github.com/moroshko/react-autosuggest

đang quan trọng là như thế này:

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

này đang copy-paste từ ví dụ (làm việc) , có một lỗi trong dự án của tôi:

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

Nếu tôi đưa ra các preffix json !:

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

Bằng cách này tôi đã không có lỗi tại thời gian biên dịch (nhập khẩu được thực hiện). Tuy nhiên tôi đã nhận lỗi khi tôi thực hiện nó:

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

Nếu tôi gỡ lỗi nó tôi có thể thấy vùng ngoại ô là một objectc, không phải là một mảng rất chức năng lọc không được định nghĩa.

Tuy nhiên trong ví dụ là các đề xuất nhận xét là một mảng. Nếu tôi viết lại các đề xuất như thế này, mọi thứ đều hoạt động:

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

Vì vậy ... json! preffix đang làm trong quá trình nhập?

Tại sao tôi không thể đặt mã vào mã? Một số cấu hình Babel?

Answer 1

Trước hết bạn cần phải cài đặt json-loader:

npm i json-loader --save-dev 

Sau đó, có hai cách làm thế nào bạn có thể sử dụng nó:

1. Để tránh thêm json-loader trong mỗi import bạn có thể thêm vào webpack.config dòng này:

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

   Sau đó nhập json file như thế này

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

2. Sử dụng json-loader trực tiếp trong import của bạn, như trong ví dụ của bạn:

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

Lưu ý: Trong webpack 2.* thay vì từ khóa loaders cần sử dụng rules .,

cũng webpack 2.* sử dụng json-loader theo mặc định

*.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

Answer 2

json-loader không tải tệp json nếu đó là mảng, trong trường hợp này bạn cần phải chắc chắn rằng nó có một chìa khóa, ví dụ

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

Answer 3

Tìm thấy chủ đề này khi tôi không thể tải json-file với ES6 TypeScript 2.6. Tôi đã gặp phải lỗi này:

TS2307 (TS) Cannot find module 'json-loader!./suburbs.json'

Để làm việc đó tôi phải khai báo mô-đun trước. Tôi hy vọng điều này sẽ tiết kiệm một vài giờ cho một ai đó.

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

... 

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

Nếu tôi cố gắng bỏ qua loader từ json-loader Tôi đã nhận lỗi sau đây từ 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