Wie kann ich in Ecmascript 6 auf eine JSON-Datei zugreifen? Folgendes funktioniert nicht:

import config from '../config.json'

Dies funktioniert gut, wenn ich versuche, eine JavaScript-Datei zu importieren.

Eine einfache Problemumgehung:

config.js

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

dann...

import config from '../config.js'

erlaubt nicht den Import vorhandener .json-Dateien, erledigt aber einen Job.

In TypeScript oder mit Babel können Sie eine JSON- Datei in Ihren Code importieren .

// Babel

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

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

Leider unterstützt ES6 / ES2015 das Laden von JSON über die Modulimportsyntax nicht. Aber ...

Es gibt viele Möglichkeiten, wie Sie dies tun können. Abhängig von Ihren Anforderungen können Sie entweder untersuchen, wie Dateien in JavaScript gelesen werden ( window.FileReaderkann eine Option sein, wenn Sie im Browser ausgeführt werden) oder andere Loader verwenden, wie in anderen Fragen beschrieben (vorausgesetzt, Sie verwenden NodeJS).

Der einfachste Weg für IMO besteht wahrscheinlich darin, den JSON als JS-Objekt in ein ES6-Modul einzufügen und zu exportieren. Auf diese Weise können Sie es einfach dort importieren, wo Sie es benötigen.

Wenn Sie Webpack verwenden, ist der Import von JSON-Dateien standardmäßig (seit webpack >= v2.0.0) zu beachten .

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

Ich verwende babel + browserify und habe eine JSON-Datei in einem Verzeichnis ./i18n/locale-en.json mit Übersetzungs-Namespace (zur Verwendung mit ngTranslate).

Ohne irgendetwas aus der JSON-Datei exportieren zu müssen (was übrigens nicht möglich ist), könnte ich den Inhalt mit dieser Syntax standardmäßig importieren:

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

Wenn Sie einen Knoten verwenden, können Sie:

const fs = require('fs');

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

ODER

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

Sonst:

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

// script.js

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

ODER

import * from '../config.json'

Abhängig von Ihrem Build-Tool und der Datenstruktur in der JSON-Datei muss möglicherweise die importiert werden default.

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

zB Verwendung innerhalb Next.js

Ein bisschen spät, aber ich bin gerade auf dasselbe Problem gestoßen, als ich versucht habe, Analysen für meine Web-App bereitzustellen, bei denen eine App-Version basierend auf der package.json-Version gesendet wurde.

Die Konfiguration ist wie folgt: React + Redux, Webpack 3.5.6

Der json-loader macht seit Webpack 2+ nicht viel, also habe ich ihn nach einigem Hin und Her entfernt.

Die Lösung, die für mich tatsächlich funktionierte, war einfach Fetch. Während dies höchstwahrscheinlich einige Codeänderungen erzwingen wird, um sich an den asynchronen Ansatz anzupassen, hat es perfekt funktioniert, insbesondere angesichts der Tatsache, dass Fetch eine JSON-Decodierung im laufenden Betrieb bietet.

Hier ist es also:

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

Denken Sie daran, dass die Datei, da es sich hier speziell um package.json handelt, normalerweise nicht in Ihrem Produktions-Build (oder sogar in Ihrem Entwickler) gebündelt wird. Sie müssen also das CopyWebpackPlugin verwenden, um Zugriff darauf zu haben es bei Verwendung von fetch.

In einem Browser mit Fetch (im Grunde alle jetzt):

Derzeit können keine importDateien mit einem JSON-MIME-Typ erstellt werden, sondern nur Dateien mit einem JavaScript-MIME-Typ. Es könnte eine Funktion sein, die in Zukunft hinzugefügt wird ( offizielle Diskussion ).

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

In Node.js v13.2 +:

Derzeit ist das --experimental-json-modulesFlag erforderlich , andernfalls wird es standardmäßig nicht unterstützt.

Versuche zu rennen

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

und sehen Sie den obj-Inhalt, der an die Konsole ausgegeben wird.