ES6 मॉड्यूल कार्यान्वयन, एक json फ़ाइल

Question

मैं 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 

अगर मैं preffix 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)) 

तो ... क्या जेसन! आयात में उपसर्ग कर रहा है?

मैं इसे अपने कोड में क्यों नहीं डाल सकता? कुछ बेबेल विन्यास?

Answer 1

तुम सब json-loader स्थापित करने की आवश्यकता सबसे पहले: फिर

npm i json-loader --save-dev 

, वहाँ दो तरीके आप इसे कैसे उपयोग कर सकते हैं: प्रत्येक import आप कर सकते हैं में json-loader जोड़ने से बचने के लिए

1. आदेश में webpack.config में जोड़ें इस लाइन:

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

   फिर अपने import में इस

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

2. उपयोग json-loader सीधे तरह json फ़ाइलें आयात, अपने उदाहरण में है:

   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

Answer 2

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

Answer 3

इस सूत्र जब मैं ES6 TypeScript 2.6 के साथ एक json-file लोड नहीं कर सका मिले। मुझे यह त्रुटि मिल रही है:

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'; 

अगर मैं json-loader से 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