ES6 मॉड्यूल कार्यान्वयन, कैसे एक json फ़ाइल लोड करने के लिए

Question 1

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

अगर मैं उपसर्ग को बाहर निकालता हूँ !:

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

इस तरह मुझे संकलन के समय त्रुटियां नहीं हुईं (आयात किया गया)। हालाँकि, जब मुझे इसे निष्पादित करने में त्रुटियाँ मिलीं:

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

यदि मैं इसे डिबग करता हूं तो मैं देख सकता हूं कि उपनगर एक ऑब्जेक्ट है, न कि एक सरणी इसलिए फ़िल्टर फ़ंक्शन को परिभाषित नहीं किया गया है।

हालाँकि उदाहरण में टिप्पणी की गई है सुझाव एक सरणी है। अगर मैं इस तरह के सुझावों को फिर से लिखता हूं, तो सब कुछ काम करता है:

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

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

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

Question 2

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

npm i json-loader --save-dev

फिर, दो तरीके हैं कि आप इसका उपयोग कैसे कर सकते हैं:

json-loaderप्रत्येक में जोड़ने से बचने के लिए importआप webpack.configइस पंक्ति में जोड़ सकते हैं :
```
loaders: [
  { test: /\.json$/, loader: 'json-loader' },
  // 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 फाइलें अब json-loader के बिना समर्थित हैं। आप अभी भी इसका उपयोग कर सकते हैं। यह ब्रेकिंग चेंज नहीं है।

v2.1.0-beta.28

Question 3

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

Question 4

यह सिर्फ 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 };
});

Question 5

json-loaderस्थापित के साथ , अब आप बस उपयोग कर सकते हैं:

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

या, और भी सरल:

import suburbs from '../suburbs';

Question 6

जब मैं एक 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:

ब्रेकिंग चेंज: लोडर का उपयोग करते समय इसे '-लोडर' प्रत्यय को छोड़ने की अनुमति नहीं है। आपको 'json' के स्थान पर 'json-loader' निर्दिष्ट करने की आवश्यकता है, https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed देखें

Question 7

नोड v8.5.0 +

आपको JSON लोडर की आवश्यकता नहीं है। नोड ध्वज के साथ ECMAScript मॉड्यूल (ES6 मॉड्यूल समर्थन) प्रदान करता है --experimental-modules, आप इसे इस तरह से उपयोग कर सकते हैं

node --experimental-modules myfile.mjs

तब यह बहुत सरल है

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

तो आप इसे चर के लिए बाध्य होगा myJSON।