[javascript] ES6 모듈 구현, json 파일로드 방법

Program / 글쓴이

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

그래서 … 무슨 json! 접두사가 가져 오기에서 수행됩니까?

내 코드에 넣을 수없는 이유는 무엇입니까? 바벨 구성?

답변

먼저 다음을 설치해야합니다 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’대신 ‘json-loader’를 지정해야합니다. https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed를 참조 하십시오.

답변

Node v8.5.0 이상

JSON 로더가 필요하지 않습니다. Node는 플래그 와 함께 ECMAScript 모듈 (ES6 모듈 지원) 을 제공합니다. --experimental-modules다음과 같이 사용할 수 있습니다.

node --experimental-modules myfile.mjs

그럼 아주 간단합니다

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

그런 다음 변수에 바인딩됩니다 myJSON.

답변