Как я могу получить доступ к json-файлу в Ecmascript 6? Следующее не работает:

import config from '../config.json'

Это прекрасно работает, если я пытаюсь импортировать файл JavaScript.

Простой обходной путь:

config.js

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

затем...

import config from '../config.js'

не позволяет импортировать существующие файлы .json, но выполняет работу.

В TypeScript или с помощью Babel вы можете импортировать файл json в свой код.

// Babel

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

Ссылка: https://hackernoon.com/import-json-into-typescript-8d465beded79

К сожалению, ES6 / ES2015 не поддерживает загрузку JSON через синтаксис импорта модуля. Но ...

Есть много способов сделать это. В зависимости от ваших потребностей вы можете посмотреть, как читать файлы в JavaScript (это window.FileReaderможет быть вариант, если вы работаете в браузере) или использовать некоторые другие загрузчики, как описано в других вопросах (при условии, что вы используете NodeJS).

Самый простой способ IMO - это просто поместить JSON как объект JS в модуль ES6 и экспортировать его. Таким образом, вы можете просто импортировать его туда, где вам это нужно.

Также стоит отметить, что если вы используете Webpack, импорт файлов JSON будет работать по умолчанию (поскольку webpack >= v2.0.0).

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

Я использую babel + browserify, и у меня есть файл JSON в каталоге ./i18n/locale-en.json с пространством имен переводов (для использования с ngTranslate).

Без необходимости экспортировать что-либо из файла JSON (что, кстати, невозможно), я мог бы сделать импорт его содержимого по умолчанию с помощью следующего синтаксиса:

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

Если вы используете узел, вы можете:

const fs = require('fs');

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

ИЛИ

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

ИЛИ

import * from '../config.json'

В зависимости от инструментов сборки и структуры данных в файле JSON может потребоваться импорт default.

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

например, использование в Next.js

Немного поздно, но я наткнулся на ту же проблему, пытаясь предоставить аналитику для моего веб-приложения, которая включала отправку версии приложения на основе версии package.json.

Конфигурация выглядит следующим образом: React + Redux, Webpack 3.5.6

Начиная с Webpack 2+, json-загрузчик мало что делает, поэтому, поигравшись с ним, я удалил его.

Решение, которое действительно работало для меня, было просто использовать fetch. Хотя это, скорее всего, приведет к некоторым изменениям кода для адаптации к асинхронному подходу, он работает отлично, особенно с учетом того факта, что fetch будет предлагать декодирование json на лету.

Итак, вот оно:

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

Имейте в виду, что, поскольку речь идет именно о package.json, этот файл обычно не входит в комплект вашей производственной сборки (или даже в этом отношении dev), поэтому вам придется использовать CopyWebpackPlugin для доступа к это при использовании fetch.

В браузере с fetch (в основном все они сейчас):

В настоящее время мы не можем importфайлы с MIME-типом JSON, только файлы с MIME-типом JavaScript. Это может быть добавлено в будущем ( официальное обсуждение ).

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

В Node.js v13.2 +:

В настоящее время требуется --experimental-json-modulesфлаг , в противном случае он не поддерживается по умолчанию.

Попробуйте запустить

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

и увидеть содержимое obj, выведенное на консоль.