Ecmascript 6でjsonファイルにアクセスするにはどうすればよいですか？以下は機能しません：

import config from '../config.json'

JavaScriptファイルをインポートしようとすると、これは正常に機能します。

簡単な回避策：

config.js

export default
{
  // my json here...
}

その後...

import config from '../config.js'

既存の.jsonファイルのインポートは許可されませんが、ジョブは実行されます。

TypeScriptまたはBabelを使用して、コードにjsonファイルをインポートできます。

// Babel

import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

リファレンス：https : //hackernoon.com/import-json-into-typescript-8d465beded79

残念ながら、ES6 / ES2015はモジュールのインポート構文によるJSONのロードをサポートしていません。しかし ...

あなたがそれを行うことができる多くの方法があります。ニーズに応じて、JavaScriptでファイルを読み取る方法（window.FileReaderブラウザで実行している場合はオプションになる場合があります）を調べるか、他の質問で説明されているように他のローダーを使用できます（NodeJSを使用していると想定しています）。

IMOの最も簡単な方法は、おそらくJSONをJSオブジェクトとしてES6モジュールに入れ、それをエクスポートすることです。そうすれば、必要な場所にインポートできます。

また、Webpackを使用している場合、JSONファイルのインポートはデフォルトで機能します（以降webpack >= v2.0.0）。

import config from '../config.json';

私はbabel + browserifyを使用していて、ディレクトリ./i18n/locale-en.jsonにJSONファイルがあり、translations名前空間（ngTranslateで使用される）が含まれています。

JSONファイルから何かをエクスポートする必要はありませんが（これは不可能です）、次の構文でコンテンツのデフォルトのインポートを作成できます。

import translationsJSON from './i18n/locale-en';

ノードを使用している場合は、次のことができます。

const fs = require('fs');

const { config } = JSON.parse(fs.readFileSync('../config.json', 'utf8')) // May be incorrect, haven't used fs in a long time

または

const evaluation = require('../config.json');
// evaluation will then contain all props, so evaluation.config
// or you could use:
const { config } = require('../config.json');

そうしないと：

// config.js
{
// json object here
}

// script.js

import { config } from '../config.js';

または

import * from '../config.json'

ビルドツールとJSONファイル内のデータ構造によっては、のインポートが必要になる場合がありますdefault。

import { default as config } from '../config.json';

例：内での使用 Next.js

少し遅れましたが、package.jsonバージョンに基づいてアプリのバージョンを送信することを含むWebアプリの分析を提供しようとしているときに、同じ問題に遭遇しました。

構成は次のとおりです。React+ Redux、Webpack 3.5.6

json-loaderはWebpack 2+以降はあまり機能していないため、少しいじってから削除しました。

私にとって実際に機能したソリューションは、単にフェッチを使用することでした。これはおそらく非同期アプローチに適応するためにいくつかのコード変更を強制しますが、特にフェッチがオンザフライでjsonデコードを提供するという事実を考えると、それは完全に機能しました。

だからここにあります：

  fetch('../../package.json')
  .then(resp => resp.json())
  .then((packageJson) => {
    console.log(packageJson.version);
  });

ここでは特にpackage.jsonについて説明しているため、ファイルは通常、本番ビルド（または、その場合はdev）にバンドルされないため、CopyWebpackPluginを使用してアクセスする必要があることに注意してください。フェッチを使用する場合は、

フェッチ付きのブラウザで（基本的には現在、それらすべて）：

現時点ではimport、JSON MIMEタイプのファイルは作成できません。JavaScriptMIMEタイプのファイルのみです。将来的に追加される機能かもしれません（公式ディスカッション）。

fetch('./file.json')
  .then(response => response.json())
  .then(obj => console.log(obj))

Node.js v13.2以降：

現在、--experimental-json-modulesフラグが必要です。それ以外の場合、デフォルトではサポートされていません。

実行してみてください

node --input-type module --experimental-json-modules --eval "import obj from './file.json'; console.log(obj)"

コンソールに出力されたobjコンテンツを確認します。