web-dev-qa-db-ja.com

ecmascript 6でjsonファイルをインポートする方法

Ecmascript 6でjsonファイルにアクセスするにはどうすればいいですか？以下はうまくいきません。

import config from '../config.json'

JavaScriptファイルをインポートしようとすると、これはうまくいきます。

jsonimportecmascript-6
102
Nikita Jajodia

簡単な回避策：

config.js

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

それで….

import config from '../config.js'

既存の.jsonファイルのインポートを許可しませんが、仕事はします。

73
Gilbert

ES6/ES2015では、コードにjsonファイルをインポートできます。

// ES6/ES2015

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

参考文献：

  1. https://hackernoon.com/import-json-into-TypeScript-8d465beded79

  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

46
williamli

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

あなたがそれをすることができる多くの方法があります。必要に応じて、JavaScriptでファイルを読み込む方法を検討するか（ブラウザで実行している場合はwindow.FileReaderがオプションになる可能性があります）、または その他の質問 に説明されている他のローダーを使用できますNodeJSを使用しています）。

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

また、Webpackを使用している場合は、JSONファイルのインポート デフォルトで動作します （webpack >= v2.0.0以降）を使用することにも注目に値します。

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

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

JSONファイルから何もエクスポートしなくても（これは不可能ですが）、次の構文を使用してコンテンツのデフォルトのインポートを作成できます。

import translationsJSON from './i18n/locale-en';
19
Francisco Neto

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

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'
6
Anonymous User 2903

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

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

例えばNext.js内での使用

0
Pat Migliaccio

少し遅れましたが、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を使用してアクセスする必要があることに注意してください。フェッチを使用する場合。

0
Avram Tudor