Come posso accedere a un file json in Ecmascript 6? Quanto segue non funziona:

import config from '../config.json'

Funziona bene se provo a importare un file JavaScript.

Una soluzione semplice:

config.js

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

poi...

import config from '../config.js'

non consente l'importazione di file .json esistenti, ma svolge un lavoro.

In TypeScript o usando Babel, puoi importare file json nel tuo codice.

// Babel

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

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

Sfortunatamente ES6 / ES2015 non supporta il caricamento di JSON tramite la sintassi di importazione del modulo. Ma ...

Ci sono molti modi per farlo. A seconda delle tue esigenze puoi esaminare come leggere i file in JavaScript ( window.FileReaderpotrebbe essere un'opzione se stai eseguendo nel browser) o usare altri caricatori come descritto in altre domande (supponendo che tu stia utilizzando NodeJS).

Il modo più semplice per IMO è probabilmente quello di inserire JSON come oggetto JS in un modulo ES6 ed esportarlo. In questo modo puoi semplicemente importarlo dove ti serve.

Vale anche la pena notare che se si utilizza Webpack, l'importazione di file JSON funzionerà per impostazione predefinita (poiché webpack >= v2.0.0).

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

Sto usando babel + browserify e ho un file JSON in una directory ./i18n/locale-en.json con spazio dei nomi delle traduzioni (da usare con ngTranslate).

Senza dover esportare nulla dal file JSON (che tra l'altro non è possibile), potrei effettuare un'importazione predefinita del suo contenuto con questa sintassi:

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

Se stai usando il nodo puoi:

const fs = require('fs');

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

O

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

Altro:

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

// script.js

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

O

import * from '../config.json'

A seconda degli strumenti di compilazione e della struttura dei dati all'interno del file JSON, potrebbe essere necessario importare il file default.

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

ad es. utilizzo all'interno Next.js

Un po 'in ritardo, ma mi sono imbattuto nello stesso problema durante il tentativo di fornire analisi per la mia app Web che prevedeva l'invio della versione dell'app basata sulla versione package.json.

La configurazione è la seguente: React + Redux, Webpack 3.5.6

Il json-loader non sta facendo molto dal Webpack 2+, quindi dopo averlo armeggiato, ho finito per rimuoverlo.

La soluzione che funzionava davvero per me, era semplicemente usare il recupero. Anche se questo probabilmente imporrà alcune modifiche al codice per adattarsi all'approccio asincrono, ha funzionato perfettamente, soprattutto dato che il recupero offrirà la decodifica json al volo.

Quindi eccolo qui:

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

Tieni presente che, dal momento che stiamo parlando di package.json in particolare qui, il file di solito non verrà raggruppato nella build di produzione (o anche dev per quella materia), quindi dovrai usare CopyWebpackPlugin per avere accesso a quando si utilizza fetch.

In un browser con recupero (praticamente tutti ora):

Al momento, non possiamo importfile con un tipo MIME JSON, solo file con un tipo MIME JavaScript. Potrebbe essere una funzionalità aggiunta in futuro ( discussione ufficiale ).

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

In Node.js v13.2 +:

Al momento richiede il --experimental-json-modulesflag , altrimenti non è supportato per impostazione predefinita.

Prova a correre

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

e vedere il contenuto obj inviato alla console.