@babel/plugin-proposal-json-modules

import ... with { type: "json" } 宣言を、インポートされたファイルを読み取り、JSON.parse するプラットフォーム固有の API に変換します。

このプラグインによって適用される変換は、生成されるコードが Node.js、ブラウザ、またはその両方と互換性があるかどうかを検出するために、トップレベルの targets に依存します。Node.js をターゲットにする場合、生成されるコードは、モジュールを CommonJS にコンパイルするかどうかによっても変化します。

注意

このプラグインは、モジュールを AMD、SystemJS、または UMD にコンパイルするときには使用できません。

注意

このプラグインは、import 宣言のみを変換し、動的な import() 呼び出しは変換しません。

例

input.js

import data from "./data.json" with { type: "json" };

は以下のように変換されます

ブラウザ

output.js

const data = await fetch(import.meta.resolve("./data.json")).then(r => r.json());

Node.js (ESM)

output.mjs

import { readFileSync as _readFileSync } from "fs";
const data = JSON.parse(_readFileSync(new URL(import.meta.resolve("./data.json"))));

Node.js (CommonJS)

output.cjs

"use strict";

const data = JSON.parse(require("fs").readFileSync(require.resolve("./data.json")));

ブラウザおよび Node.js (ESM)

output.js

const data = await (
  typeof process === "object" && process.versions?.node
    ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./data.json")))).then(JSON.parse)
    : fetch(import.meta.resolve("./data.json")).then(r => r.json())
);

インストール

npm

npm install --save-dev @babel/plugin-proposal-json-modules

Yarn

yarn add --dev @babel/plugin-proposal-json-modules

pnpm

pnpm add --save-dev @babel/plugin-proposal-json-modules

使い方

設定ファイルを使用する（推奨）

babel.config.json

{
  "plugins": [
    "@babel/plugin-proposal-json-modules"
  ]
}

CLI経由

シェル

babel --plugins=@babel/plugin-proposal-json-modules script.js

Node API経由

JavaScript

require("@babel/core").transformSync("code", {
  plugins: [
    "@babel/plugin-proposal-json-modules"
  ],
});

参考文献

• プロポーザル: JSON モジュール