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.
json
import
ecmascript-6
Nikita Jajodia
quelle
quelle
webpack
undjson-loader
damit.Antworten:
Eine einfache Problemumgehung:
config.js
dann...
erlaubt nicht den Import vorhandener .json-Dateien, erledigt aber einen Job.
quelle
"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()
In TypeScript oder mit Babel können Sie eine JSON- Datei in Ihren Code importieren .
Referenz: https://hackernoon.com/import-json-into-typescript-8d465beded79
quelle
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."tsc
aber 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 dieseimport
Zeile 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.import
Anweisung auf einen Knotenrequire()
(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.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.FileReader
kann 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 .quelle
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:
quelle
Wenn Sie einen Knoten verwenden, können Sie:
ODER
Sonst:
ODER
quelle
Abhängig von Ihrem Build-Tool und der Datenstruktur in der JSON-Datei muss möglicherweise die importiert werden
default
.zB Verwendung innerhalb
Next.js
quelle
resolveJsonModule
isttrue
in Ihnentsconfig.json
.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:
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.
quelle
file:///
URLs, was hier nicht der Fall ist.In einem Browser mit Fetch (im Grunde alle jetzt):
Derzeit können keine
import
Dateien 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 ).In Node.js v13.2 +:
Derzeit ist das
--experimental-json-modules
Flag erforderlich , andernfalls wird es standardmäßig nicht unterstützt.Versuche zu rennen
und sehen Sie den obj-Inhalt, der an die Konsole ausgegeben wird.
quelle