Як я можу отримати доступ до файлу 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');

Ще:

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

Завантажувач json не дуже багато працює з Webpack 2+, тому після деякого поводження з ним я закінчив його видаляти.

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

Отже ось це:

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

Майте на увазі, що оскільки ми спеціально тут говоримо про package.json, файл зазвичай не надходить у комплект виробничої збірки (або навіть розробник для цього), тому вам доведеться використовувати CopyWebpackPlugin, щоб мати доступ до це при використанні вибору.

У веб-переглядачі із завантаженням (в основному їх зараз):

На даний момент ми не можемо importфайли з мімою типу 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, що виводиться на консоль.