ฉันกำลังใช้ตัวอย่างจาก 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

ถ้าฉันเอาคำนำหน้า json ออก!:

import suburbs from '../suburbs.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))

งั้น ... อะไรกันเนี่ย! คำนำหน้ากำลังทำในการนำเข้า?

ทำไมถึงใส่รหัสไม่ได้ การกำหนดค่า Babel บางอย่าง?

ก่อนอื่นคุณต้องติดตั้งjson-loader:

npm i json-loader --save-dev

จากนั้นมีสองวิธีที่คุณสามารถใช้ได้:

1. เพื่อหลีกเลี่ยงการเพิ่มjson-loaderในแต่ละรายการimportคุณสามารถเพิ่มwebpack.configในบรรทัดนี้:

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

   จากนั้นนำเข้าjsonไฟล์เช่นนี้

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

2. ใช้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

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

สิ่งนี้ใช้ได้กับ 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 };
});

เมื่อjson-loaderติดตั้งแล้วตอนนี้คุณสามารถใช้:

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

หรือยิ่งไปกว่านั้น:

import suburbs from '../suburbs';

พบหัวข้อนี้เมื่อฉันไม่สามารถโหลดด้วย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:

การเปลี่ยนแปลงการทำลาย: ไม่อนุญาตให้ละเว้นคำต่อท้าย '-loader' อีกต่อไปเมื่อใช้รถตัก คุณต้องระบุ 'json-loader' แทน 'json' โปรดดูhttps://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

โหนด v8.5.0 +

คุณไม่ต้องการตัวโหลด JSON โหนดจัดเตรียมโมดูล ECMAScript (การสนับสนุนโมดูล ES6)พร้อมกับ--experimental-modulesแฟล็กคุณสามารถใช้งานได้เช่นนี้

node --experimental-modules myfile.mjs

จากนั้นก็ง่ายมาก

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

myJSONแล้วคุณจะมีมันถูกผูกไว้กับตัวแปร