Jak mogę uzyskać dostęp do pliku JSON w Ecmascript 6? Poniższe nie działa:

import config from '../config.json'

Działa to dobrze, jeśli spróbuję zaimportować plik JavaScript.

Proste obejście:

config.js

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

następnie...

import config from '../config.js'

nie pozwala na import istniejących plików .json, ale wykonuje swoje zadanie.

W języku TypeScript lub przy użyciu Babel możesz zaimportować plik JSON w swoim kodzie.

// Babel

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

Źródła: https://hackernoon.com/import-json-into-typescript-8d465beded79

Niestety ES6 / ES2015 nie obsługuje ładowania JSON poprzez składnię importu modułu. Ale ...

Można to zrobić na wiele sposobów. W zależności od potrzeb możesz sprawdzić, jak czytać pliki w JavaScript ( window.FileReadermoże to być opcja, jeśli używasz przeglądarki) lub użyć innych programów ładujących, jak opisano w innych pytaniach (zakładając, że używasz NodeJS).

Najprostszym sposobem IMO jest prawdopodobnie umieszczenie JSON jako obiektu JS w module ES6 i wyeksportowanie go. W ten sposób możesz po prostu zaimportować go tam, gdzie go potrzebujesz.

Warto również zauważyć, że jeśli używasz Webpack, importowanie plików JSON będzie działać domyślnie (od webpack >= v2.0.0).

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

Używam babel + browserify i mam plik JSON w katalogu ./i18n/locale-en.json z przestrzenią nazw tłumaczeń (do użycia z ngTranslate).

Bez konieczności eksportowania czegokolwiek z pliku JSON (co przy okazji nie jest możliwe), mogłem dokonać domyślnego importu jego zawartości z następującą składnią:

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

Jeśli używasz węzła, możesz:

const fs = require('fs');

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

LUB

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

Jeszcze:

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

// script.js

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

LUB

import * from '../config.json'

W zależności od narzędzi kompilacji i struktury danych w pliku JSON może wymagać zaimportowania pliku default.

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

np. użycie w ramach Next.js

Trochę późno, ale właśnie natknąłem się na ten sam problem, próbując dostarczyć dane analityczne dla mojej aplikacji internetowej, które obejmowały wysyłanie wersji aplikacji na podstawie wersji package.json.

Konfiguracja wygląda następująco: React + Redux, Webpack 3.5.6

Moduł ładujący json nie robi zbyt wiele od czasu Webpack 2+, więc po kilku majstrowaniu przy nim skończyło się na jego usunięciu.

Rozwiązaniem, które faktycznie zadziałało, było po prostu użycie funkcji pobierania. Chociaż najprawdopodobniej wymusi to pewne zmiany w kodzie, aby dostosować się do podejścia asynchronicznego, zadziałało doskonale, zwłaszcza biorąc pod uwagę fakt, że pobieranie będzie oferować dekodowanie json w locie.

Więc oto jest:

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

Należy pamiętać, że ponieważ mówimy tutaj konkretnie o package.json, plik zwykle nie będzie dołączony do twojej kompilacji produkcyjnej (lub nawet dev, jeśli o to chodzi), więc będziesz musiał użyć CopyWebpackPlugin, aby mieć dostęp do podczas korzystania z funkcji pobierania.

W przeglądarce z funkcją pobierania (w zasadzie wszystkie teraz):

W tej chwili nie możemy importplików z typem MIME JSON, tylko pliki z typem MIME JavaScript. Może to być funkcja dodana w przyszłości ( oficjalna dyskusja ).

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

W Node.js 13.2 +:

Obecnie wymaga --experimental-json-modulesflagi , w przeciwnym razie nie jest obsługiwana domyślnie.

Spróbuj biegać

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

i zobacz zawartość obj wyprowadzoną do konsoli.