web-dev-qa-db-fra.com

Comment importer un fichier JSON dans ecmascript 6?

Comment puis-je accéder à un fichier JSON dans Ecmascript 6? Ce qui suit ne fonctionne pas:

import config from '../config.json'

Cela fonctionne bien si j'essaie d'importer un fichier JavaScript.

jsonimportecmascript-6
112
Nikita Jajodia

Une solution de contournement simple:

config.js

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

ensuite...

import config from '../config.js'

n'autorise pas l'importation de fichiers .json existants, mais effectue un travail.

78
Gilbert

En TypeScript ou en utilisant Babel, vous pouvez importer un fichier json dans votre code.

// Babel

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

Référence: https://hackernoon.com/import-json-into-TypeScript-8d465beded79

56
williamli

Malheureusement, ES6/ES2015 ne prend pas en charge le chargement de JSON via la syntaxe d'importation du module. Mais ...

Vous pouvez le faire de nombreuses façons. En fonction de vos besoins, vous pouvez soit regarder comment lire les fichiers en JavaScript (window.FileReader peut être une option si vous utilisez le navigateur), soit utiliser d'autres chargeurs comme décrit dans autres questions = (en supposant que vous utilisez NodeJS).

Le moyen le plus simple d'IMO est probablement de simplement placer le JSON en tant qu'objet JS dans un module ES6 et de l'exporter. De cette façon, vous pouvez simplement l'importer où vous en avez besoin.

À noter également que si vous utilisez Webpack, importer des fichiers JSON fonctionnera par défaut (depuis webpack >= v2.0.0).

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

J'utilise babel + browserify et j'ai un fichier JSON dans un répertoire ./i18n/locale-en.json avec un espace de noms pour les traductions (à utiliser avec ngTranslate).

Sans rien exporter du fichier JSON (ce qui n'est pas possible), je pourrais effectuer une importation par défaut de son contenu avec cette syntaxe:

import translationsJSON from './i18n/locale-en';
20
Francisco Neto

Si vous utilisez noeud, vous pouvez:

const fs = require('fs');

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

OR

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

Autre:

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

// script.js

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

OR

import * from '../config.json'
10
Anonymous User 2903

En fonction de vos outils de construction et de la structure de données au sein du fichier JSON, il peut être nécessaire d’importer le fichier default.

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

par exemple. utilisation dans Next.js

2
Pat Migliaccio

Un peu tard, mais je suis tombé sur le même problème en essayant de fournir des analyses pour mon application Web qui impliquait l'envoi d'une version de l'application basée sur la version package.json.

La configuration est la suivante: React + Redux, Webpack 3.5.6

Json-loader ne fait plus grand chose depuis Webpack 2+, alors après quelques manipulations, j'ai fini par l'enlever.

La solution qui a réellement fonctionné pour moi était simplement d’utiliser fetch. Cela va probablement imposer des modifications de code pour s’adapter à l’approche asynchrone, mais cela fonctionne parfaitement, d’autant plus que fetch offrira le décodage json à la volée.

Alors la voici:

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

N'oubliez pas que, puisque nous parlons de package.json précisément ici, le fichier ne sera généralement pas fourni avec votre version de production (ni même dev), vous devrez donc utiliser CopyWebpackPlugin pour avoir accès à quand on utilise fetch.

0
Avram Tudor