Как импортировать json файл в ecmascript 6?

Ответ 1

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

config.js

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

затем...

import config from '../config.js'

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

Ответ 2

В 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

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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'

Ответ 6

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

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

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

Ответ 7

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

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

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

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

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

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

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