¿Cómo puedo acceder a un archivo json en Ecmascript 6? Lo siguiente no funciona:

import config from '../config.json'

Esto funciona bien si intento importar un archivo JavaScript.

Una solución simple:

config.js

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

luego...

import config from '../config.js'

no permite la importación de archivos .json existentes, pero hace un trabajo.

En TypeScript o usando Babel, puede importar archivos json en su código.

// Babel

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

Referencia: https://hackernoon.com/import-json-into-typescript-8d465beded79

Lamentablemente, ES6 / ES2015 no admite la carga de JSON a través de la sintaxis de importación del módulo. Pero ...

Hay muchas formas de hacerlo. Dependiendo de sus necesidades, puede investigar cómo leer archivos en JavaScript ( window.FileReaderpodría ser una opción si se está ejecutando en el navegador) o usar algunos otros cargadores como se describe en otras preguntas (suponiendo que esté usando NodeJS).

La forma más simple de la OMI es simplemente colocar el JSON como un objeto JS en un módulo ES6 y exportarlo. De esa manera, puede importarlo donde lo necesite.

También vale la pena señalar si está utilizando Webpack, la importación de archivos JSON funcionará de forma predeterminada (desde entonces webpack >= v2.0.0).

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

Estoy usando babel + browserify y tengo un archivo JSON en un directorio ./i18n/locale-en.json con espacio de nombres de traducción (para usar con ngTranslate).

Sin tener que exportar nada del archivo JSON (que por cierto no es posible), podría realizar una importación predeterminada de su contenido con esta sintaxis:

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

Si está utilizando el nodo, puede:

const fs = require('fs');

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

O

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

Más:

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

// script.js

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

O

import * from '../config.json'

Dependiendo de las herramientas de compilación y la estructura de datos dentro del archivo JSON, puede requerir importar el archivo default.

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

por ejemplo, uso dentro de Next.js

Un poco tarde, pero me encontré con el mismo problema al intentar proporcionar análisis para mi aplicación web que implicaba enviar la versión de la aplicación basada en la versión package.json.

La configuración es la siguiente: React + Redux, Webpack 3.5.6

El json-loader no está haciendo mucho desde Webpack 2+, así que después de jugar un poco, terminé quitándolo.

La solución que realmente funcionó para mí, fue simplemente usar fetch. Si bien esto probablemente impondrá algunos cambios de código para adaptarse al enfoque asíncrono, funcionó perfectamente, especialmente dado el hecho de que fetch ofrecerá decodificación json sobre la marcha.

Asi que aqui esta:

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

Tenga en cuenta que, dado que estamos hablando de package.json específicamente aquí, el archivo generalmente no vendrá incluido en su compilación de producción (o incluso dev para el caso), por lo que tendrá que usar CopyWebpackPlugin para tener acceso a cuando se usa fetch.

En un navegador con búsqueda (básicamente todos ahora):

Por el momento, no podemos importarchivos con un tipo MIME JSON, solo archivos con un tipo MIME JavaScript. Podría ser una característica agregada en el futuro ( discusión oficial ).

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

En Node.js v13.2 +:

Actualmente requiere la --experimental-json-modulesbandera , de lo contrario no es compatible por defecto.

Intenta correr

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

y vea el contenido obj que sale a la consola.