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'essaye d'importer un fichier JavaScript.

Une solution de contournement simple:

config.js

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

puis...

import config from '../config.js'

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

Dans 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

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

Il y a plusieurs façons de le faire. En fonction de vos besoins, vous pouvez soit examiner comment lire des fichiers en JavaScript (cela window.FileReaderpeut être une option si vous utilisez le navigateur), soit utiliser d'autres chargeurs comme décrit dans d' autres questions (en supposant que vous utilisez NodeJS).

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

A noter également si vous utilisez Webpack, l'importation de fichiers JSON fonctionnera par défaut (depuis webpack >= v2.0.0).

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

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

Sans avoir à exporter quoi que ce soit du fichier JSON (ce qui n'est pas possible au btw), je pourrais faire une importation par défaut de son contenu avec cette syntaxe:

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

Si vous utilisez node, 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

OU

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

OU

import * from '../config.json'

En fonction de vos outils de construction et de la structure de données dans le 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

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

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

Le json-loader ne fait pas grand-chose depuis Webpack 2+, donc après quelques manipulations, j'ai fini par le supprimer.

La solution qui a fonctionné pour moi était simplement d'utiliser fetch. Bien que cela imposera très probablement des changements de code pour s'adapter à l'approche asynchrone, cela a parfaitement fonctionné, d'autant plus que fetch offrira un décodage json à la volée.

Alors voilà:

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

Gardez à l'esprit que, puisque nous parlons spécifiquement de package.json ici, le fichier ne sera généralement pas inclus dans votre version de production (ou même dans le développement), vous devrez donc utiliser le CopyWebpackPlugin pour avoir accès à lors de l'utilisation de fetch.

Dans un navigateur avec fetch (pratiquement tous maintenant):

Pour le moment, nous ne pouvons pas les importfichiers avec un type mime JSON, uniquement les fichiers avec un type mime JavaScript. Cela pourrait être une fonctionnalité ajoutée à l'avenir ( discussion officielle ).

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

Dans Node.js v13.2 +:

Il nécessite actuellement l' --experimental-json-modulesindicateur , sinon il n'est pas pris en charge par défaut.

Essayez de courir

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

et voir le contenu obj sorti sur la console.