serialize - ¿Cómo importar un archivo json en ecmascript 6?

simple json example

Question

¿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.

Answer 1

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

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

por ejemplo, uso dentro de Next.js

Answer 2

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

Answer 3

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

Answer 4

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 buscar cómo leer archivos en JavaScript ( window.FileReader podría ser una opción si 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 webpack >= v2.0.0 ).

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

Answer 5

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

Answer 6

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é eliminá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.

Answer 7

Una solución simple:

config.js

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

entonces...

import config from ''../config.js''

no permite importar archivos .json existentes, pero hace un trabajo.