Saya menerapkan contoh dari https://github.com/moroshko/react-autosuggest

Kode penting seperti ini:

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

Kode salin-tempel ini dari contoh (yang berfungsi), memiliki kesalahan dalam proyek saya:

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

Jika saya mengambil awalan json !:

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

Dengan cara ini saya tidak mendapatkan kesalahan pada waktu kompilasi (impor selesai). Namun saya mendapat kesalahan saat menjalankannya:

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

Jika saya men-debugnya, saya bisa melihat pinggiran kota adalah objectc, bukan array sehingga fungsi filter tidak ditentukan.

Namun dalam contoh, saran yang dikomentari adalah larik. Jika saya menulis ulang saran seperti ini, semuanya berfungsi:

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

Jadi ... apa json! awalan lakukan di impor?

Mengapa saya tidak dapat memasukkannya ke dalam kode saya? Beberapa konfigurasi babel?

Pertama-tama Anda perlu menginstal json-loader:

npm i json-loader --save-dev

Lalu, ada dua cara bagaimana Anda bisa menggunakannya:

1. Untuk menghindari penambahan json-loadersetiap importAnda dapat menambahkan ke webpack.configbaris ini:

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

   Kemudian impor jsonfile seperti ini

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

2. Gunakan json-loaderlangsung di Anda import, seperti dalam contoh Anda:

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

Catatan: Dalam webpack 2.*alih-alih kata kunci loadersperlu digunakan rules.,

juga webpack 2.*digunakan json-loadersecara default

File * .json sekarang didukung tanpa json-loader. Anda masih dapat menggunakannya. Ini bukan perubahan yang merusak.

v2.1.0-beta.28

json-loader tidak memuat file json jika itu array, dalam hal ini Anda perlu memastikan itu memiliki kunci, misalnya

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

Ini hanya berfungsi di 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 };
});

Dengan json-loaderterinstal, sekarang Anda cukup menggunakan:

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

atau, lebih sederhananya:

import suburbs from '../suburbs';

Menemukan utas ini ketika saya tidak dapat memuat json-filedengan ES6 TypeScript 2.6. Saya terus mendapatkan kesalahan ini:

TS2307 (TS) Tidak dapat menemukan modul 'json-loader! ./ suburbs.json'

Untuk membuatnya bekerja, saya harus mendeklarasikan modul terlebih dahulu. Saya harap ini akan menghemat beberapa jam untuk seseorang.

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

...

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

Jika saya mencoba untuk menghilangkan loaderdari json-loadersaya mendapat kesalahan berikut dari webpack:

PERUBAHAN BREAKING: Tidak lagi diizinkan untuk menghilangkan akhiran '-loader' saat menggunakan loader. Anda perlu menentukan 'json-loader' dan bukan 'json', lihat https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Node v8.5.0 +

Anda tidak membutuhkan pemuat JSON. Node menyediakan ECMAScript Modules (dukungan ES6 Module) dengan --experimental-modulesbendera, Anda dapat menggunakannya seperti ini

node --experimental-modules myfile.mjs

Maka itu sangat sederhana

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

Kemudian Anda akan mengikatnya ke variabel myJSON.