Как я могу получить доступ к json-файлу в Ecmascript 6? следующее не работает:Как импортировать json-файл в ecmascript 6?
import config from '../config.json'
Это прекрасно работает, если я пытаюсь импортировать файл JavaScript.
Как я могу получить доступ к json-файлу в Ecmascript 6? следующее не работает:Как импортировать json-файл в ecmascript 6?
import config from '../config.json'
Это прекрасно работает, если я пытаюсь импортировать файл JavaScript.
Простое решение, которое сработало для меня; не 100% чистой и мне пришлось использовать .js файлы:
config.js
export default
{
// my json here...
}
тогда ...
import config from '../config.js'
Это не отвечает на вопрос. Вы не можете просто преобразовать ваш package.json в package.js, например. Есть моменты, когда вы хотите по-настоящему импортировать JSON, а не JS. – curiousdannii
К сожалению, ES6/ES2015 не поддерживает загрузку JSON через синтаксис импорта модуля.
Есть много способов, которыми вы можете это сделать. В зависимости от ваших потребностей вы можете либо посмотреть, как читать файлы в JavaScript (window.FileReader
может быть вариантом, если вы работаете в браузере), либо использовать некоторые другие загрузчики, как описано в other questions (при условии, что вы используете NodeJS).
IMO простейший способ, вероятно, просто поставить JSON как объект JS в модуль ES6 и экспортировать его. Таким образом, вы можете просто импортировать его там, где вам это нужно.
Не нужно помещать его в строку. В конце концов, это называется JSON, а не JSSN. – zeroflagL
Кроме того, torazaburo объяснил ранее удаленный ответ: * Отсутствует система модулей ES6; существует API, который реализуется конкретным загрузчиком. Любой загрузчик может делать все, что захочет, включая поддержку импорта файлов JSON. Например, загрузчик может выбрать поддержку импорта foo из './directory как значения для импорта directory/index.js * – CodingIntrigue
Я использую столпотворение + browserify и у меня есть файл JSON в каталоге ./i18n/locale-en.json с пространством имён переводов (для использования с ngTranslate).
Без того, чтобы экспортировать что-либо из файла JSON (который кстати не представляется возможным), я мог бы сделать импорт по умолчанию его содержания с этим синтаксисом:
import translationsJSON from './i18n/locale-en';
Немного поздно, но я просто наткнулся та же проблема, пытаясь предоставить аналитику для моего веб-приложения, которая включала отправку версии приложения на основе версии 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.
Это не имеет ничего общего с ES6, но с загрузчиком модуля, который вы используете. Сам синтаксис хорош. –
Самый чистый способ сделать это - использовать с ним 'webpack' и' json-loader'. –