Ecmascript 6'da bir json dosyasına nasıl erişebilirim? Aşağıdakiler işe yaramaz:

import config from '../config.json'

Bir JavaScript dosyasını içe aktarmaya çalışırsam bu işe yarar.

Basit bir çözüm:

config.js

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

sonra...

import config from '../config.js'

varolan .json dosyalarının içe aktarılmasına izin vermez, ancak bir iş yapar.

TypeScript veya Babel kullanarak , kodunuza json dosyasını alabilirsiniz .

// Babel

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

Referans: https://hackernoon.com/import-json-into-typescript-8d465beded79

Maalesef ES6 / ES2015, modül içe aktarım sözdizimi yoluyla JSON'un yüklenmesini desteklemiyor. Ama ...

Bunu yapmanın birçok yolu var. İhtiyaçlarınıza bağlı olarak JavaScript'te dosyaları nasıl okuyacağınıza bakabilir ( window.FileReadertarayıcıda çalışıyorsanız bir seçenek olabilir) veya diğer sorularda (NodeJS kullandığınız varsayılarak) açıklandığı gibi diğer yükleyicileri kullanabilirsiniz .

IMO'nun en basit yolu muhtemelen JSON'u bir ES6 modülüne JS nesnesi olarak koymak ve dışa aktarmaktır. Böylece ihtiyacınız olan yere aktarabilirsiniz.

Ayrıca Webpack kullanıyorsanız, JSON dosyalarının içe aktarılması varsayılan olarak (beri webpack >= v2.0.0) çalışacaktır .

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

Babel + browserify kullanıyorum ve bir dizinde JSON dosyası var ./i18n/locale-en.json çevirileri ad alanı (ngTranslate ile kullanılacak).

JSON dosyasından (bu btw mümkün değildir) bir şey vermek zorunda kalmadan, bu sözdizimi ile içeriğinin varsayılan bir içe aktarımını yapabilirim:

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

Düğüm kullanıyorsanız şunları yapabilirsiniz:

const fs = require('fs');

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

VEYA

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

Başka:

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

// script.js

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

VEYA

import * from '../config.json'

Derleme araçlarınıza ve JSON dosyasındaki veri yapısına bağlı olarak default,.

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

örneğin içindeki kullanım Next.js

Biraz geç, ancak web uygulamam için package.json sürümüne dayalı uygulama sürümü göndermeyi içeren analitiği sağlamaya çalışırken aynı sorunla karşılaştım.

Yapılandırma aşağıdaki gibidir: React + Redux, Webpack 3.5.6

Json-loader, Webpack 2+'den beri pek bir şey yapmıyor, bu yüzden onunla uğraştıktan sonra, onu kaldırdım.

Benim için gerçekten işe yarayan çözüm, sadece getirmeyi kullanmaktı. Bu, büyük olasılıkla zaman uyumsuz yaklaşıma uyum sağlamak için bazı kod değişikliklerini zorunlu kılacak olsa da, özellikle getirmenin anında json kod çözme sunacağı göz önüne alındığında mükemmel çalıştı.

İşte burada:

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

Özellikle burada package.json hakkında konuştuğumuzdan, dosyanın genellikle üretim yapınızda (veya bu konu için geliştiriciden) gelmeyeceğini unutmayın, bu nedenle erişebilmek için CopyWebpackPlugin'i kullanmanız gerekecek getirme kullanırken.

Getirmeli bir tarayıcıda (temel olarak hepsi şimdi):

Şu anda importJSON mime türüne sahip dosyaları değil , yalnızca JavaScript mime türüne sahip dosyaları. Gelecekte eklenen bir özellik olabilir ( resmi tartışma ).

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

Node.js v13.2 + sürümünde:

Şu anda --experimental-json-modulesbayrağı gerektirir , aksi takdirde varsayılan olarak desteklenmez.

Koşmayı dene

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

ve konsola çıkarılan obj içeriğine bakın.