JSON import attributes | Frontend Practical Guide

Newly available 主要ブラウザの最新版で対応済み。古いブラウザが対象外なら使用可能。

概要

JSON import attributes を使うと、JSON ファイルをモジュールとして静的にインポートできます。バンドラーのツリーシェイキングも有効です。

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`javascript.grammar.trailing_commas.trailing_commas_in_dynamic_import`	91	91	138	15	91	15
ステートメント
`import attributes.type json` `with {type: 'json'}`	123	123	138	17.2	123	17.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

JAVASCRIPT

import config from './config.json' with { type: 'json' };

console.log(config.apiUrl);

JSON import attributes の活用

JSON ファイルを JavaScript モジュールとしてインポートする機能。with { type: 'json' } 構文を使用。