Wie importiere ich eine JSON-Datei in Ecmascript 6?

162

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.

Nikita Jajodia
quelle
4
Dies hat nichts mit ES6 zu tun, sondern mit dem von Ihnen verwendeten Modullader. Die Syntax selbst ist in Ordnung.
Felix Kling
2
Der sauberste Weg, dies zu tun, ist zu verwenden webpackund json-loaderdamit.
Suprita Shankar
11
ES6 unterstützt den JSON-Import mit der folgenden Syntax: import * als Daten aus './example.json';
Williamli

Antworten:

84

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.

Gilbert
quelle
168
Dies beantwortet die Frage nicht wirklich. Sie können beispielsweise package.json nicht einfach in package.js konvertieren. Es gibt Zeiten, in denen Sie JSON wirklich importieren möchten, nicht JS.
neugierigdannii
23
Überhaupt keine Lösung, Sie exportieren ein Javascript-Objekt, das zufällig dieselbe Syntax wie JSON hat.
Ma Jerez
Der Problemtext wurde aktualisiert. versuchen, weitere semantische Debatten zu vermeiden.
Gilbert
Ich habe "postbuild": "node myscript.js"meiner Datei package.json einen Schritt hinzugefügt, der das Ersetzen in der Datei verwendet, um dies für mich zu tun. myscript.js ­ const replace = require('replace-in-file'); const options = { files: '_demo/typedocs/navexReact.td.js', from: /{/, to: 'export default {', }; const convertJsonOutputToJsModule = async () => { try { const changes = await replace(options) console.log('Converted json to module in files:', changes.join(', ')); } catch (error) { console.error('Error occurred:', error); } } convertJsonOutputToJsModule()
StJohn3D
1
"In JS konvertieren" ist keine Lösung für den Import einer JSON-Datei. Das ist keine JSON-Datei mehr. Dies ist das beste Google-Ergebnis für den Import von JSON. Die Hauptantwort lautet, JSON nicht zu importieren.
Jimbo Jonny
119

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

Williamli
quelle
13
Um dies zu ergänzen (Typoskript-JSON-Import), können Sie dies jetzt einfach zu Ihrer tsconfig hinzufügen ... {"compilerOptions": {"resolveJsonModule": true}}
Matt Coady
4
Unterstützen Browser dies? Ich habe dies mit dem aktuellen FF versucht und erhalte den Fehler Loading failed for the module with source "example.json". In Chrome wird Folgendes angezeigt: "Fehler beim Laden des Modulskripts: Der Server hat mit einem Nicht-JavaScript-MIME-Typ von" application / json "geantwortet. Für Modulskripte gemäß HTML-Spezifikation wird eine strikte MIME-Typprüfung erzwungen."
Coderer
@Coderer funktioniert auf allen meinen Browsern. Haben Sie die ES6 / ES2015-Unterstützung aktiviert?
Williamli
2
Es kam nur zu mir, wenn Sie „in ES6“ sagen Sie eigentlich mean „in TS“ - dachte ich Sie über den Code sprachen emittiert durch , tscaber das ist nicht wirklich was passiert. Ich versuche, ES6-Module nativ im Browser ( <script type="module">) auszuführen, und die obigen Fehler treten auf, wenn Sie diese importZeile direkt ausführen . Bitte korrigieren Sie mich, wenn ich falsch liege und Sie tatsächlich gemeint haben, dass es möglich ist, aus JSON in ES6 zu importieren.
Coderer
3
Als ich sagte "Unterstützen Browser dies?", Meinte ich nicht "nachdem Sie es durch Babel transpiliert haben". Im ersten Artikel, den Sie verlinkt haben, transpiliert TS die importAnweisung auf einen Knoten require()(probieren Sie es aus!), Und der zweite Link sagt nichts über JSON-Importe aus. Das Problem liegt hier nicht beim Parser oder dem Modulsystem, sondern beim Loader. Der Loader des Browsers löst keinen Import für etwas anderes als Javascript auf. Unter der Haube müssen Sie immer einen AJAX-Aufruf (fetch / XHR) verwenden und das Ergebnis analysieren, auch wenn Ihre Build-Toolchain dies abstrahiert.
Coderer
67

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';
Simone
quelle
5
Es ist nicht nötig, es in einen String zu setzen. Es heißt schließlich JSON, nicht JSSN.
Ein besserer Oliver
4
Außerdem erklärte Torazaburo in einer zuvor gelöschten Antwort: Es gibt kein ES6 "Modulsystem"; Es gibt eine API, die von einem bestimmten Loader implementiert wird. Jeder Loader kann alles tun, was er will, einschließlich der Unterstützung des Imports von JSON-Dateien. Beispielsweise kann ein Loader den Import von foo aus './directory unterstützen, um das Verzeichnis / index.js
CodingIntrigue vom
5
Tatsächlich unterstützt ES6 / ES2015 das Laden von JSON über die Importsyntax: import * als Daten aus './example.json';
Williamli
+1 für die Erinnerung, dass Webpack dies automatisch tut. Vorsicht, wenn Sie das Webpack "test: /.js/" haben, wird versucht, Ihre JSON-Datei als JavaScript zu kompilieren. #Scheitern. Um das Problem zu beheben, ändern Sie es in "test: /.js$/"
Rap
Webpack basiert auf NodeJS, nicht wahr?
Ayyash
20

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';
Francisco Neto
quelle
13

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'
Anonymer Benutzer 2903
quelle
9

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

Pat Migliaccio
quelle
Hinzugefügt Hinweis für Typoskript ist , um sicherzustellen , resolveJsonModuleist truein Ihnen tsconfig.json.
Pat Migliaccio
1
hat perfekt funktioniert! Wenn Sie json importieren und in einer Variablen speichern, funktioniert diese Lösung.
JP Bala Krishna
1

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.

Avram Tudor
quelle
Kippen. Abrufen unterstützt keine lokale Datei ... Möglicherweise verwenden Sie Polyfill oder ähnliches.
Sapy
@sapy Monate zu spät antworten, aber das holen API meisten absolut tut Unterstützung Laden von Pfaden , ohne den Hostnamen des Servers zu spezifizieren, sowie das Laden von relativen Pfaden. Was Sie denken, ist das Laden von file:///URLs, was hier nicht der Fall ist.
Jamie Ridding
1

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.

trusktr
quelle