web-dev-qa-db-ja.com

es6モジュールの実装、jsonファイルのロード方法

私は 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！接頭辞は、インポートでやっている？

なぜ私のコードに入れられないのですか？いくつかのバベル構成？

javascriptjsonreactjswebpack
81
user2670996

まず最初にインストールする必要があります json-loader ：

npm i json-loader --save-dev

それから、あなたがそれを使うことができる2つの方法があります：

  1. 各importに json-loader が追加されないようにするには、この行を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

146
Alexander T.

jsonファイルが配列の場合、jsonローダーは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 .....
]}
15
DmitrySemenov

これは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 };
});
2
Kiko Seijo

ノードv8.5.0 +

JSONローダーは必要ありません。 Nodeが提供する ECMAScriptモジュール（ES6モジュールサポート）--experimental-modulesフラグで、あなたはこのようにそれを使うことができます

node --experimental-modules myfile.mjs

それはとても簡単です

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

それから、変数myJSONにバインドします。

0
Evan Carroll

json-loaderがインストールされているので、今、あなたは単に使うことができます

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

あるいは、もっと簡単に

import suburbs from '../suburbs';
0
Mowzer

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';

json-loaderからloaderを省略しようとした場合、webpackから次のエラーが発生しました。

ブレークチェンジ：ローダーを使うとき、 ' - ローダー'接尾辞を省略することはもはや許されません。 'json'の代わりに 'json-loader'を指定する必要があります。 https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed を参照してください。

0
Ogglas