Изучите новейшие и лучшие возможности JavaScript. Модули ES6 развивались с течением времени. Ниже приведено полезное усовершенствование, позволяющее легко использовать файлы JSON в модуле JavaScript.
Как импортировать файл JSON в качестве модуля
Использование оператора «Import Assert», функция TC39 Stage 3
Когда-то JavaScript начинался с небольших программ. По мере роста сложности приложений добавлялось все больше и больше кода и файлов JavaScript, возникла необходимость в разделении приложения на несколько модулей.
Начиная с ES2015 браузеры изначально поддерживают функцию импорта и экспорта функций и объектов JavaScript в виде модулей.
Хотя это хорошо работает с файлами JavaScript, импорт файла JSON в качестве модуля не работает.
В качестве примера рассмотрим следующие данные о динозаврах в файле JSON:
Затем рассмотрите возможность импорта файла JSON со следующим оператором:
import dinosaurs from './dinosaurs.json';
Google Chrome показывает следующую ошибку:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.
Примечание. Другие браузеры показывают аналогичную ошибку.
Тип содержимого
Обратите внимание, что браузеры (веб-платформа) проверяют тип содержимого (называемый типом MIME — Многоцелевые расширения почты Интернета).
Тип MIME определяет тип ресурса. Рассмотрим несколько часто используемых типов MIME.
- HTML-файлы — text/html
- Файлы JSON — application/json
- Файлы JavaScript — текст/javascript
- Изображения JPEG — изображение/jpeg
- MP3 — аудио/мпег
- MP4 — видео/mp4
Проблема безопасности
Расширения файла (например, .js или .json) или типа MIME недостаточно для окончательного определения типа содержимого. Модуль можно импортировать между доменами (кросс-происхождение).
Представьте, разработчик намеревается импортировать файл JSON между доменами как модуль. Как вы знаете, файл JSON не выполняется как скрипт. Следовательно, очищенный файл JSON считается безопасным.
Однако третья сторона может вернуть файл JSON с типом содержимого text/javascript. В файл JSON может быть включен вредоносный скрипт, который запускается на клиентском компьютере.
Решение
Спецификация HTML требует от разработчика явного указания типа контента с помощью инструкции assert.
См. ниже:
import dinosaurs from './dinosaurs.json' assert {type: 'json'};
Если сервер не возвращает тип содержимого, указанный в утверждении утверждения, браузер (веб-платформа) возвращает ошибку. Это обеспечивает безопасность и позволяет избежать запуска непреднамеренных вредоносных сценариев вместе с приложением.
Оператор assert работает и с динамическим импортом.
Рассмотрим следующий фрагмент кода:
const dinosaurs = import('./dinosaurs.json', {
assert: {
type: 'json'
}
});
Обратите внимание, что приведенная выше функция import() возвращает обещание. Когда вы выполняете промис, у вас есть доступ к модулю. Используйте поле default в модуле для доступа к файлу JSON.
Рассмотрим следующий фрагмент кода:
dinosaurs.then( d =>
d.default.forEach(dino => {
console.log("🦕", dino);
})
);
Примечание: функция импорта утверждений все еще находится в экспериментальном состоянии. Предложение TC39 находится на этапе 3 и называется кандидатом. Функции этапа 3 почти финальные. Если не будет дальнейших критических отзывов или уточнений, рецензенты ECMA повысят уровень изменения до Этапа 4/Завершено.
Рекомендации
- 🦖 Спасибо Кум Майде за данные о динозаврах в ее репозитории кода GitHub auth0-blog - ссылка🦕
- Утверждения импорта V8.dev — ссылка
- Спецификация TC39 для утверждений об импорте — ссылка
Создавайте компонуемые веб-приложения
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые интерфейсы и серверные части с мощным и приятным опытом разработки.
Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
