Como posso acessar um arquivo json no Ecmascript 6? O seguinte não funciona:

import config from '../config.json'

Isso funciona bem se eu tentar importar um arquivo JavaScript.

Uma solução simples:

config.js

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

então...

import config from '../config.js'

não permite a importação de arquivos .json existentes, mas executa um trabalho.

No TypeScript ou usando o Babel, você pode importar o arquivo json no seu código.

// Babel

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

Referência: https://hackernoon.com/import-json-into-typescript-8d465beded79

Infelizmente, o ES6 / ES2015 não suporta o carregamento de JSON através da sintaxe de importação do módulo. Mas ...

Existem várias maneiras de fazer isso. Dependendo das suas necessidades, você pode examinar como ler arquivos em JavaScript ( window.FileReaderpode ser uma opção se estiver executando no navegador) ou usar alguns outros carregadores, conforme descrito em outras perguntas (supondo que você esteja usando o NodeJS).

A maneira mais simples da IMO é provavelmente colocar o JSON como um objeto JS em um módulo ES6 e exportá-lo. Dessa forma, você pode simplesmente importá-lo onde precisar.

Também é importante notar que, se você estiver usando o Webpack, a importação de arquivos JSON funcionará por padrão (desde webpack >= v2.0.0).

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

Estou usando o babel + browserify e tenho um arquivo JSON em um diretório ./i18n/locale-en.json com espaço para nome traduções (para ser usado com ngTranslate).

Sem precisar exportar nada do arquivo JSON (o que não é possível), eu poderia fazer uma importação padrão de seu conteúdo com esta sintaxe:

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

Se você estiver usando o nó, poderá:

const fs = require('fs');

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

OU

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

Outro:

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

// script.js

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

OU

import * from '../config.json'

Dependendo das ferramentas de construção e da estrutura de dados no arquivo JSON, pode ser necessário importar o arquivo default.

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

por exemplo, uso dentro Next.js

Um pouco tarde, mas me deparei com o mesmo problema ao tentar fornecer análises para meu aplicativo da web que envolvia o envio da versão do aplicativo com base na versão package.json.

A configuração é a seguinte: React + Redux, Webpack 3.5.6

O json-loader não está fazendo muito desde o Webpack 2+, então, depois de algumas brincadeiras, acabei removendo-o.

A solução que realmente funcionou para mim foi simplesmente usar a busca. Embora isso provavelmente imponha algumas alterações de código para se adaptar à abordagem assíncrona, funcionou perfeitamente, especialmente considerando o fato de que a busca oferecerá decodificação json em tempo real.

Então aqui está:

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

Lembre-se de que, como estamos falando do package.json especificamente aqui, o arquivo geralmente não é incluído na sua compilação de produção (ou mesmo no dev), portanto, você precisará usar o CopyWebpackPlugin para ter acesso a ao usar buscar.

Em um navegador com busca (basicamente todos agora):

No momento, não podemos importarquivos com um tipo mime JSON, apenas arquivos com um tipo mime JavaScript. Pode ser um recurso adicionado no futuro ( discussão oficial ).

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

No Node.js v13.2 +:

Atualmente, requer o --experimental-json-modulessinalizador , caso contrário, não é suportado por padrão.

Tente correr

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

e veja o conteúdo obj gerado no console.