Come posso accedere a un file JSON in Ecmascript 6? Quanto segue non funziona:Come importare un file json in ecmascript 6?
import config from '../config.json'
Questo funziona bene se si tenta di importare un file JavaScript.
Una soluzione semplice che ha funzionato per me; Non puro al 100% e ho dovuto usare i file .js:
config.js
export default
{
// my json here...
}
poi ...
import config from '../config.js'
Questo in realtà non risponde alla domanda. Ad esempio, non è possibile convertire semplicemente package.json in package.js. Ci sono momenti in cui vuoi veramente importare JSON non JS. – curiousdannii
Sfortunatamente ES6/ES2015 non supporta il caricamento di JSON tramite la sintassi di importazione del modulo.
Ci sono molti modi per farlo. A seconda delle esigenze è possibile esaminare come leggere i file in JavaScript (window.FileReader potrebbe essere un'opzione se si sta eseguendo nel browser) o utilizzare altri caricatori come descritto in other questions (presupponendo che si stia utilizzando NodeJS).
IMO il modo più semplice è probabilmente quello di mettere il JSON come oggetto JS in un modulo ES6 ed esportarlo. In questo modo puoi semplicemente importarlo dove ne hai bisogno.
Non è necessario inserirlo in una stringa. Si chiama JSON, non JSSN, dopotutto. – zeroflagL
Inoltre, torazaburo ha spiegato in una risposta precedentemente cancellata: * Non esiste un "sistema di moduli" ES6; c'è un'API che è implementata da un particolare caricatore. Qualsiasi caricatore può fare tutto ciò che vuole, incluso il supporto dell'importazione di file JSON. Ad esempio, un caricatore potrebbe scegliere di supportare import foo da './directory come significato per importare directory/index.js * – CodingIntrigue
sto usando babel + browserify e devo un file JSON in una directory ./i18n/locale-en.json con spazio dei nomi delle traduzioni (da utilizzare con ngTranslate).
Senza dover esportare qualsiasi cosa dal file JSON (che btw non è possibile), ho potuto fare un'importazione di default del suo contenuto con la seguente sintassi:
import translationsJSON from './i18n/locale-en';
un po 'tardi, ma ho appena imbattuto lo 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.
configurazione è la seguente: Reagire + Redux, Webpack 3.5.6
JSON-loader non sta facendo molto dal Webpack 2+, così dopo un po 'di giocherellare con esso, ho finito per rimuoverlo.
La soluzione che ha funzionato per me, era semplicemente l'utilizzo di fetch. Anche se questo probabilmente imporrà alcune modifiche al codice per adattarsi all'approccio asincrono, ha funzionato perfettamente, soprattutto considerando il fatto che fetch offrirà la decodifica JSON al volo.
Così qui è:
fetch('../../package.json')
.then(resp => resp.json())
.then((packageJson) => {
console.log(packageJson.version);
});
Non tenere a mente, che, dal momento che stiamo parlando di package.json specificamente qui, il file non sarà di solito vengo in bundle nella build di produzione (o anche per dev importa), quindi dovrai usare CopyWebpackPlugin per avere accesso ad esso quando usi fetch.
Questo non ha nulla a che fare con ES6 ma con il caricatore di moduli che si sta utilizzando. La sintassi stessa va bene. –
Il modo più semplice per farlo è usare 'webpack' e' json-loader' con esso. –