Em Script ou usando Babel, você pode importar JSON arquivo 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

Também vale a pena notar se estiver a usar o Webpack, a importação de ficheiros JSON irá funcionar por omissão (desde webpack >= v2.0.0).

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

Estou a usar o babel+browserify e tenho um ficheiro JSON numa pasta ./i18n / locale-en.json with translations namespace (to be used with ngTranslate).

Sem ter de exportar nada do ficheiro JSON (que o btw não é possível), eu poderia fazer uma importação por omissão do seu conteúdo com esta sintaxe:

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

Se estiver a usar o nó pode:

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');

Else:

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

// script.js

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

Ou

import * from '../config.json'

Dependendo da sua ferramenta de compilação e da estrutura de dados dentro do ficheiro JSON, poderá necessitar de importar o default.

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

Por exemplo, utilização dentro Next.js

Num navegador com fetch (basicamente todos eles agora):

De momento, não podemos {[[2]} Ficheiros com um tipo MIME JSON, apenas ficheiros com um tipo MIME JavaScript. Pode ser uma característica adicionada no futuro ([[8]}discussão oficial ).

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

No Nó.js v13. 2+:

Actualmente, requer a --experimental-json-modules flag , caso contrário não é suportado por omissão.

Tenta correr

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

Um pouco tarde, mas eu apenas tropecei no mesmo problema ao tentar fornecer análises para o meu aplicativo web que envolveu o envio de Versão app com base no Pacote.versão json.

A configuração é a seguinte: React + Redux, Webpack 3. 5. 6

A solução que realmente funcionou para mim, era simplesmente usar o fetch. Enquanto isso provavelmente irá impor algum código mudanças para se adaptar à abordagem async, funcionou perfeitamente, especialmente dado o fato de que fetch vai oferecer decodificação json no momento.

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

Simplesmente faz isto:

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

Então use - o como se segue:

const config = importedConfig.default;

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

Mas é importado na forma commonjs, por isso import { a, b } from 'c.json' ainda não é suportado.

Mas podes fazer:

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

Adicionando às outras respostas, no nó.js é possível usar require para ler arquivos JSON mesmo dentro dos módulos ES. Eu achei isso especialmente útil ao ler arquivos dentro de outros pacotes, porque ele tira vantagem da própria estratégia de resolução do módulo do Node para localizar o arquivo.

require em um módulo ES deve ser criado primeiro com createRequire.

Aqui está um exemplo completo:

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.`);

Num projecto com o TypeScript instalado, o código acima será lido e imprime o número da versão do TypeScript do pacote.json.

Usei-o para instalar o 'plugin' "babel-plugin-inline-json-import" e depois para dentro .balberc adiciona o plugin.

1. Plugin de instalação

   Npm install --save-dev babel-plugin-inline-json-import

2. 'Plugin' de configuração em babelrc

   "plugin": [ "inline-json-import" ]

E este é o código onde o uso

import es from './es.json'
import en from './en.json'

export const dictionary = { es, en }

--experimental-JSON-modules

Caso contrário, pode carregar o seu ficheiro JSON em relação a import.meta.url com fs directamente: -

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

Também pode usar module.createRequire()

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

Estou a usar

• vuejs, version: 2.6.12
• vuex, version: 3.6.0
• vuex-i18n, version: 1.13.1.

A minha solução é:

Mensagens.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..."
}

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

Majn.js

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

let config = require('../config.json')

Isto deve carregar o ficheiro json correctamente