ES6 মডিউলগুলি বাস্তবায়ন, কীভাবে কোনও জসন ফাইল লোড করবেন

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 ফাইলগুলি এখন জসন-লোডার ছাড়াই সমর্থিত। আপনি এখনও এটি ব্যবহার করতে পারেন। এটি কোনও ব্রেকিং পরিবর্তন নয়।

v2.1.0-beta.28

Question 3

জসন-লোডার জাসন ফাইলটি অ্যারে হলে লোড করে না, এক্ষেত্রে আপনার অবশ্যই এটির একটি কী আছে তা নিশ্চিত করতে হবে, উদাহরণস্বরূপ

{
    "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

এটি কেবল প্রতিক্রিয়া এবং প্রতিক্রিয়া নেটিভ নিয়ে কাজ করে

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 (টিএস) মডিউল 'জসন-লোডার!। / উপশহর.জসন' খুঁজে পাচ্ছে না

এটি কাজ করার জন্য আমাকে প্রথমে মডিউলটি ঘোষণা করতে হয়েছিল। আমি আশা করি এটি কারও জন্য কয়েক ঘন্টা সাশ্রয় করবে।

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

...

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

যদি আমি বাদ দেওয়ার চেষ্টা loaderথেকে json-loaderআমি থেকে নিম্নলিখিত ত্রুটির পেয়েছিলাম webpack:

পরিবর্তনের পরিবর্তন: লোডার ব্যবহারের সময় আর '-লোডার' প্রত্যয়টি বাদ দিতে দেওয়া হবে না। আপনাকে 'জসন'-এর পরিবর্তে' জসন-লোডার 'নির্দিষ্ট করতে হবে, https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed দেখুন

Question 7

নোড v8.5.0 +

আপনার জেএসওএন লোডার লাগবে না। নোড পতাকা সহ ECMAScript মডিউল (ES6 মডিউল সমর্থন) সরবরাহ করে --experimental-modules, আপনি এটি এটি ব্যবহার করতে পারেন

node --experimental-modules myfile.mjs

তাহলে এটি খুব সাধারণ

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

তারপরে আপনার এটি ভেরিয়েবলের সাথে আবদ্ধ থাকবে myJSON।