Ecmascript 6でjsonファイルにアクセスするにはどうすればいいですか?以下はうまくいきません。
import config from '../config.json'
JavaScriptファイルをインポートしようとすると、これはうまくいきます。
簡単な回避策:
config.js
export default
{
// my json here...
}
それで….
import config from '../config.js'
既存の.jsonファイルのインポートを許可しませんが、仕事はします。
ES6/ES2015では、コードにjsonファイルをインポートできます。
// ES6/ES2015
import * as data from './example.json';
const Word = data.name;
console.log(Word); // output 'testing'
参考文献:
残念ながら、ES6/ES2015はモジュールインポート構文によるJSONのロードをサポートしていません。 しかし...
あなたがそれをすることができる多くの方法があります。必要に応じて、JavaScriptでファイルを読み込む方法を検討するか(ブラウザで実行している場合はwindow.FileReader
がオプションになる可能性があります)、または その他の質問 に説明されている他のローダーを使用できますNodeJSを使用しています)。
IMOの最も簡単な方法は、JSONをJSオブジェクトとしてES6モジュールに入れてエクスポートすることです。そうすれば、必要な場所にインポートすることができます。
また、Webpackを使用している場合は、JSONファイルのインポート デフォルトで動作します (webpack >= v2.0.0
以降)を使用することにも注目に値します。
import config from '../config.json';
私はbabel + browserifyを使用していて、(ngTranslateで使用される)translations名前空間を持つディレクトリ./i18n/locale-en.jsonにJSONファイルがあります。
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
OR
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';
OR
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を使用してアクセスする必要があることに注意してください。フェッチを使用する場合。