Hoe een JSON-bestand importeren in Ecmascript 6?

December 21, 2021

Hoe krijg ik toegang tot een JSON-bestand in Ecmascript 6?

Het volgende werkt niet:

import config from '../config.json'

Dit werkt prima als ik probeer een JavaScript-bestand te importeren.

Antwoord 1, Autoriteit 100%

Een eenvoudige oplossing:

config.js

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

Dan …

import config from '../config.js'

staat geen invoer van bestaande .json-bestanden toe, maar doet een taak.

Antwoord 2, Autoriteit 186%

In typescript of het gebruik van Babel, kunt u JSON -bestand in uw code importeren.

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

Referentie:
https://hackernoon.com/import-json-into-typescript-8D465Beded79

Antwoord 3, Autoriteit 87%

Helaas ondersteunt ES6 / ES2015 het laden van JSON niet via de Module Import Syntaxis. maar …

Er zijn veel manieren waarop u het kunt doen. Afhankelijk van uw behoeften kunt u bekijken hoe u bestanden in Javascript (window.FileReaderkunt lezen, kan een optie zijn als u in de browser gebruikt) of gebruik een aantal andere laders zoals beschreven in Andere vragen (ervan uitgaande dat u NODEJS gebruikt) .

IMO-eenvoudigste manier is waarschijnlijk om de JSON gewoon als een JS-object in een ES6-module te plaatsen en exporteren. Op die manier kunt u het gewoon importeren waar u het nodig hebt.

Ook de moeite waard om op te melden als u Webpack gebruikt, importeren van JSON-bestanden zal standaard werken (sinds webpack >= v2.0.0).

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

Antwoord 4, Autoriteit 25%

Ik gebruik Babel + Browserify en ik heb een JSON-bestand in een directory ./i18n/locale-en.json met vertalingen Naamruimte (te gebruiken met NGRANSLATE).

Zonder alles uit het JSON-bestand te hoeven exporteren (welke THW niet mogelijk is), kan ik een standaard importeren van de inhoud van deze syntaxis:

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

Antwoord 5, Autoriteit 24%

Als u knooppunt gebruikt, kunt u:

const fs = require('fs');
const { config } = JSON.parse(fs.readFileSync('../config.json'));

of

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

anders:

// config.js
{
// json object here
}
// script.js
import { config } from '../config.js';

of

import * from '../config.json'

Antwoord 6, Autoriteit 21%

Afhankelijk van uw build-tooling en de gegevensstructuur binnen het JSON-bestand, kan deze mogelijk de defaultimporteren.

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

b.g. Gebruik in Next.js

Antwoord 7, Autoriteit 21%

in een browser met fetch (in feite allemaal nu):

Op dit moment kunnen we importbestanden met een JONSE MIME-type, alleen bestanden met een JavaScript MIME-type. Het kan in de toekomst een kenmerk zijn (officiële discussie ).

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

in Node.js V13.2 +:

Het vereist momenteel de --experimental-json-modulesvlag , anders wordt het standaard niet ondersteund.

Probeer

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

en zie de inhoud van OBJ uitgevoerd naar de console.

Antwoord 8, Autoriteit 8%

Een beetje laat, maar ik struikelde gewoon hetzelfde probleem terwijl ik probeerde Analytics voor mijn web-app te verstrekken die de app-versie op basis van de Package.json-versie had verzonden.

Configuratie is als volgt: reageren + redux, webpack 3.5.6

De JSON-loader doet niet veel sinds Webpack 2+, dus na wat nederig daarmee heb ik het uiteindelijk verwijderd.

De oplossing die daadwerkelijk voor mij heeft gewerkt, gebruikte simpelweg ophalen.
Hoewel dit hoogstwaarschijnlijk enkele codewijzigingen zal afdwingen om zich aan te passen aan de asynchrone benadering, werkte het perfect, vooral gezien het feit dat fetch json-decodering on-the-fly biedt.

Dus hier is het:

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

Houd er rekening mee dat, aangezien we het hier specifiek over package.json hebben, het bestand meestal niet gebundeld wordt geleverd in uw productie-build (of zelfs dev, wat dat betreft), dus u zult de CopyWebpackPlugin moeten gebruiken om heb er toegang toe als je fetch gebruikt.

Antwoord 9, autoriteit 3%

Doe gewoon dit:

import * as importedConfig from '../config.json';

Gebruik het dan als volgt:

const config = importedConfig.default;

Antwoord 10, autoriteit 3%

Voor NodeJS v12 en hoger zou --experimental-json-moduleshet lukken, zonder enige hulp van babel.

https://nodejs.org/docs/latest -v14.x/api/esm.html#esm_experimental_json_modules

Maar het wordt geïmporteerd in commonjs-vorm, dus import { a, b } from 'c.json'wordt nog niet ondersteund.

Maar je kunt het volgende doen:

import c from 'c.json';
const { a, b } = c;

Antwoord 11, autoriteit 3%

Als aanvulling op de andere antwoorden, is het in Node.js mogelijk om requirete gebruiken om JSON-bestanden te lezen, zelfs in ES-modules. Ik vond dit vooral handig bij het lezen van bestanden in andere pakketten, omdat het gebruik maakt van Node’s eigen module oplossingsstrategieom het bestand te lokaliseren.

requirein een ES-module moet eerst worden gemaakt met createRequire.

Hier is een compleet voorbeeld:

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const packageJson = require('typescript/package.json');
console.log(`You have TypeScript version ${packageJson.version} installed.`);

In een project waarop TypeScript is geïnstalleerd, leest en drukt de bovenstaande code het TypeScript-versienummer van package.json af.

Antwoord 12, autoriteit 2%

gegevens importeren uit “./resource.json”
is mogelijk in Chrome 91.
JSON-modules worden nu ondersteund. Hierdoor kunnen ontwikkelaars JSON statisch importeren in plaats van te vertrouwen op de functie fetch() die het dynamisch ophaalt.

https://www. stefanjudis.com/snippets/how-to-import-json-files-in-es-modules/

Antwoord 13

Ik gebruikte het om de plug-in “babel-plugin-inline-json-import” te installeren en vervolgens in .balberc de plug-in toe te voegen.

Installeer plug-in

npm install –save-dev babel-plugin-inline-json-import
Config-plug-in in babelrc

“plug-in”: [
“inline-json-import”
]

En dit is de code waar ik hem gebruik

import es from './es.json'
import en from './en.json'
export const dictionary = { es, en }

Antwoord 14

het importeren van JSON-bestanden is nog experimenteel. Het kan worden ondersteund via de onderstaande vlag.

–experimentele-json-modules

anders kunt u uw JSON-bestand ten opzichte van import.meta.urlrechtstreeks met fsladen:-

import { readFile } from 'fs/promises';
const config = JSON.parse(await readFile(new URL('../config.json', import.meta.url)));

u kunt ook module.createRequire()

gebruiken

import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const config = require('../config.json');

Antwoord 15

Ik gebruik

vuejs, versie: 2.6.12
vuex, versie: 3.6.0
vuex-i18n, versie: 1.13.1.

Mijn oplossing is:

messages.js:

import Vue from 'vue'
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsPl from './messages_pl'
import translationsEn from './messages_en'
Vue.use(Vuex);
export const messages = new Vuex.Store();
Vue.use(vuexI18n.plugin, messages);
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('pl', translationsPl);
Vue.i18n.set('pl');

messages_pl.json:

{
    "loadingSpinner.text:"Ładowanie..."
}

messages_en.json:

{
    "loadingSpinner.default.text":"Loading..."
}

majn.js

import {messages} from './i18n/messages'
Vue.use(messages);

Antwoord 16

Met dank aan alle mensen die JSON-modulesen Beweringen importeren. Sinds Chrome 91 kunt u JSON rechtstreeks importeren, bijvoorbeeld:

// test.json
{
    "hello": "world"
}
// Static Import
import json from "./test.json" assert { type: "json" };
console.log(json.hello);
// Dynamic Import
const { default: json } = await import("./test.json", { assert: { type: "json" } });
console.log(json.hello);
// Dynamic Import
import("./test.json", { assert: { type: "json" } })
  .then(module => console.log(module.default.hello));

Opmerking: andere browsers implementeren deze functie op dit moment mogelijk nog niet.

Previous articleArray-constanten kunnen alleen worden gebruikt in initializers Fout

Next articleHoe kan men een afbeelding weergeven met cv2 in Python