2016-01-22 4 views
32

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

import config from '../config.json'

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

+1

Это не имеет ничего общего с ES6, но с загрузчиком модуля, который вы используете. Сам синтаксис хорош. –

+1

Самый чистый способ сделать это - использовать с ним 'webpack' и' json-loader'. –

ответ

36

Простое решение, которое сработало для меня; не 100% чистой и мне пришлось использовать .js файлы:

config.js

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

тогда ...

import config from '../config.js' 
+4

Это не отвечает на вопрос. Вы не можете просто преобразовать ваш package.json в package.js, например. Есть моменты, когда вы хотите по-настоящему импортировать JSON, а не JS. – curiousdannii

10

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

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

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

+4

Не нужно помещать его в строку. В конце концов, это называется JSON, а не JSSN. – zeroflagL

+3

Кроме того, torazaburo объяснил ранее удаленный ответ: * Отсутствует система модулей ES6; существует API, который реализуется конкретным загрузчиком. Любой загрузчик может делать все, что захочет, включая поддержку импорта файлов JSON. Например, загрузчик может выбрать поддержку импорта foo из './directory как значения для импорта directory/index.js * – CodingIntrigue

7

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

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

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

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

Конфигурация выглядит следующим образом: Реагировать + 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 конкретно здесь, файл не будет, как правило, поставляются в комплекте в производственной сборки (или даже DEV для это важно), поэтому вам придется использовать CopyWebpackPlugin для доступа к нему при использовании fetch.

Смежные вопросы